微信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...）
按照教程，在地址欄輸入你要調試的地址便可。

關於移動調試，須要先把網頁打開再點擊開始調試。