微信IOT与airkiss3的wifi硬件操作实践

最近接触微信硬件平台开发,然后微信扫描连接wifi设备的开发流程只是很简单的,无奈文档实在不多,下面我写一下详细的成功的开发流程。

硬件准备

1台安卓机,1台装有微信的手机(安卓或者ios)

模拟设备制作

假如我们手头上没有wifi硬件设备,我们可以拿一台安卓机来模拟wifi硬件设备,当然要下载一个软件,链接是: http://iot.weixin.qq.com/wiki/doc/sdk/Airkiss3.0SDKforandroid20160113_165358.zip

当然这个安装包里面的apk不要直接安装,因为没法直接用来调试,下面会说如何修改源码编译出可用的app。

申请一个测试号

你要使用微信硬件平台,当然先申请一个测试号来玩玩先啦。地址是https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

然后开通设备权限: 开通设备权限

然后在设置页面添加一个产品,关键在于要选择wifi配网

添加硬件产品

关键在于获取一个productid

获取id

设备授权

还记得我们要用一台安卓机来模拟设备吧,每一台设备都需要在微信管理后台授权,然后才会被扫描到,所以为什么网上经常看到onScanWXDeviceResult事件没有触发,没有扫描到硬件这种问题,其实大部分原因都在于没有在测试号配置硬件。

怎么授权呢?其实就是要调用微信的api,但是我比较懒,所以我直接用微信提供的调试工具授权算了。地址是:https://mp.weixin.qq.com/debug

第一步获取access_token

获取access_token

第二步,生成一个deviceid

access_token是第一步获取的token加上&product_id=37823,37823换成你自己添加产品时获取到的产品id

同时,qrticket字段对应的是设备二维码地址,只有扫描这个二维码绑定了设备的微信才能扫描出该硬件。

生成一个deviceid

第三步,deviceid与真实机器绑定(通过mac地址) deviceid与真实机器绑定

{
    "device_num": "1", 
    "device_list": [
        {
            "id": "gh_d7b97d84bc42_eb575976576833f2", 
            "mac": "a086c****3e5", 
            "connect_protocol": "3", 
            "auth_key": "", 
            "close_strategy": "1", 
            "conn_strategy": "1", 
            "crypt_method": "0", 
            "auth_ver": "0", 
            "manu_mac_pos": "-1", 
            "ser_mac_pos": "-2"
        }
    ], 
    "op_type": "1", 
    "product_id": "37823"
}

product_id改成自己的产品id,id改成第二部获取的deviceid,mac地址是你手机的wifi地址,注意除去:号。

配置模拟设备

刚才说到,我们要下载一个软件来模拟硬件设备,但是又不能直接用。我们要修改\HelloJni\src\com\example\hellojni\HelloJni.java的71和72行。把这两行替换成我们调用绑定真实机器获取到的deviceType和deviceId

修改源码

然后重新编译,注意要选择amd平台编译,不然会报错。(在此感谢顺明同学帮我编译代码)

然后在手机安装这个apk即可,注意手机是授权设备时候mac对应的手机。

编写前端代码

<!DOCTYPE html>  
<html>  
    <head>
        <meta charset="UTF-8">
        <title>iot demo</title>
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    </head>
    <body>

        <button onclick="scan();">扫描</button>
        <button onclick="test1();">配网</button>


        <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
        <script>

            function test1(){
                wx.invoke("configWXDeviceWiFi", function(){});
            }

            function connectDev(deviceId){
                wx.invoke('connectWXDevice', {'deviceId':deviceId, 'connType':'lan'}, function(res) {
                    alert(JSON.stringify(res));
                });
                wx.invoke('getWXDeviceInfos', {'connType':'lan'}, function(res) {
                    alert(JSON.stringify(res));
                });
                wx.invoke('sendDataToWXDevice', {'deviceId':deviceId, 'connType':'lan', 'base64Data':'aGVsbG93b3JsZA=='}, function(res) {
                    alert(JSON.stringify(res));
                });
            }

            function scan(){
                wx.invoke('startScanWXDevice', {'connType':'lan'}, function(res) {
                    alert(JSON.stringify(res));
                });
            }

            function initLib(){
                wx.invoke('openWXDeviceLib', {'connType':'lan', "brandUserName": "gh_d7b97d84bc42"}, function(res) {
                    alert(JSON.stringify(res));
                });
                wx.on("onScanWXDeviceResult", function(res){
                    alert(JSON.stringify(res));
                    connectDev(res.devices[0].deviceId);
                });
            }

            wx.config({
                beta: true,
                debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

                appId: '', // 必填,公众号的唯一标识

                timestamp: , // 必填,生成签名的时间戳

                nonceStr: '', // 必填,生成签名的随机串

                signature: '',// 必填,签名,见附录1

                jsApiList: [
                    'openWXDeviceLib', 'onScanWXDeviceResult', 'startScanWXDevice', 'connectWXDevice', 'getWXDeviceInfos', 'sendDataToWXDevice', 'configWXDeviceWiFi'
                ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2

            });
            wx.ready(function(){
                initLib();
            });
        </script>
    </body>
</html>  

这个代码需要注意的是,wx.config要提供参数beta,值为true

其余的也没有什么特别处理的东西。

整个流程就是这样子,其实很简单,只要记得授权和绑定设备,并且记得必须在测试号内打开,否则是扫描不到硬件的。