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

高洛峰
發布: 2017-02-09 09:28:52
原創
1881 人瀏覽過

1.引入JS庫

 <script type=&#39;text/javascript&#39; src=&#39;//res.wx.qq.com/open/js/jweixin-1.0.0.js&#39;></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',//手机蓝牙打开或关闭时触发
        ]
登入後複製
登入後複製

如果想要測一下微信版本是不是支持這幾個版本是這樣:

 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=&#39;text/javascript&#39; src=&#39;base64.js&#39;></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=&#39;text/javascript&#39; src=&#39;//res.wx.qq.com/open/js/jweixin-1.0.0.js&#39;></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',//手机蓝牙打开或关闭时触发
        ]
登入後複製
登入後複製
這裡不是幾個新版本為點測,可以這樣寫:
 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=&#39;text/javascript&#39; src=&#39;base64.js&#39;></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開發不完全指南相關文章請關注PHP中文網! 🎜🎜🎜
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!