Incomplete Guide to WeChat Hardware JS-Api Development-WeChat Development-php.cn

1.Introduce JS library

 <script type=&#39;text/javascript&#39; src=&#39;//res.wx.qq.com/open/js/jweixin-1.0.0.js&#39;></script>

Copy after login

2.Inject configuration information into the page

wx.config({
    beta: true, // 开启内测接口调用，注入wx.invoke方法,非常重要!!必须有这个
    debug: true,//开启调试接口，alert运行结果
    appId: '',//必填，公众号的唯一标识,
    timestamp: '',//必填，生成签名的时间戳
    nonceStr: '',//必填，生成签名的随机串
    signature: '',//必填，签名
    jsApiList: []//要调用的js函数，必须把函数名字写入数组
});

Copy after login

Here my jsApiList is

jsApiList: [
            'openWXDeviceLib',//初始化设备库（只支持蓝牙设备）
            'closeWXDeviceLib',//关闭设备库（只支持蓝牙设备）
            'getWXDeviceInfos',//获取设备信息（获取当前用户已绑定的蓝牙设备列表）
            'sendDataToWXDevice',//发送数据给设备
            'startScanWXDevice',//扫描设备（获取周围所有的设备列表，无论绑定还是未被绑定的设备都会扫描到）
            'stopScanWXDevice',//停止扫描设备
            'connectWXDevice',//连接设备
            'disconnectWXDevice',//断开设备连接
            'getWXDeviceTicket',//获取操作凭证
            'onWXDeviceBindStateChange',//微信客户端设备绑定状态被改变时触发此事件
            'onWXDeviceStateChange',//监听连接状态，可以监听连接中、连接上、连接断开
            'onReceiveDataFromWXDevice',//接收到来自设备的数据时触发
            'onScanWXDeviceResult',//扫描到某个设备时触发
            'onWXDeviceBluetoothStateChange',//手机蓝牙打开或关闭时触发
        ]

Copy after login

If you want to test whether the WeChat version supports these APIs, you can write like this:

 wx.checkJsApi({
    jsApiList: ['openWXDeviceLib', 'onScanWXDevicesResult', 'getWXDeviceInfos'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
    success: function (res) {
        console.log(res);

    }
});

Copy after login

3. Initialize the device library function

Through the ready interface Handling successful verification

wx.ready(function () {          
    wx.invoke('openWXDeviceLib', {connType: 'blue'}, function (res) {
        console.debug('openWXDeviceLib重新打开设备库==>');
        console.log(res);
    });
})

Copy after login

Pitfall: Rescanning the device can’t scan out anything at all, even refreshing the page doesn’t work

Solution: Before each scan, call closeWXDeviceLib Close the device library, and then call openWXDeviceLib to open the device library. This is equivalent to reinitializing the device library. If you scan again now, you can scan the device.

Code:

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);
});

Copy after login

4. Listen to the information returned by the device

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

Copy after login

5.Send a message to the device

Base64 encoding and decoding is required before sending and receiving data.
Here, I use a library:

    <script type=&#39;text/javascript&#39; src=&#39;base64.js&#39;></script>

Copy after login

Source:
//m.sbmmt.com/

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('已发送 请查看控制板');
});

Copy after login

Description:

1. You need to be in the corresponding device number of WeChat to use the corresponding API.

2. The api must be used normally under the secure domain name set by the device number

3. All console.log and other output to the console in this article use the vconsole debugging tool accomplish.

1.Introduce JS library

 <script type=&#39;text/javascript&#39; src=&#39;//res.wx.qq.com/open/js/jweixin-1.0.0.js&#39;></script>

Copy after login

2.Inject configuration information into the page

wx.config({
    beta: true, // 开启内测接口调用，注入wx.invoke方法,非常重要!!必须有这个
    debug: true,//开启调试接口，alert运行结果
    appId: '',//必填，公众号的唯一标识,
    timestamp: '',//必填，生成签名的时间戳
    nonceStr: '',//必填，生成签名的随机串
    signature: '',//必填，签名
    jsApiList: []//要调用的js函数，必须把函数名字写入数组
});

Copy after login

My jsApiList here is

jsApiList: [
            'openWXDeviceLib',//初始化设备库（只支持蓝牙设备）
            'closeWXDeviceLib',//关闭设备库（只支持蓝牙设备）
            'getWXDeviceInfos',//获取设备信息（获取当前用户已绑定的蓝牙设备列表）
            'sendDataToWXDevice',//发送数据给设备
            'startScanWXDevice',//扫描设备（获取周围所有的设备列表，无论绑定还是未被绑定的设备都会扫描到）
            'stopScanWXDevice',//停止扫描设备
            'connectWXDevice',//连接设备
            'disconnectWXDevice',//断开设备连接
            'getWXDeviceTicket',//获取操作凭证
            'onWXDeviceBindStateChange',//微信客户端设备绑定状态被改变时触发此事件
            'onWXDeviceStateChange',//监听连接状态，可以监听连接中、连接上、连接断开
            'onReceiveDataFromWXDevice',//接收到来自设备的数据时触发
            'onScanWXDeviceResult',//扫描到某个设备时触发
            'onWXDeviceBluetoothStateChange',//手机蓝牙打开或关闭时触发
        ]

Copy after login

If you want to test whether the WeChat version supports these apis, you can write like this:

 wx.checkJsApi({
    jsApiList: ['openWXDeviceLib', 'onScanWXDevicesResult', 'getWXDeviceInfos'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
    success: function (res) {
        console.log(res);

    }
});

Copy after login

3. Initialization Device library function

Processes successful verification through ready interface

wx.ready(function () {          
    wx.invoke('openWXDeviceLib', {connType: 'blue'}, function (res) {
        console.debug('openWXDeviceLib重新打开设备库==>');
        console.log(res);
    });
})

Copy after login

Pitfall: Nothing can be found at all by rescanning the device, even refreshing the page is useless

Solution: Before each scan, call closeWXDeviceLib to close the device library, and then call openWXDeviceLib to open the device library. This is equivalent to reinitializing the device library. If you scan again now, you can scan the device.

Code:

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);
});

Copy after login

4. Listen to the information returned by the device

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

Copy after login

5.Send a message to the device

Base64 encoding and decoding is required before sending and receiving data.
Here, I use a library:

    <script type=&#39;text/javascript&#39; src=&#39;base64.js&#39;></script>

Copy after login

Source:
//m.sbmmt.com/

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('已发送 请查看控制板');
});

Copy after login

Description:

1. You need to be in the corresponding device number of WeChat to use the corresponding API.

2. The api must be used normally under the secure domain name set by the device number

3. All console.log and other output to the console in this article use the vconsole debugging tool accomplish.

For more articles related to the Incomplete Guide to WeChat Hardware JS-Api Development, please pay attention to the PHP Chinese website!