微信公眾號H5頁面調用微信掃一掃功能

微信公眾號H5頁面調用微信掃一掃功能需要通過微信JSSDK（調用其他接口也是一樣的方法），且需要前后端配合，具體步驟如下：

1、獲取appID和AppSecret

從微信公眾號--開發--基本配置中獲取**”開發者ID(AppID)“和”開發者密碼(AppSecret)“**。開發者密碼啟用注意馬上復制保存，這樣以后再用的時候無須再次啟用。

2、獲取微信簽名、隨機串、時間戳

后端拿到appID和AppSecret后去獲取微信公眾號的簽名、隨機串、時間戳。官方文檔中有后端示例代碼：傳送門

后端需寫接口將拿到數據返回前端使用：

需要注意是：確認url是頁面完整的url(請在當前頁面alert(location.href.split('#')[0])確認)，包括'http(s)://'部分，以及'？'后面的GET參數部分,但不包括'#'hash后面的部分。

接口出參：

    appId: "xxxxxxxx"

    nonceStr: "xxxxxxxx"

    signature: "xxxxxxxx"

    timestamp: xxxxxxxx

    url: "https://www.baidu.com/mini-h5/"(舉例)

 

3、添加IP白名單、添加安全域名

在微信公眾號--開發–基本配置中將項目各種環境的IP地址添加為白名單（開發、測試、演示、正式環境）。

在微信公眾號--設置–功能設置中添加項目各種環境的域名（不用帶http:// 或https://）。添加域名前需按照域名添加要求將上面的txt文件放入項目根目錄，並確保可以訪問，可以訪問域名才能添加成功。

4、在項目文件中安裝jssdk的依賴並引入該依賴

安裝依賴：yarn add weixin-js-jdk  或者 npm intall  weixin-js-jdk

引入依賴：import wx from  'weixin-js-jdk'

5、在需要使用微信接口的頁面配置wx.config

從后端拿到簽名、時間戳、隨機串的data后配置到文件中

    wx.config({

        debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來

        appId: data.appid, // 必填，公眾號的唯一標識

        timestamp: data.timestamp, // 必填，生成簽名的時間戳

        nonceStr: data.noncestr, // 必填，生成簽名的隨機串

        signature: data.signature,// 必填，簽名，見附錄1

        jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表，

    });

    /**wx.error可以返回微信config配置是否成功*/

        wx.error(function (res) {

          console.log('res',res);

    });

 

6、調用微信接口

    wx.scanCode({

          success (res) {

                console.log(res)

          }

    })

 

掃描單號返回的res.resultStr格式根據掃描類型不同會不一樣，所以取值的時候要提前console.log看下掃描結果；

比如：條形碼res.resultStr是“CODE_128,1680200805313265”，二維碼是“1680200805313265”， 其中1680200805313265是真實結果。