微信JS-SDK分享

最近做的移动端网页分享到群里或者朋友圈时发现显示的标题是公众的名称，而且描述显示的是链接，图片是一张带链接图标的灰色背景图片，不好看，所以想自定义标题、描述和图片。本来是直接在页面<title></title>里写的，发现不行，后来知道微信发了新规JSSDK自定义分享接口的策略调整，所以只能调用微信的JS-SDK来实现这个需求。

1、微信JS-SDK说明文档（https://mp.weixin.qq.com/wiki...）
既然要用这个，就要好好看文档。文档写得其实很详细，按照步骤就可以了，下面主要讲一些细节和调试问题，现在微信调试都需要和JS接口安全域名一样，而本地测试环境没有域名，所以自己申请了公共平台测试账号。

图片描述

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

appID就是wx.config中的appId，appID和appsecret是给后台生成签名用的，在附录1-JS-SDK使用权限签名算法中有讲解具体实现方法（采用http GET方式）：
(1) 获取access_token（https://mp.weixin.qq.com/wiki...）
(2) 获取jsapi_ticket（https://api.weixin.qq.com/cgi...）
(3) 签名算法（微信 JS接口签名校验工具（https://mp.weixin.qq.com/debu...））
关于附录5-常见错误及解决方法invalid signature签名错误的第6条写法，因为用来获取签名的url是通过window.location.href传给后台的，所以就是动态的。页面分享出去，微信客户端确实会在你的链接末尾加入其它参数：
(1) ?from=singlemessage&isappinstalled=0 （发送给朋友）
(2) ?from=timeline&isappinstalled=0 （分享到朋友圈）
(3) ?from=groupmessage&isappinstalled=0 （发送到微信群）
因为加入的其他参数里没有"#"符号，本人不太明白为什么要用location.href.split('#')[0]获取,而且需要encodeURIComponent，可能和我只涉及分享而没有了解其他接口有关。

2、 ngrok
用到这个主要是为了调试，前面说了现在微信调试域名都需要和JS接口安全域名一样，需要用ngrok映射本地外网。
(1) 下载ngrok（https://ngrok.com/download），解压，双击ngrok.exe或进入ngrok.exe目录下
(2) 输入 ngrok http 端口号（因为我要用的端口是8820，所以ngrok http 8820），回车

图片描述

(3) 弹出一个新的用户界面，Forwarding的地址（两个选择一个）就是你的本地地址:端口号，按照JS安全域名的格式要求修改公共平台测试账号的域名，由于这个地址是随机，所以调试时如果这个地址变了（一般重启才会变）公共平台测试账号的域名也要修改。

图片描述

(4) 一些调试信息可以在http://localhost:4040看。
(5) 注册ngrok的账号后，会获取到authtoken，可以先输入ngrok authtoken <YOUR_AUTHTOKEN>，再输入ngrok http 端口号
(6) 目前只有付费的ngrok才能固定自定义域名，这个因为是国外所以速度比较慢。国内的一款natapp想要能够微信开发也要付费。还有一个Sunny-Ngrok也能实现，但是这个生成的地址页面在分享之后会显示非微信官方网页，所以不太方便调试。

图片描述