告别重复代码！Uniapp小程序全局分享，Vue混入实现代码复用新范式

还在为Uniapp小程序中重复的分享代码烦恼？揭秘如何利用Vue混入，实现小程序全局分享功能的优雅统一。通过shareMixin.js、全局配置与局部覆盖，一站式解决多平台路径、减少代码冗余，让你的项目更高效、更易维护，打造最佳开发实践。

在Uniapp开发微信小程序时，实现全局统一的分享功能是常见需求。

通过Vue混入(mixin)方式实现全局分享功能的完整方案，包含基础配置、自定义覆盖和多平台兼容处理。

核心实现方案

分享混入工具(shareMixin.js)

export default {
  data() {
    return {
      shareConfig: {
        title: '默认分享标题',
        path: '',
        imageUrl: '/static/share-default.png',
        desc: '这是默认分享描述',
        query: ''
      }
    }
  },
  methods: {
    getCurrentPagePath() {
      const pages = getCurrentPages()
      const currentPage = pages[pages.length - 1]
      // #ifdef MP-WEIXIN
      return `/${currentPage.route}`
      // #endif
      // #ifdef MP-ALIPAY
      return currentPage.$page.fullPath
      // #endif
    }
  },
  onShareAppMessage() {
    const path = this.shareConfig.path || this.getCurrentPagePath()
    const query = this.shareConfig.query ? `?${this.shareConfig.query}` : ''
    
    return {
      title: this.shareConfig.title,
      path: `${path}${query}`,
      imageUrl: this.shareConfig.imageUrl,
      desc: this.shareConfig.desc,
      success: () => {
        uni.showToast({ title: '分享成功', icon: 'success' })
      },
      fail: () => {
        uni.showToast({ title: '分享失败', icon: 'none' })
      }
    }
  },
  onShareTimeline() {
    const path = this.shareConfig.path || this.getCurrentPagePath()
    
    return {
      title: this.shareConfig.title,
      query: this.shareConfig.query || '',
      imageUrl: this.shareConfig.imageUrl,
      success: () => {
        uni.showToast({ title: '分享成功', icon: 'success' })
      },
      fail: () => {
        uni.showToast({ title: '分享失败', icon: 'none' })
      }
    }
  }
}

全局混入配置

import Vue from 'vue'
import App from './App'
import shareMixin from '@/utils/shareMixin'

// 全局混入分享功能
Vue.mixin(shareMixin)

// 全局启用分享菜单
uni.showShareMenu({
  withShareTicket: true,
  menus: ['shareAppMessage', 'shareTimeline']
})

Vue.config.productionTip = false
new Vue({
  render: h => h(App)
}).$mount('#app')

功能特点与实现细节

多平台路径处理

平台	路径获取方式
微信小程序	/${currentPage.route}
支付宝小程序	currentPage.$page.fullPath

通过条件编译(#ifdef)实现不同平台的路径处理逻辑，确保跨平台兼容性。

配置覆盖机制

• 全局默认配置：在mixin中定义的基础配置
• 页面级覆盖：通过修改this.shareConfig实现

export default {
  onLoad() {
    this.shareConfig = {
      title: '自定义页面标题',
      path: '/pages/index/index',
      imageUrl: '/static/custom-share.jpg',
      query: 'from=share&id=123',
      desc: '这是自定义分享描述'
    }
  }
}

完整功能支持

功能类型	实现方式
好友分享	onShareAppMessage
朋友圈分享	onShareTimeline
成功反馈	uni.showToast提示
自定义按钮	<button open-type="share">

使用流程

1. 基础配置：将shareMixin.js放入utils目录
2. 全局引入：在main.js中通过Vue.mixin注入
3. 页面定制：在需要自定义的页面修改shareConfig
4. 按钮触发：使用标准分享按钮或自定义按钮

注意事项

1. 确保在app.json中配置了requiredBackgroundModes
2. 图片路径建议使用绝对路径
3. 测试时需真机调试，开发者工具可能表现不一致
4. 分享路径长度有限制，避免过长query参数

lcjmSSL实现了一套完整的证书生命周期管理方案：从申请、验证、签发、部署，到到期提醒、自动续期，全流程自动化。你只需关注业务本身，证书管理交给lcjmSSL，彻底消除运维盲点。