浅谈微信转发分享功能

最近花了一点时间琢磨了一下微信的分享功能，琢磨点主要有：分享的页面都一致，能不能统一配置；自定义分享；

先来说一些简单的，一般来说，你微信小程序没有经过设置的话，页面的分享按钮（也就是右上角的胶囊按钮）会在开发工具显示如下：

然后呢，要想让这里有个转发的按钮，我们需要在onload的生命周期里加上：

wx.showShareMenu({
    withShareTicket: true
});

当然，因为我个人的demo用的不是微信原生，用的是mpvue，所以我个人是写在了Vue的生命周期mounted里的，但经过测试，功能也可以实现。

当你做完了上面的工作，你已经可以看到你的页面已经有分享按钮了，点击分享这个功能也可以实现了，但是你会发现，这个默认的分享，在特定的情况下，是满足不了我们的需求的，准确来说是满足不了技术顾问和项目经理的，因为这个默认的分享他的内容样式都是写死的，比如你在 页面1 使用了分享，那打开分享，进入的页面1，而不是页面2，你在页面2分享给他人，他人打开了链接，进入的也是页面2而不是页面1。

而且这个东西，只能一个一个页面设置，好像并没有统一设置。

接着，若我们想打破这个限制，从页面1分享出去的链接，通过链接打开进入页面2，那我们只有使用自定义分享了。

自定义分享，需要一个button按钮来做辅助，只要我们给button标签加一个属性，如下：

<button open-type="share">
    分享
</button>

 

该页面写一个函数：

onShareAppMessage(options){
    if (options.from === 'button') {
      return {
        title: '转发1',
        path: `pages/index/main`,
        success(res){
          console.log('成功',res)
        }
      }
    }else if(options.from === 'menu'){
      return {
        title: '转发2',
        path: `pages/fiction/main？sid=${sid}`,
        success(res){
          console.log('成功',res)
        }
      }
    }
  },

　　

注意的是，如果用的mpvue写的话，该函数是不可以写在methods里面的，这个跟methods，生命周期是同等级的，所以，你知道应该怎么写。

options传递的参数，from有两个值，一个button，一个menu，button是自定义的按钮，menu是右上角的胶囊按钮，这个时候，你可以在onShareAppMessage函数里面用条件性语句来判断，触发该事件的是默认事情还是自定义事件，并且根据你的需求分别跳转到不同的页面。

另外，我在这里给说一下我遇到的困难，就是onShareAppMessage函数是必须写在主页面（即若你在页面1设置了分享按钮，那onShareAppMessage只能写在页面1的文件中，不能写在如何引入页面的组件里）的，并不能写在组件里面，写在组件里，检测不到的，然后会报错，而且onShareAppMessage是必须要写的。

还有的是，上图，还有一个dataset里面的sid数据，是怎么传输进去的呢？我们在触发自定义转发的按钮加一个自定义属性就可以了，如下：

<button open-type="share" :data-sid="item.sid" >   //////这是mpvue的写法，并不是原生
   分享
</button>

 

还要说的一点是，有时候，我们根据链接跳转到二次页面，也就是要靠传入的参数进行查询才有页面数据，这个时候，看回上面onShareAppMessage函数,这样就可以带参数过去了，但假如说我分享的链接要进入页面2要根据sid这个参数进行查询，但是这样分享出去的参数我如何获取？很简单，跟路由的获取差不多：

onLoad:function(option){
      this.dataObject = {}; // 刚进来的时候，清空数据
      console.log('option.query2',this.$root.$mp.query)
      // 获取路由
      this.sid = this.$root.$mp.query.sid;
      this.getData()
    } 

　　

最后，希望这篇文章可以帮到大家，有什么说错的地方，希望大神指点。手打不易，请勿随意转载