uniapp 分享朋友圈自定义 全局

### 如何在 UniApp 中实现全局自定义分享到微信朋友圈

为了实现在多个页面中统一管理 `onShareAppMessage` 函数，可以采用 Vue.js 提供的全局混入概念来简化代码并提高可维护性。通过这种方式可以在应用启动时注册一个全局方法，在任何页面触发分享行为时调用该方法。

#### 使用全局混入实现共享逻辑

创建项目根目录下的文件 `common/mixins/share.mixin.js` 来封装公共分享配置：

// common/mixins/share.mixin.js
export default {
  onShareAppMessage(res) {
    return {
      title: '默认分享标题', // 可以根据业务需求动态设置
      path: '/pages/index/index',
      imageUrl: '', // 自定义图片路径
      success() {
        console.log('转发成功');
      },
      fail(err) {
        console.error('转发失败:', err);
      }
    };
  },

  onLoad(options){
    this.shareConfig = options || {}; // 如果需要传递参数给分享接口，则在此处接收
  }

}

接着修改项目的入口文件 `main.js` 添加此混入：

import shareMixin from './common/mixins/share.mixin';

Vue.mixin(shareMixin);

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

这样就完成了基本框架搭建工作[^2]。对于特定场景下想要覆盖默认的行为，只需在对应页面重写 `onShareAppMessage()` 方法即可。

如果要支持更复杂的交互比如点击不同按钮执行不同的分享动作，可以通过事件绑定的方式传参控制具体的分享内容。

#### 完整示例代码展示

下面给出完整的例子说明如何在一个具体的小程序页面里利用上述机制完成定制化操作：

假设有一个名为 "article" 的文章详情页希望提供两种类型的分享选项：“发送给朋友” 和 “分享至朋友圈”。

<!-- pages/article/article.vue -->
<template>
  <view class="container">
    <!-- 文章主体部分省略 -->

    <!-- 分享按钮组 -->
    <button @click="handleFriendClick">发送给朋友</button>
    <button @click="handleTimelineClick">分享到朋友圈</button>

  </view>
</template>

<script>
export default {
  data(){
    return{
      articleId:''
    }
  },
  
  methods:{
    handleFriendClick(){
      uni.showShareMenu({withShareTicket:true});
      
      const friendOptions={
          ...this.$options.methods.onShareAppMessage(),
          title:`推荐一篇文章-${this.articleTitle}`,
          path:`/pages/article-detail?id=${this.articleId}`
      };

      Object.assign(this,friendOptions); // 将新属性赋值给当前实例
      
      setTimeout(()=>{
         wx.hideShareMenu(); // 隐藏菜单防止重复显示
      },0)
    },


    handleTimelineClick(){
       uni.showShareMenu({menus:['shareAppMessage','shareTimeline']});

       const timelineOptions={
           ...this.$options.methods.onShareAppMessage(),
            title:this.articleTitle,
            path:'/pages/article-list',
            imageUrl:this.coverImageUrl
       };

       Object.assign(this,timelineOptions);
       
       setTimeout(()=>
          wx.hideShareMenu(),0)
     }
  }
};
</script>

在这个案例中，当用户点击相应按钮后会先调用 `showShareMenu` 显示系统自带的分享面板；之后再依据实际需求调整即将发出的消息体内的各项字段如标题、链接地址等，并最终将这些更改后的数据重新挂载回组件实例上以便于后续使用。