微信JS-SDK分享

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

一、 微信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，可能和我只涉及分享而没有了解其余接口有关。

二、 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也能实现，可是这个生成的地址页面在分享以后会显示非微信官方网页，因此不太方便调试。

三、 微信开发者工具（https://mp.weixin.qq.com/wiki...）
按照教程，在地址栏输入你要调试的地址便可。

关于移动调试，须要先把网页打开再点击开始调试。