1.前置條件
- 服務號/訂閱號(企業) -- 通過微信認證
- 可以在微信公眾平台-開發-接口權限查看
2.步驟
-
登陸微信公眾平台-公眾號設置-授權管理-JS接口安全域名
- 設置之后需要分享的域名
-
引入微信提供的js文件
-
通過config接口注入權限驗證配置
- 由后台人員完成
(具體請參考文檔) wx.config({ debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數,可以在pc端打開,參數信息會通過log打出,僅在pc端時才會打印。 appId: '', // 必填,公眾號的唯一標識 timestamp: , // 必填,生成簽名的時間戳 nonceStr: '', // 必填,生成簽名的隨機串 signature: '',// 必填,簽名 jsApiList: [] // 必填,需要使用的JS接口列表 });
- 前端代碼可以塞進script標簽訪問后台接口,得到相應配置再調用
-
通過ready接口處理成功驗證
wx.ready(function(){ // config信息驗證后會執行ready方法,所有接口調用都必須在config接口獲得結果之后,config是一個客戶端的異步操作,所以如果需要在頁面加載時就調用相關接口,則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口,則可以直接調用,不需要放在ready函數中。 });
-
通過error接口處理失敗驗證
wx.error(function(res){ // config信息驗證失敗會執行error函數,如簽名過期導致驗證失敗,具體錯誤信息可以打開config的debug模式查看,也可以在返回的res參數中查看,對於SPA可以在這里更新簽名。 });
3.方法
具體的方法請參照文檔,分享鏈接的域名或路徑必須與當前頁面對應的公眾號JS域名一致!
4.問題解決
- 給后台人員用來生成配置文件的路徑
- 需要是當前路徑,用來生成簽名算法 (window.location.href)
- 需要去掉#后的值,不然會報簽名錯誤 (url.split('#')[0])
- 需要進行編譯(encodeURIComponent)
后台地址+(帶上要簽名的地址)encodeURIComponent(window.location.href.split('#')[0]);
- 后台人員權限需要配置
- jsApiList
以上內容,如有錯誤請指出,不甚感激。
如需轉載,請注明出處