一、概述

微信JS-SDK是微信公眾平臺面向網頁開發者提供的基于微信內的網頁開發工具包。例如我們網頁中希望實現掃一掃、獲取本地相冊、位置信息、分享功能等，都可以使用JS-SDK來實現。

二、JS-SDK使用步驟

我們可以通過下面五步來使用JS-SDK。

綁定域名：在第02節：微信登錄中我們已經介紹了，需要在公眾號的設置中，綁定【JS接口安全域名】。

引入js文件?http://res.wx.qq.com/open/js/jweixin-1.4.0.js

通過config接口注入權限驗證配置，代碼如下所示，這里需要說明一下，生成JS-SDK的簽名需要用到jsapi_ticket。而獲取jsapi_ticket需要先獲取access_token。具體獲取方法可以參照本節下一部分內容。

1 wx.config({ 2 debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。 3 appId: '', // 必填，公眾號的唯一標識 4 timestamp: , // 必填，生成簽名的時間戳 5 nonceStr: '', // 必填，生成簽名的隨機串 6 signature: '',// 必填，簽名，上一節已經講解了獲取簽名的方法 7 jsApiList: [] // 必填，需要使用的JS接口列表 8 });

通過ready接口處理成功驗證

1 wx.ready(function(){ 2 // config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對于用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。 3 });

通過error接口處理失敗驗證

wx.error(function(res){// config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對于SPA可以在這里更新簽名。 });

三、實際案例

下面通過一個分微信享功能的示例代碼展示如何使用JS-SDK。

獲取access_token

通過appid和secret兩個參數，調用下面接口可以獲取到access_token。獲取到access_token我們才能進一步調用其他接口，但是access_token兩個小時刷新一次，所以為了防止access_token失效，建議將access_token自行存儲在服務器中，并且每兩個小時重新獲取一次。

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=SECRET

獲取jsapi_ticket

拿到access_token之后，可以在進一步獲取jsapi_ticket，接口如下所示

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

配置簽名需要的參數

1 //時間戳2 const timestamp = Math.floor(new Date().getTime() / 1000); 3 //隨機字符串4 const nonceStr = Math.random().toString(36).substr(2, 15);5 //jsapi_ticket6 const jsapi_ticket; //通過上述接口獲取7 //當前頁面的url8 const url;9 //拼接成參數對象 10 const params = { 11 jsapi_ticket, 12 timestamp, 13 noncestr, 14 url 15 } 16 //利用上一節的簽名算法生成簽名 17 const signature = getSign(params)

權限驗證配置

以上代程序由服務器端完成，通過以上程序，我們已經得到了時間戳、加密字符串，還有簽名，然后再前端的頁面中引入JS-SDK的js文件，地址如下所示

http://res.wx.qq.com/open/js/jweixin-1.4.0.js

引入完成之后，進入JS-SDK的配置環節。

1 wx.config({2 debug: false, 3 appId: '{{appid}}', 4 timestamp: Number('{{timestamp}}'), 5 nonceStr: '{{nonceStr}}', 6 signature: '{{signature}}', 7 jsApiList: [8 "updateAppMessageShareData",9 "updateTimelineShareData" 10 ] 11 });

jsApiList中加入的是兩個分享功能的接口，配置完成之后，調用接口即可，代碼如下所示。

1 wx.ready(function () {2 wx.updateAppMessageShareData({3 title: title, // 分享標題4 desc: desc, // 分享描述5 link: requer_url, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致6 imgUrl: imgUrl, // 分享圖標7 success: function () {8 9 } 10 }); 11 wx.updateTimelineShareData({ 12 title: title, 13 desc: desc, 14 link: requer_url, 15 imgUrl: imgUrl, 16 success: function () { 17 18 } 19 }); 20 });

?

通過上面的設置，我們在此網頁中就可以是實現微信分享功能了。

?

【融職教育】在工作中學習，在學習中工作

總結

以上是生活随笔為你收集整理的【融职培训】Web前端学习 第11章 微信开发4 JS-SDK接口的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。