Vue 微信分享遇到的坑

微信公众号做分享的时候，发现IOS端分享没有效果，把下面参数打开

wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
}

提示的是invalid signature签名无效，解决步骤哦

1. 官网拿到access_token,在这做请求

https请求方式: GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
appid和secret
都是在电脑端配置里拿到的

返回
{"access_token":"ACCESS_TOKEN","expires_in":7200}

2. 拿到上面的access_token之后，附录1-JS-SDK使用权限签名算法在这看一下jsapi_ticket，

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
ACCESS_TOKEN：第一步请求的结果

直接在浏览器里输入，就可以拿到结果

3. 微信 JS 接口签名校验工具
   微信 JS 接口签名校验工具.png
   jsapi_ticket:是第二步拿到的数据
   url：是你分享时，请求接口得到appId、timestamp、nonceStr这些参数带的地址，也就是让微信掉的地址

• 上面得到的结果signature和这个接口返回的signature进行比对，一致就OK。

4. url做优化

• 在这里我上个页面进入分享页面是由this.$router.push({path:'',query:{id:''}})进来的，我刚开始给服务器传的参数是location.href发现苹果端验证签名的时候报invalid signature,安卓端是好的，
• 原因网上大部分都说明了，就不写了，我在这里是区分平台的，下面代码是请求接口获取appId、timestamp、nonceStr这些参数的代码
• IOS端

let url = location.href.split('#')[0];
let shareUrl = encodeURIComponent(url);
然后请求方的是这个shareUrl

• 安卓端

let shareUrl = encodeURIComponent(location.href)

5. 在微信分享的时候url还得做变化

let url = location.href;
wx.updateAppMessageShareData({
    title: '', // 分享标题
    desc:'', // 分享描述
    link: url,// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl:'', // 分享图标，我这里是网络地址
    success: function() {}
});

6. 根据上面的就成功了。

补充资料

encodeURIComponent和encodeURI区别
encodeURIComponent和encodeURI区别

感谢大牛的分享
https://www.jianshu.com/p/22a5ee77b5e0
https://www.jianshu.com/p/41140244b4a6
https://www.yht7.com/news/61021