微信硬件JS-Api開發的示例分析

這篇文章主要為大家展示了“微信硬件JS-Api開發的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“微信硬件JS-Api開發的示例分析”這篇文章吧。

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>

出處：
http://www.php.cn/

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調試工具實現。

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>

出處：
http://www.php.cn/

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調試工具實現。

以上是“微信硬件JS-Api開發的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！