vue开发微信自定义分享记录

微信官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#2

项目中单独写了个wechat.js作为全局引入的，因为不只一个页面需要做分享，根据需要开发即可

import Vue from 'vue';
import wx from 'weixin-js-sdk';

Vue.use(wx);

export default {
  data() {
    return {
      // jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'scanQRCode', 'getLocation']
    };
  },
  methods: {
    wxConfig() {
      let _this = this;
      let params = new FormData();
      params.append('url', window.location.href.split('#')[0]);
      _this.$http.post('/api/wechat/jssdk', params).then(function (_lists) {
        wx.config({
          debug: false, // true 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: _lists.appId, // 必填，公众号的唯一标识
          timestamp: _lists.timestamp, // 必填，生成签名的时间戳
          nonceStr: _lists.nonceStr,  // 必填，生成签名的随机串
          signature: _lists.signature, // 必填，签名
          jsApiList: _this.jsApiList // 必填，需要使用的JS接口列表
        });
      });
    },
    wxShare(data) {
      let _this = this;
      _this.wxConfig();      
      wx.ready(function () {  // ready接口处理成功验证
        let title = data.title;
        let desc = data.desc;
        let link = data.link;
        let imgUrl = data.imgUrl;
        if (wx.onMenuShareAppMessage) {
          wx.onMenuShareAppMessage({
            title: title,
            desc: desc,
            link: link,
            imgUrl: imgUrl,
            type: '', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
              _this.addPoint();
            }
          });
          wx.onMenuShareTimeline({
            title: title,
            link: link,
            imgUrl: imgUrl,
            success: function () {
              console.log('onMenuShareTimeline');
            }
          });
        } else {
          wx.updateAppMessageShareData({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: imgUrl, // 分享图标
            success: function () {
              console.log('updateAppMessageShareData');
            }
          });
          wx.updateTimelineShareData({
            title: title,
            desc: desc, // 分享描述
            link: link,
            imgUrl: imgUrl,
            success: function () {
              console.log('updateTimelineShareData');
            }
          });
        }
        wx.onMenuShareQQ({
          title: title,
          desc: desc,
          link: link,
          imgUrl: imgUrl,
          success: function () {
            console.log('onMenuShareQQ');
          }
        });
        wx.onMenuShareWeibo({
          title: title,
          desc: desc,
          link: link,
          imgUrl: imgUrl,
          success: function () {
            console.log('onMenuShareWeibo');
          }
        });
        wx.onMenuShareQZone({
          title: title,
          desc: desc,
          link: link,
          imgUrl: imgUrl,
          success: function () {
            console.log('onMenuShareQZone');
          }
        });
      });
    }
  }
};

main.js文件

import wechat from '@/mixins/wechat';
Vue.mixin(wechat);// 混入

接下来只要在需要分享的页面引入就可

async created() {
      this.isWxBrowser = this.isWeixin();
      if (this.isWxBrowser) {
        // 分享
        const shareData = {
          title: '自定义分享标题分享标题分享标题', // 分享标题
          desc: '自定义分享内容分享内容分享内容分享内容分享内容分享内容分享内容', // 分享内容
          link: 'http://xxx.xxxx.xxx/wxLogin', // 分享链接
          imgUrl: 'http://xxx.xxxx.xxx/static/image/userIcon.fc181a0.png' // 分享内容显示的图片(图片必须是正方形的链接)
        };
        this.wxShare(shareData);
      }
    },

注意：分享链接和分享的图片地址必须和配置的安全域名一致，否则自定义分享无效的！！！

中间踩了很多坑，仔细看看官方文档多多百度总能找到解决办法的！！！

另补充：微信H5页面内容缓存问题，安卓ok IOS有问题

解决方法：用！window.location.href="...."来跳转传参。

https://www.cnblogs.com/golddemon/p/9445134.html

https://www.jianshu.com/p/eac41f8b0896