【Vue】17.vue-router history模式下的微信分享遇到的坑

最近用vue-cli3做微信公众号，使用了hiatory模式，其中也是波折不断，自己也是郁闷了好几天才把问题解决掉。

首先先安装微信js-sdk

npm install weixin-js-sdk --save

然后在哪个页面里面用到微信的js api就把包导入进去

import wx from 'weixin-js-sdk'

基本的配置都好了以后， 我们就来说说微信分享过程中遇到的坑。

1.微信分享遇到的坑1

微信官方文档上有下面一段话：

19.目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题已在Android6.2中修复

在实际的测试和大量真实数据收集后发现，Android4.4+都是支持pushState的，也就是说，没有遇到官方文档所诉的问题。(此番调研后才决定采用histpry模式进行实施的，导致ios下踩了坑)

IOS下遇到的问题：

微信invalid signature签名的问题，安卓下面不会遇到签名的问题，因为IOS版微信打开网页，显示的只是初始网址，其他网址都是从这个网址引申，相当于它提供的，就相当于从百度进其他网站产生的流量百度也要拿流量费一样，相当于以当前网址作为跳板，服务器差不多，这是软件的问题，无法改变，但是并不影响你从其他地方打开这个网页，只需要左上角选择浏览器打开，网址自然会恢复当前该显示的网址，安卓上不会有这一种问题，可以直接获取当前的URL。

解决办法：

就是在第一次进入的时候，把当前的URL存起来，后面每次签名的时候都用这个URL去做签名。这里安卓和ios要做一下区分判断，IOS取第一次进入页面的URL，安卓直接取当前的URL。

      getWxJsSDKInfo() {
        // 权限接口
        if (/iPhone|mac|iPod|iPad/i.test(navigator.userAgent)) {
          this.url = this.$store.getters.getUrl;
          console.log(this.url);
        } else {
          this.url = window.location.href;
          console.log(`url: ${this.url}`);
        }
        getGzhJsSign({url: this.url}).then((response) => {
          const resData = response.data;
          console.log(`getGzhJsSign:${JSON.stringify(resData)}`);
          wx.config({
            debug: false,
            appId: resData.appId,
            timestamp: resData.timestamp,
            nonceStr: resData.noncestr,
            signature: resData.signature,
            jsApiList: ['updateAppMessageShareData',
              'updateTimelineShareData',
              'onMenuShareTimeline',
              'onMenuShareAppMessage'],
          });
        });
        wx.ready(() => {
          this.isWxReady = true;
          console.log('wx js加载成功');
          // wx.checkJsApi({
          //   jsApiList: ['updateAppMessageShareData',
          //     'updateTimelineShareData',
          //     'onMenuShareTimeline',
          //     'onMenuShareAppMessage'],
          //   success(res) {
          //     alert(`checkJsApi :${JSON.stringify(res)}`);
          //   },
          // });
        });
      },

2.微信分享遇到的坑2

自定义的分享写完以后，点击分享以后，还要点击右上角微信自己的分享功能，才能把页面分享出去，也就是说自定义分享要两步，当时就是因为自己不知道还有这一步操作，开启debug模式，又没有报错，微信官方又没有明确的说明，自己也不知道什么原因，所以也是折腾了自己好长时间，后来搞明白以后，跟产品沟通了一下，设计了一个引导页，点击自定义分享按钮以后，引导用户再点击微信的分享功能。

3.微信分享遇到的坑3

分享链接传中文参数的问题

由于微信浏览器对中文进行了编码，所以对于中文参数，要进行处理，不能直接传递中文，要不然就会分享不成功，我这里用的是Base64先对中文进行编码，然后再传参数，但是一定要记得，用参数的时候再解码转回来。

4.微信分享遇到的坑4

js-sdk 1.4.0以上的版本，用新的分享接口，老的分享接口也要写上，否则分享也会报错。

      inviteSpeed() {
        const userInfo = {};
        userInfo.serialNo = this.serialNo;
        userInfo.queryType = Base64.encodeURI(this.queryType);
        userInfo.currentUserName = Base64.encodeURI(this.currentUserName);
        console.log(`reportProcessDetails userInfo ${userInfo}`);
        const that = this;
        wx.updateAppMessageShareData({
          title: `${this.currentUserName}的报告正在生成中，需要您帮加速`,
          desc: '完成加速拿好礼，不容错过哦',
          link: `${envObject.webUrl}/ReportSpeed?applySerialNo=${userInfo.serialNo}&queryType=${userInfo.queryType}¤tUserName=${userInfo.currentUserName}`,
          imgUrl: 'https://cmt.bdxiaodai.com/cmGzh/img/report_speed_erweima.8acc5583.png',
          success() {
            that.isShowfloatLayer = true;
          },
          fail() {
            alert('分享失败！');
          },
          complete() {
            // alert('shareFile complete  1');
          },
        });
        wx.updateTimelineShareData({
          title: `${this.currentUserName}的报告正在生成中，需要您帮加速`,
          link: `${envObject.webUrl}/ReportSpeed?applySerialNo=${userInfo.serialNo}&queryType=${userInfo.queryType}¤tUserName=${userInfo.currentUserName}`,
          imgUrl: 'https://cmt.bdxiaodai.com/cmGzh/img/report_speed_erweima.8acc5583.png',
          success() {
            // alert('点击右上角分享');
          },
          fail() {
            alert('分享失败！');
          },
          complete() {
            // alert('shareFile complete  2');
          },
        });
        wx.onMenuShareTimeline({
          title: `${this.currentUserName}的报告正在生成中，需要您帮加速`,
          link: `${envObject.webUrl}/ReportSpeed?applySerialNo=${userInfo.serialNo}&queryType=${userInfo.queryType}¤tUserName=${userInfo.currentUserName}`,
          imgUrl: 'https://cmt.bdxiaodai.com/cmGzh/img/report_speed_erweima.8acc5583.png',
          success(res) {
            console.log(res);
          },
        });
        wx.onMenuShareAppMessage({
          title: `${this.currentUserName}的报告正在生成中，需要您帮加速`,
          desc: '完成加速拿好礼，不容错过哦',
          link: `${envObject.webUrl}/ReportSpeed?applySerialNo=${userInfo.serialNo}&queryType=${userInfo.queryType}¤tUserName=${userInfo.currentUserName}`,
          imgUrl: 'https://cmt.bdxiaodai.com/cmGzh/img/report_speed_erweima.8acc5583.png',
          type: 'link',
          dataUrl: '',
          success(res) {
            console.log(res);
          },
        });
      },