微信硬件蓝牙开发指南

Myth丶恋晨 2022-08-23 08:51 418阅读 0赞

几个基本要用的东西：  
1、微信公众平台  
网址：[https://mp.weixin.qq.com][https_mp.weixin.qq.com]  
可以在此申请微信公众号，获取微信测试号。  
微信测试号拥有所有功能权限，如果你有正式的企业服务号，就不必用测试号了。

2、微信JS-SDK说明文档  
网址：[http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html][http_mp.weixin.qq.com_wiki_7_aaa137b55fb2e0456bf8dd9148dd613f.html]  
到时候会引入一个JS文件，是用来调用微信提供的那些接口的

3、微信硬件平台说明文档  
网址（新版）：[http://iot.weixin.qq.com/wiki/new/index.html][http_iot.weixin.qq.com_wiki_new_index.html]  
网址（旧版）：[http://iot.weixin.qq.com/wiki/index.html][http_iot.weixin.qq.com_wiki_index.html]  
新版和旧版唯一的区别是，新版没有JS硬件API的说明页（但可以在下载中心自己下载）  
开始开发

1、首先，自己到微信公众平台申请一个微信公众号，就选个人订阅号。  
2、登录你的公众号，进入公众平台管理页，左边最下面有个“开发者工具”。  
3、点“开发者工具”，进去后找到“公众平台测试帐号”，自己按照步骤申请开通一个。  
4、进入测试号管理页面，就会得到：  
原始ID：gh\_xxxxxxxxxx (右上角显示的，这个是微信原始ID，不是微信号）  
**（坑：微信原始ID 和 微信帐号不是同一个，微信帐号在之后都不会用到，用到的是原始ID）**  
appID:wxxxxxxxxxxxx (appID)  
appsecret:xxxxxxxxxxxxxx (密钥)  
5、测试号管理页面，下面找到“JS接口安全域名”，要配置成你们自己的服务器域名，后面有些微信API会返回数据，它会去匹配这个域名，如果不是指定的域名，会报错。  
6、继续往下看，下面有个“体验接口权限表”，在里面找到“设备功能”，开通它  
7、开通设备功能后，点右边的“设置”，进入设备功能页面  
8、自己”添加产品”,随便搞，连接类型勾选”蓝牙”即可（添加完成后，该产品有个产品编号，后面设备授权时有用）

======= 以上是公众平台的配置，下面开始写前端代码 ======  
1、新建HTML，基本结构写好。  
2、引入”[http://res.wx.qq.com/open/js/jweixin-1.0.0.js][http_res.wx.qq.com_open_js_jweixin-1.0.0.js]“，这个JS

3、写方法：

<code class="hljs d">wx.config({
        beta:true,                  //坑：这个很重要，必须配置这个为true,才能调用微信的硬件API
        debug: false,               //是否开启调试模式，会自动弹一些消息框显示微信返回的数据
        appId: 这里填写appID,        //让后台返回appid
        timestamp: 时间戳,          //让后台返回生成证书时用的时间戳
        nonceStr: 随机字符串,        //让后台返回生成证书时用的随机串
        signature: 证书,            //让后台返回已当前URL地址生成的证书
        jsApiList: [                //需要调用的接口，都得在这里面写一遍
            "openWXDeviceLib",//初始化设备库（只支持蓝牙设备）
            "closeWXDeviceLib",//关闭设备库（只支持蓝牙设备）
            "getWXDeviceInfos",//获取设备信息（获取当前用户已绑定的蓝牙设备列表）
            "sendDataToWXDevice",//发送数据给设备
            "startScanWXDevice",//扫描设备（获取周围所有的设备列表，无论绑定还是未被绑定的设备都会扫描到）
            "stopScanWXDevice",//停止扫描设备
            "connectWXDevice",//连接设备
            "disconnectWXDevice",//断开设备连接
            "getWXDeviceTicket",//获取操作凭证
     
            //下面是监听事件：
            "onWXDeviceBindStateChange",//微信客户端设备绑定状态被改变时触发此事件
            "onWXDeviceStateChange",//监听连接状态，可以监听连接中、连接上、连接断开
            "onReceiveDataFromWXDevice",//接收到来自设备的数据时触发
            "onScanWXDeviceResult",//扫描到某个设备时触发
            "onWXDeviceBluetoothStateChange",//手机蓝牙打开或关闭时触发
        ]
    });</code>

上面这个方法，在进入页面时应该首先被调用，这是初始化微信JS-SDK  
其中：  
beta 这个参数需设为true，才能调用那些微信还没有正式开放的新接口  
appID,timestamp,nonceStr,signature这几个由后台传递到前端。  
生成证书的方法JS-SDK文档中有，此处暂时省略

4:继续写方法

<code class="hljs javascript">wx.ready(function(){
        //初始化设备库 需填写参数 公众号的原始ID
        wx.invoke('openWXDeviceLib', {'brandUserName':'gh_xxxxxxxxxx'}, function(res){
            //自己把res输出来看一下吧，里面包括了是否初始化成功，当前手机的蓝牙状态等信息
            //这里有个坑，当时研究了好久，跟论坛里的人讨论了半天，就是IOS下正常，
            //安卓下，请带上这个参数：brandUserName:后面是你公众号的原始ID。不然会初始化失败
            //正式的公众号，也有原始ID，是gh_开头的那个，进入公众号，自己找一下吧，有的
            //测试号，就用测试号管理页面右上角的那个gh_开头的那一串数字
        });
     
            //手机蓝牙状态改变时触发 （这是监听事件的调用方法，注意，监听事件都没有参数）
            wx.on('onWXDeviceBluetoothStateChange',function(res){
                    //把res输出来看吧
            });
     
            //设备绑定状态改变事件（解绑成功，绑定成功的瞬间，会触发）
            wx.on('onWXDeviceBindStateChange',function(res){
                    //把res输出来看吧
            });
     
            //设备连接状态改变
            wx.on('onWXDeviceStateChange',function(res){
                //有3个状态：connecting连接中,connected已连接,unconnected未连接
                //每当手机和设备之间的状态改变的瞬间，会触发一次
            });
     
            //接收到设备传来的数据
            wx.on('onReceiveDataFromWXDevice',function(res){
                    //接收到的原始数据：JSON.stringify(res)
                    //自己去百度下载一个jbase64.js,可以对字符串进行base64编码解码
                    //这里就是用的jbase64.js对原始数据进行解码
                    var unicode= BASE64.decoder(res.base64Data);
                    var str = '';  
                    for(var i = 0 , len =  unicode.length ; i < len ;++i){  
                             str += String.fromCharCode(unicode[i]);  
                    }
                    //解码后的数据：str
                    //坑：你们测试的时候，不要在这里用alert(),页面会卡死。自己把信息输出到页面中查看吧
                    //不要在这里alert出来
                });
            });</code>

5、继续写方法：

<code class="hljs javascript">wx.error(function(res){
        alert("wx.error错误："+JSON.stringify(res));
        //如果初始化出错了会调用此方法，没什么特别要注意的
    });</code>

6、扫描设备：  
（我做的那个项目，是通过手机扫描附近的设备，得到设备的deviceid,然后进行绑定，不是用户扫描二维码进行绑定，所以这里介绍扫描设备的过程）

<code class="hljs javascript">//扫描前请先监听设备扫描事件
    wx.on('onScanWXDeviceResult',function(res){
        alert("扫描到1个设备");
        //自己解析一下res，里面会有deviceid,扫描设备的目的就是为了得到这个
        //然后就可以开始绑定了
    }
     
    //开始扫描
    wx.invoke("startScanWXDevice",{"btVersion":"ble"},function(res){});
    //这里填的参数是ble,也可以填bc，bc是经典蓝牙，我们做的这个设备不支持经典蓝牙，所以直接填ble
    //安卓系统不能同时支持bel和bc，这个后面详细说一下
    //执行此方法后，就开始一直不停的扫描，扫描到了设备会触发上面的监听事件
     
    //如果不想扫了，可以停止扫描
    wx.invoke("stopScanWXDevice",{},function(res){});</code>

7、绑定和解除绑定

<code class="hljs r">//用户绑定设备
    //1、先获取操作凭证（type为1表示绑定，2表示解除绑定）
    wx.invoke('getWXDeviceTicket',{"deviceId":"填写设备的deviceID","type":1},function(res){
        if(res.err_msg !="getWXDeviceTicket:ok"){
                alert("获取操作凭证失败，请重试");  
                return;
        }else{
            //2.将deviceID和操作凭证通过ajax传给后台 进行绑定   
            //后台应该是有当前用户的openId的，其实前端也可以获取到，但比较麻烦
            //我们这边的做法是，后台在数据库里保存了用户的openId,每次要用直接从数据库拿
            //就不用每次还去调微信的接口拿，太麻烦了
            //...此处ajax代码略      
        }
    });
     
    //用户解除绑定
    //与上面的方法基本相同，只有type参数不同
    wx.invoke('getWXDeviceTicket',{"deviceId":"填写设备的deviceID","type":2},function(res){
        if(res.err_msg !="getWXDeviceTicket:ok"){
                alert("获取操作凭证失败，请重试");  
                return;
        }else{
            //2.将deviceID和操作凭证通过ajax传给后台 进行绑定   
            ...代码略      
        }
    });</code>

8、向设备发送数据

<code class="hljs javascript">wx.invoke('sendDataToWXDevice', {'deviceId':dev,"base64Data":BASE64.encoder(str)}, function(res){
        if(res.err_msg !="sendDataToWXDevice:ok"){
                alert("数据已发送");
        }else{
                alert("数据发送失败");
        }
    });
    //发送的数据需要经过base64编码</code>

以上是前端页面中，基本就这些代码  
当用户绑定了设备后，微信会不停的尝试连接设备，所以其实不用程序员写代码去连接设备。

下面来说一下遇到的各种坑：（上面内容中提到的就不说了）  
1、开发流程：  
①、硬件厂商，他们只要得到了设备的mac地址，就可以开始授权了（好像只要有蓝牙板子，就有mac地址了）。  
②、然后再开始生产设备  
③、然后才卖给用户  
④、用户关注公众号，扫描设备（如果用的二维码方式，那就是扫二维码。我们没有用二维码那种方式）  
⑤、用户绑定设备  
⑥、微信自动连接设备  
⑦、连接上后，就可以收发数据了

2、关于授权：  
我们用的授权新接口，即不需要厂商提供deviceid,由微信分配deviceid  
然后是授权时的那些参数：  
product\_id：就是你之前“添加设备”后，就会得到那个编号  
connect\_protocol：连接协议  
只能填3，或者只能填1.你别弄成：3|1，  
下面写了，**安卓设备不能同时支持ble和经典蓝牙**  
IOS一切正常，但是填成3|1，你就发现安卓的ble蓝牙调用“getWXDeviceInfos”（获取设备信息），获取不到！  
如果用户的手机是经典蓝牙，你就写一个[html][]页面，搞个按钮叫“刷成经典蓝牙”，用户可以自己去更新设备属性（就是授权那个地方，不是可以更新设备属性吗，让你们后台工程师写个接口，用户可以自己去把connect\_protocol刷成1）

3、[IOS][]连接设备很快很稳定，安卓连不上设备，显示“已连接0个设备”：  
在微信硬件平台的文档里面的某个地方，有一句话，说安卓设备要先订阅个什么东西，订阅上了，这个时候再连接就OK，因为设备只发了一次Auth和Init包，如果错过这个时机，就错过了…就再也连不上了，除非设备断电重启。  
但IOS估计是订阅那个什么东西非常快，不会过期，所以一下就连上了。

那句话具体在什么地方，我真的找不到了，微信太坑了。  
而且目前我们也没有特别好的解决方法，如果之后有好的解决方法，我再来更新。

4、关于设备向手机发数据：  
设备发的数据，里面有两个值，一个代表包括包头包尾的总长度，一个代表除去包头包尾的长度，必须与所发数据的实际情况相对应，HTML页面中才能接收到。否则不报错，但也接收不到。

5、继续补充中

[https_mp.weixin.qq.com]: https://mp.weixin.qq.com/
[http_mp.weixin.qq.com_wiki_7_aaa137b55fb2e0456bf8dd9148dd613f.html]: http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
[http_iot.weixin.qq.com_wiki_new_index.html]: http://iot.weixin.qq.com/wiki/new/index.html
[http_iot.weixin.qq.com_wiki_index.html]: http://iot.weixin.qq.com/wiki/index.html
[http_res.wx.qq.com_open_js_jweixin-1.0.0.js]: http://res.wx.qq.com/open/js/jweixin-1.0.0.js
[html]: http://www.2cto.com/kf/qianduan/css/
[IOS]: http://www.2cto.com/kf/yidong/iphone/