vue中微信分享总结

在最近的项目中做了微信的分享功能，遇见了一些问题，总结一下方便以后参考查阅(这个项目中运用了TS)。

引入sdk

npm install weixin-js-sdk --save-dev

通过require 或者 import引入

import wx from 'weixin-js-sdk

微信分享中最重要的是获取到签名以便实现微信分享

​
​
      var appId:any = "";
      var nonceStr:any = "";
      var signature:any = "";
      var timestamp:any = 1;
      var jsApiList:any = [];
   //PostData(url,param)自定义post请求封装方法
      PostData(apiList.getShareInfo,{ url:window.location.href.split('#')[0]}).then(res=>{
          this.getWeChatConfig = res;
          appId = this.getWeChatConfig.appId;
          nonceStr = this.getWeChatConfig.nonceStr;
          signature = this.getWeChatConfig.signature;
          timestamp = this.getWeChatConfig.timestamp;
          // jsApiList =  ['onMenuShareTimeline', 'onMenuShareAppMessage'];
          wx.config({//通过config接口注入权限验证配置
              appId:appId,  // 必填，公众号的唯一标识
              timestamp:timestamp,  // 必填，生成签名的时间戳
              nonceStr:nonceStr,  // 必填，生成签名的随机串
              signature: signature, // 必填，签名
              jsApiList:['onMenuShareTimeline', 'onMenuShareAppMessage'], // 必填，需要使用的JS接口列表
          });
          wx.ready(function () {  //通过ready接口处理成功验证
              // config信息验证成功后会执行ready方法
              wx.onMenuShareTimeline({// 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
                  title:"分享标题！", // 分享标题
                  desc: "分享内容",
                  link:  "http://" + document.domain +"/tiaozhuan/index.html",
                  imgUrl: "http://suibian.com/image/2019-02-01/1549010012260b13d75d4fdb0bb29c93a289e85a3083f.jpg", // 分享图标
                  success: function () {
                      // 用户确认分享后执行的回调函数

                  }
              });
              wx.onMenuShareAppMessage({  // 获取“分享给朋友”按钮点击状态及自定义分享内容接口
                  title:"分享标题",
                  desc: "分享内容", // 分享描述 
                  link:  "http://" + document.domain +"/tiaozhuan/index.html",
                  imgUrl: "http://suibian.com/image/2019-02-01/1549010012260b13d75d4fdb0bb29c93a289e85a3083f.jpg", // 分享图标
                  type: 'link', // 分享类型,music、video或link，不填默认为link
                  success: function () {
                      // 用户确认分享后执行的回调函数

                  }
              });
            
          });
      });

​

​

出现问题：ts中appId:res.appId直接赋值无效

解决方案：重新定义一个变量来储存值，将变量赋值给appId

出现问题： 签名为无效签名

解决方案：url:window.location.href.split('#')[0]

出现问题：分享时不显示分享的图片

解决方案：微信分享时图片有大小限制为 30*30 或者 60*60px