Vue 微信分享遇到的坑

作者: 想成为大牛的程旭元 | 来源:发表于2021-04-01 16:45 被阅读0次

Vue 微信分享遇到的坑
微信分享
vue 微信支付(hash模式)
vue 微信登录遇到的坑
vue2-微信分享踩的坑
分享pdf文件到微信
2021-05-12
ios 微信分享遇到的坑
H5跳转小程序
Vue-微信分享踩坑

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

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

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

官网拿到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}

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

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

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

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

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

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)

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

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