每个人都可以，
拥有SSL证书

小程序开发中，分享功能代码散布各处难以维护？一套Uniapp小程序全局分享的完美解决方案：基于Vue混入，通过集中式管理shareMixin.js、main.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')

功能特点与实现细节

多平台路径处理

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

配置覆盖机制

支持国际化域名(IDN)和中文域名的证书申请，对于拥有国际化域名或中文域名的用户，可以轻松为其网站获取SSL证书，保障访问安全。无论是常规域名还是特殊字符域名，都可以通过lcjmSSL平台顺利部署。

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

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

完整功能支持

使用流程

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

注意事项

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