微信硬件JS-Api开发不完全指南

广告:宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

微信硬件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开发不完全指南相关文章请关注PHP中文网!

广告:SSL证书一年128.66元起,点击购买~~~

9543建站博客
一个专注于网站开发、微信开发的技术类纯净博客。
作者头像
admin创始人

肥猫,知名SEO博客站长,14年SEO经验。

上一篇:微信小程序开发-创建欢迎页面
下一篇:巧用CSS实现鼠标跟随 3D 旋转效果,让交互更加生动!

发表评论

关闭广告
关闭广告