微信硬體JS-Api開發不完全指南

piapia發表於2019-02-16
JSAPI

1.引入JS庫

 <script type=`text/javascript` src=`//res.wx.qq.com/open/js/jweixin-1.0.0.js`></script>

2.為頁面注入配置資訊

wx.config({
    beta: true, // 開啟內測介面呼叫，注入wx.invoke方法,非常重要!!必須有這個
    debug: true,//開啟除錯介面，alert執行結果
    appId: ``,//必填，公眾號的唯一標識,
    timestamp: ``,//必填，生成簽名的時間戳
    nonceStr: ``,//必填，生成簽名的隨機串
    signature: ``,//必填，簽名
    jsApiList: []//要呼叫的js函式，必須把函式名字寫入陣列
});

這裡我的jsApiList為

jsApiList: [
            `openWXDeviceLib`,//初始化裝置庫（只支援藍芽裝置）
            `closeWXDeviceLib`,//關閉裝置庫（只支援藍芽裝置）
            `getWXDeviceInfos`,//獲取裝置資訊（獲取當前使用者已繫結的藍芽裝置列表）
            `sendDataToWXDevice`,//傳送資料給裝置
            `startScanWXDevice`,//掃描裝置（獲取周圍所有的裝置列表，無論繫結還是未被繫結的裝置都會掃描到）
            `stopScanWXDevice`,//停止掃描裝置
            `connectWXDevice`,//連線裝置
            `disconnectWXDevice`,//斷開裝置連線
            `getWXDeviceTicket`,//獲取操作憑證
            `onWXDeviceBindStateChange`,//微信客戶端裝置繫結狀態被改變時觸發此事件
            `onWXDeviceStateChange`,//監聽連線狀態，可以監聽連線中、連線上、連線斷開
            `onReceiveDataFromWXDevice`,//接收到來自裝置的資料時觸發
            `onScanWXDeviceResult`,//掃描到某個裝置時觸發
            `onWXDeviceBluetoothStateChange`,//手機藍芽開啟或關閉時觸發
        ]

如果想要測一下微信版本是不是支援這幾個api，可以這樣寫：

 wx.checkJsApi({
    jsApiList: [`openWXDeviceLib`, `onScanWXDevicesResult`, `getWXDeviceInfos`], // 需要檢測的JS介面列表，所有JS介面列表見附錄2,
    success: function (res) {
        console.log(res);

    }
});

3.初始化裝置庫函式

通過ready介面處理成功驗證

wx.ready(function () {          
    wx.invoke(`openWXDeviceLib`, {connType: `blue`}, function (res) {
        console.debug(`openWXDeviceLib重新開啟裝置庫==>`);
        console.log(res);
    });
})

坑：重新掃描裝置根本什麼都掃不出來，即使是重新整理頁面也不頂用

解決方法：每次掃描前，先呼叫closeWXDeviceLib關閉裝置庫，再呼叫openWXDeviceLib開啟裝置庫。這樣就相當於重新初始化了一遍裝置庫，你現在再重新掃描，就可以掃描到裝置了。

程式碼：


wx.invoke("stopScanWXDevice", {}, function (res) {
    console.debug(`stopScanWXDevice`);
    console.log(res);
 });
wx.invoke("closeWXDeviceLib", {}, function (res) {
    console.debug(`closeWXDeviceLib關閉裝置庫==>`);
    console.log(res);
});

wx.invoke(`openWXDeviceLib`, {connType: `blue`}, function (res) {
    console.debug(`openWXDeviceLib重新開啟裝置庫==>`);
    console.log(res);
});

4.監聽裝置返回的資訊

wx.on(`onReceiveDataFromWXDevice`, function (res) {
    console.warn(`onReceiveDataFromWXDevice=>`);
    console.log(JSON.stringify(res));
});

5.傳送訊息到裝置

收發資料前需進行 base64 的編解碼。
這裡，我用到一個庫：

    <script type=`text/javascript` src=`base64.js`></script>

出處：
https://github.com/dankogai/j…

var data={"deviceId":deviceId,"base64Data": Base64.encode(`你要傳送的資料`)};
console.log(data);
wx.invoke(`sendDataToWXDevice`,data , function(res){
    //回撥
    console.info(`發訊息到裝置sendMsg`);
    console.log(data);
    console.log(res);
    $(`#dataFromDevice`).append(`傳送訊息的結果：`+JSON.stringify(res));
    alert(`已傳送 請檢視控制板`);
});

說明：

1.需要在微信對應裝置號內才能使用對應的api。

2.必須要在裝置號設定的安全域名下才能正常使用api

3.本篇內所有的console.log 等輸出到控制檯 都是用的vconsole除錯工具實現。

相關文章