微信 JSSDK 教程以及在Vue中实战教程

Hi，很高兴认识你~

世界很大，巧妙的是我们在这里相遇。

欢迎关注天宇文创意乐派，一个职场人的聚集地。

一.官方教程

官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

官方文档——常见的错误及解决方法：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html     ——>  见页面底端的 附录5-常见错误及解决方法

官方问题反馈：https://developers.weixin.qq.com/community/develop/doc/0000e2f5d0cdc02c0a391aedd58c00

官方校验签名工具：http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

官方demo：https://www.weixinsxy.com/jssdk/

二.常见问题以及需要注意的地方

1. 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。    6. 确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去'#'hash部分的链接（可用location.href.split('#')[0]获取,而且需要encodeURIComponent，后端接收url时且必须用例如：Java URLDecoder.decode解码），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。2.invalid domain?    配置的url与公众号JS接口安全域名不匹配

三.绑定JS接口安全域名

域名格式：如果你的项目域名是http://test.domain.com,那么JS接口安全域名为test.domain.com。切记！

四.引入JSSDK

第一种引入方式：

npm install jweixin-module --save

第二种引入方式：

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）