公司最近項目需要使用微信進行分享,對微信的jssdk研究了下,由於研究過程並不順利,遇到的坑比較多,所以特意將研究結果記錄下來,供大家批評和參考!
官方文檔:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
微信的jssdk是面向網頁開發者提供的基於微信內的網頁開發工具包,提供了諸如分享朋友圈,分享微信好友,分享QQ好友 and so on,具體支持的文檔參考上述官方文檔;
在進行微信jssdk開發之前,首先你得擁有一個微信公眾號,並且具有對應功能的權限,注意一定要有對應開發的權限!!!(如下圖所示).另外如果你沒有微信的公眾號或者僅為測試所用,那么可以去申請一個微信測試的賬號(這個給騰訊點贊!).
如果你有了這些基礎,那么就可以開始開發了,開發分為以下五個步驟
第一步:域名配置
- 假如你是自己的微信公眾號請到公眾號設置-功能設置里面設置js接口安全域名;
- 設置安全域名需要遵循以下步驟:一,從配置頁面把驗證文件下載下來放置到要配置的域名的服務器目錄下,確保該文件可以直接訪問,在瀏覽器里面查看下是否可以進行訪問,此處需要注意一定要注意可以訪問,不要因為權限,密碼等原因導致無法訪問;二,在配置頁下面的域名輸入框里面填入需要配置的域名,點擊保存,可見提示保存成功,否則請查找其他原因(一般不會出問題的),只有此處配置的域名下的內容才可以進行分享;
- 如果你是微信測試公眾號,登錄微信測試平台,在JS接口安全域名配置上對應域名就可以了.
第二步:引入js文件
在html頁面中引入js文件,最好引用https版本的js:https://res.wx.qq.com/open/js/jweixin-1.2.0.js
第三步:config接口注入
在進行jssdk接口調用之前,必須在html頁面中進行config接口注入
wx.config({
debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印
appId: '', // 必填，公眾號的唯一標識
timestamp: , // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填，簽名
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表見微信官方文檔
});
appid就不用說了,每個微信公眾號唯一一個;
timestamp和nonceStr由開發者動態生成,一般在服務器端生成;
signature需要使用jsapi_ticket,url,noncestr,timestamp拼接成如下一個字符串,並對如下的求sha1的值,這個值即為signature,其中jsapi_ticket在上述官方文檔中也可以找到;
例如:jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com?params=value
第四步:通過ready接口處理成功驗證
所有內容應該(並不是必須)通過ready接口來進行處理,在該方法內部對需要用到的接口進行處理,我覺得更像是一種注冊綁定;
如分享到朋友圈的接口,link的鏈接的內容一定要在前面配置的安全域名之下的內容,其他內容也不太填敏感信息;
wx.onMenuShareTimeline({
title: '', // 分享標題
link: '', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl: '', // 分享圖標
success: function () {
// 用戶確認分享后執行的回調函數
},
cancel: function () {
// 用戶取消分享后執行的回調函數
}
});
第五步：通過error接口處理失敗驗證
wx.error(function(res){
// config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這里更新簽名。
});
測試的微信信息驗證過程
筆記自己猜測的信息驗證過程:
我們在進行接口配置的時候將我們從服務器拿到的noncestr,timestamp,signature寫到config方法中,config向微信發出異步請求,將我們的配置信息傳遞到服務器,由服務器計算得出一個簽名,和我們傳給服務器的簽名進行對比,當二者相同的時候說明驗證信息無誤,使用此方法保證分享的安全性!
總結
那么說了這么多,你服務器端代碼寫好了,html網頁代碼也寫好了,怎么分享呢?
在微信里面打開你的網頁,在微信的右上角,點擊進入分享,其實也就是微信官方的分享按鈕,只能通過此方法進行分享!!!
下面說一下筆者在開發過程中遇到的錯誤
- Invalid url domain:未在微信公眾號里面配置安全域名,或者安全域名配置錯誤(注意一級域名和二級域名的問題),如果域名不是你親手配置的一定要注意這個問題;
- 若網站端口不是80或者443端口在計算簽名的時候需要對參數url進行端口號處理,需要端口號替換掉,因為微信服務器計算這個簽名的時候是不把端口計算在內的;
- require subscribe錯誤說明你沒有訂閱該測試號，該錯誤僅測試號會出現,邀請好友測試的時候可能會出現這個問題;
- 隨機串和時間戳需要自己實現,計算簽名千萬不要放在瀏覽器端進行,要在服務器端進行;
- 在計算簽名的時候要注意url的參數問題,部分連接是帶有參數的,另外還存在二次分享失敗的問題,此時應該也是參數的問題;
- 如果你使用的是安卓手機(蘋果的檢查比安卓松,蘋果可能沒有問題,但是安卓就不行了),如果你在微信中打開的分享網頁壓根沒有分享按鈕,或者直接白屏打不開(此時應該是整個網站的頁面都是這樣的),恭喜你可以考慮查看網站的證書是否斷鏈等原因;
- 分享不要涉及敏感內容;
- config:ok但是仍然分享不出去的原因之一可能是服務器的端口不是80或者443端口,這種情況下用自己的公眾號是沒有辦法進行分享的,但是用微信提供的測試公眾號是可以的;
工具推薦
在開發過程中可以考慮使用微信官方的微信web開發者工具進行開發調試,里面可以看到jssdk的信息,如果出現config:ok基本上是沒有什么問題了,但是有的時候不要太相信這個結果了,還要到手機環境進行測試的,切記安卓和蘋果都要測試!!!
如果你有任何批評或者疑問,可以在下面進行評論或者向此郵箱發郵件,Email:gebizhuifengren@aliyun.com