微信公衆號開發之js-sdk開發

公司最近項目須要使用微信進行分享,對微信的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&timestamp=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網頁代碼也寫好了,怎麼分享呢?

在微信裏面打開你的網頁,在微信的右上角,點擊進入分享,其實也就是微信官方的分享按鈕,只能經過此方法進行分享!!!

下面說一下筆者在開發過程當中遇到的錯誤

1. Invalid url domain:未在微信公衆號裏面配置安全域名,或者安全域名配置錯誤(注意一級域名和二級域名的問題),若是域名不是你親手配置的必定要注意這個問題;
2. 若網站端口不是80或者443端口在計算簽名的時候須要對參數url進行端口號處理,須要端口號替換掉,由於微信服務器計算這個簽名的時候是不把端口計算在內的;
3. require subscribe錯誤說明你沒有訂閱該測試號，該錯誤僅測試號會出現,邀請好友測試的時候可能會出現這個問題;
4. 隨機串和時間戳須要本身實現,計算簽名千萬不要放在瀏覽器端進行,要在服務器端進行;
5. 在計算簽名的時候要注意url的參數問題,部分鏈接是帶有參數的,另外還存在二次分享失敗的問題,此時應該也是參數的問題;
6. 若是你使用的是安卓手機(蘋果的檢查比安卓鬆,蘋果可能沒有問題,可是安卓就不行了),若是你在微信中打開的分享網頁壓根沒有分享按鈕,或者直接白屏打不開(此時應該是整個網站的頁面都是這樣的),恭喜你能夠考慮查看網站的證書是否斷鏈等緣由;
7. 分享不要涉及敏感內容;
8. config:ok可是仍然分享不出去的緣由之一多是服務器的端口不是80或者443端口,這種狀況下用本身的公衆號是沒有辦法進行分享的,可是用微信提供的測試公衆號是能夠的;

工具推薦

在開發過程當中能夠考慮使用微信官方的微信web開發者工具進行開發調試,裏面能夠看到jssdk的信息,若是出現config:ok基本上是沒有什麼問題了,可是有的時候不要太相信這個結果了,還要到手機環境進行測試的,切記安卓和蘋果都要測試!!!

若是你有任何批評或者疑問,能夠在下面進行評論或者向此郵箱發郵件,Email:gebizhuifengren@aliyun.com