这篇日志，主要记录我工作中遇到的问题。为未接触过的人踩坑！
功能需求：
点击右上角分享给朋友、分享到朋友圈，当被分享人点击之后，就自动鉴权。（自动鉴权通过后端实现的，但是我觉得也可以通过前端调用官方API进行鉴权请求）
开发环境：
uniapp、vue
安装：
在 uniapp 中可以使用模块方式引用微信 js-sdk ，微信官网直接下载的使用有问题，可以使用 jweixin-module。
- NPM安装方式（不会用NPM就不要用这种方式）
npm install jweixin-module --save
- 下载使用方式（传统引用方式）
下载地址：https://unpkg.com/[email protected]/lib/index.js
- 官方完整API
微信官方JSSDK说明文档
配置JS安全域名
这里需要登录公众号后台–公众号设置–功能设置 即可看到可以配置JS安全域名。
同时也要到基本配置中为该域名的IP加到白名单。
使用：
NPM：
// weixinModule.js
var jweixin = require('jweixin-module')
function WXConfig(_this){
//这个URL 路径中不可以带有hash值 即不能又 #后面的的内容（包含#）
//这里使用到了encodeURIComponent() 下文中会说明原因为什么要使用它
let URL = window.encodeURIComponent(location.href.split('#')[0])
_this.$reqHttp({
url:"/setWxConfig",
data:{
url: URL //我这里将当前页面的URL传给后端进行签名
},
success:(res) => {
jweixin.config({
//这里是个函数，非对象
debug: true, // 调试，发布的时候改为false
appId: res.data.appid,//后端接口获取
nonceStr: res.data.noncestr,//后端接口获取
timestamp: res.data.timestamp,//后端接口获取
signature: res.data.signature,//后端接口获取
jsApiList: [ // 可能需要用到的能力 需要啥就写啥。多写也没有坏处
'updateAppMessageShareData',
'updateTimelineShareData',
]
})
jweixin.ready(function(){
// 分享给朋友
jweixin.updateAppMessageShareData({
title: '快看！这里有个帅哥', // 分享标题
desc: '你看我帅不帅', // 分享描述
// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
link: 'http://你的域名/index?inviteCode=2222',//这里可带参数，必须是同配置的JS安全域名一致
imgUrl:'http://你的域名/images/shuai.png',// 必须是同配置的JS安全域名一致
success: function () {
}
})
})
}
})
}
export default {
WXConfig
}
注意：
imgUrl为空的话，IOS手机提示不能为空，安卓机可以分享。建议不为空扫描二维码关注公众号，回复： 17238898 查看本文章
//index.vue
<script>
import weixinModule from "./weixinModule.js"
onLoad(){
weixinModule.WXConfig(this)
}
</script>
引用方式
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
//其它的代码与上面基本一样
常见错误及原因
invalid signature签名错误。建议按如下顺序检查：
1.确认签名算法正确，可用官方工具进行校验。（http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign）
2.确认config中nonceStr（js中驼峰标准大写S）, timestamp与用以签名中的对应noncestr, timestamp一致。
3.确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认)，包括'http(s)://'部分，以及’？'后面的GET参数部分,但不包括'#'hash后面的部分。
4.确认 config中的 appid与用来获取jsapi_ticket的 appid一致。
5.确保一定缓存access_token和jsapi_ticket。(token已缓存再请求中，ticket我是请视情况而定)
6.确保你获取用来签名的url是动态获取的，如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去'#'hash部分的链接（可用location.href.split('#')[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。
更多错误参考：
https://blog.csdn.net/weixin_39706415/article/details/89138183
