JS-SDK微信分享那些事

Jie 2017/9/29

官方技术文档https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115其实已经很清楚了，本文重点说明开发遇到的一些注意事项和tips

硬性要求：
1) 订阅号或服务号+微信认证
2) 域名通过ICP备案的验证
3) 订阅号或服务号的AppID和AppSecret

配置：
1) 微信公众平台 - 公众号设置 - 功能设置 - 【JS接口安全域名】
下载文件MP_verify_xx.txt并上传至域名根目录下；
[Tip 1]注意和微信网页授权中的域名概念不同！设置域名xx.com，则此域名及二级域名下的页面均可配置使用JS-SDK。

开发：
[Tip 2]由于微信限制获取access_token, jsapi_ticket的频率，建议设Redis过期键缓存。
[Tip 3]注意是当前页面的URL（建议location.href.split('#')[0]）参与后端的签名生成，noncestr随机串建议UUID。微信JS接口签名校验工具https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
前端从后端获取config接口所需的配置信息，先注入权限验证配置，ready接口中使用JS接口。
[Tip 4]注意前端引入JS文件的http/https://res.wx.qq.com/open/js/jweixin-xxx.js必须与当前页面的URL的协议（尤其是HTTPS）一致。否则JS报wx undefine错误导致无法自定义分享内容。
注意微信分享必须由用户点击"分享到xx"按钮发起，再回调对应的onMenuShareXx()接口。
[Tip 5]注意不要尝试使用AJAX异步请求修改本次分享的内容，这样做是无效的！动态修改待分享的内容可参考如下实现：

// AJAX异步请求修改分享的内容，重新调用config接口注入权限验证配置WxShare(mtitle, mdesc, mlink, mimgUrl);

function wxShare(mtitle, mdesc, mlink, mimgUrl) {// 从后端获取config接口所需的配置信息wx.config({debug: false,appId: appId,timestamp: timestamp,nonceStr: nonceStr,signature: signature,jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']});wx.ready(function() {// 分享到朋友圈wx.onMenuShareTimeline({title: mtitle,link: mlink,imgUrl: mimgUrl,success: function() {// 分享成功执行此回调函数},cancel: function() {}});// 分享给朋友wx.onMenuShareAppMessage({title: mtitle,desc: mdesc,link: mlink,imgUrl: mimgUrl,trigger: function(res) {// 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回},success: function(res) {// 分享成功执行此回调函数},cancel: function(res) {},fail: function(res) {alert(JSON.stringify(res));}});}}