概述:

微信JS-SDK是微信公眾平臺面向網(wǎng)頁開發(fā)者提供的基于微信內(nèi)的網(wǎng)頁開發(fā)工具包。

通過使用微信JS-SDK，網(wǎng)頁開發(fā)者可借助微信高效地使用拍照、選圖、語音、位置等手機系統(tǒng)的能力，同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁體驗。

?

JSSDK使用步驟:

1.先登錄微信公眾平臺進入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。

備注：登錄后可在“開發(fā)者中心”查看對應(yīng)的接口權(quán)限。

?

?2.引入js文件(必須)

在需要調(diào)用JS接口的頁面引入如下JS文件，http://res.wx.qq.com/open/js/jweixin-1.2.0.js?(推薦使用: https://res.wx.qq.com/open/js/jweixin-1.0.0.js)

備注：支持使用 AMD/CMD 標準模塊加載方法加載.

?

3.通過config接口注入權(quán)限驗證配置

所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調(diào)用（同一個url僅需調(diào)用一次，對于變化url的SPA的web app可在每次url變化時進行調(diào)用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實現(xiàn)web app的頁面會導致簽名失敗，此問題會在Android6.2中修復(fù)）。

window.wx.config({debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。appId: sign.appId, // 必填，公眾號的唯一標識timestamp: sign.timestamp, // 必填，生成簽名的時間戳nonceStr: sign.nonceStr, // 必填，生成簽名的隨機串signature: sign.signature, // 必填，簽名，見附錄1 jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','hideMenuItems','showMenuItems','showAllNonBaseMenuItem','hideAllNonBaseMenuItem','startRecord','stopRecord','onVoiceRecordEnd','uploadVoice','downloadVoice','playVoice','onVoicePlayEnd','pauseVoice','stopVoice','openLocation','getLocation','chooseWXPay','onMenuShareQQ','scanQRCode',], // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2});

注： sign需要請求后臺獲取，jsApiList可根據(jù)實際需求增減。

?

4.通過ready接口處理成功驗證

wx.ready(function(){// config信息驗證后會執(zhí)行ready方法，所有接口調(diào)用都必須在config接口 獲得結(jié)果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對于用戶觸發(fā)時才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。// 微信掃一掃屬于用戶觸發(fā)行為，固不需要放在此處執(zhí)行 });

注：不論config信息驗證是否成功，最終都會執(zhí)行ready方法

?

5.通過error接口處理失敗驗證

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

?

調(diào)用微信接口(以掃一掃為例)

wx.scanQRCode({needResult: 0, // 默認為0，掃描結(jié)果由微信處理，1則直接返回掃描結(jié)果，scanType: ["qrCode","barCode"], // 可以指定掃二維碼還是一維碼，默認二者都有success: function (res) {var result = res.resultStr; // 當needResult 為 1 時，掃碼返回的結(jié)果 } });//如需對掃碼結(jié)果進行處理，可在此方法外層包裹一層函數(shù)，傳入回調(diào)，形如: const scanQRCode = (fn) => {wx.scanQRCode({// 默認為0，掃描結(jié)果由微信處理，1則直接返回掃描結(jié)果needResult: 1,desc: 'scanQRCode desc',success(res) {fn(res.resultStr)},});},

?

介紹就到這里了，如果想了解更多，請參考微信js-sdk說明文檔

?

轉(zhuǎn)載于:https://www.cnblogs.com/AllenR/p/8176599.html

總結(jié)

以上是生活随笔為你收集整理的微信JS-SDK使用步骤(以微信扫一扫为例)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。