微信硬件蓝牙开发各种坑不完全开发指南

写于：2016-4-15

几个基本要用的东西：
1、微信公众平台
网址：https://mp.weixin.qq.com
申请微信公众号，获取微信测试号。

2、微信JS-SDK说明文档
网址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

3、微信硬件平台说明文档
网址（新版）：http://iot.weixin.qq.com/wiki/new/index.html
网址（旧版）：http://iot.weixin.qq.com/wiki/index.html

– 开始开发 –

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“，这个JS
3、写JS代码：

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

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

4、继续写方法：

<code class="hljs javascript has-numbering">wx.ready(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>    <span class="hljs-comment">//初始化设备库 需填写参数 公众号的原始ID</span>    wx.invoke(<span class="hljs-string">'openWXDeviceLib'</span>, {<span class="hljs-string">'brandUserName'</span>:<span class="hljs-string">'gh_xxxxxxxxxx'</span>}, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(res)</span>{</span>        <span class="hljs-comment">//自己把res输出来看一下吧，里面包括了是否初始化成功，当前手机的蓝牙状态等信息</span>        <span class="hljs-comment">//这里有个坑，当时研究了好久，跟论坛里的人讨论了半天，就是IOS下正常，</span>        <span class="hljs-comment">//安卓下，请带上这个参数：brandUserName:后面是你公众号的原始ID。不然会初始化失败</span>        <span class="hljs-comment">//正式的公众号，也有原始ID，是gh_开头的那个，进入公众号，自己找一下吧，有的</span>        <span class="hljs-comment">//测试号，就用测试号管理页面右上角的那个gh_开头的那一串数字</span>    });    <span class="hljs-comment">//手机蓝牙状态改变时触发 （这是监听事件的调用方法，注意，监听事件都没有参数）</span>    wx.on(<span class="hljs-string">'onWXDeviceBluetoothStateChange'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(res)</span>{</span>            <span class="hljs-comment">//把res输出来看吧</span>    });    <span class="hljs-comment">//设备绑定状态改变事件（解绑成功，绑定成功的瞬间，会触发）</span>    wx.on(<span class="hljs-string">'onWXDeviceBindStateChange'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(res)</span>{</span>            <span class="hljs-comment">//把res输出来看吧</span>    });    <span class="hljs-comment">//设备连接状态改变</span>    wx.on(<span class="hljs-string">'onWXDeviceStateChange'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(res)</span>{</span>        <span class="hljs-comment">//有3个状态：connecting连接中,connected已连接,unconnected未连接</span>        <span class="hljs-comment">//每当手机和设备之间的状态改变的瞬间，会触发一次</span>    });    <span class="hljs-comment">//接收到设备传来的数据</span>    wx.on(<span class="hljs-string">'onReceiveDataFromWXDevice'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(res)</span>{</span>        <span class="hljs-comment">//接收到的原始数据：JSON.stringify(res)</span>        <span class="hljs-comment">//自己去百度下载一个jbase64.js,可以对字符串进行base64编码解码</span>        <span class="hljs-comment">//这里就是用的jbase64.js对原始数据进行解码</span>        <span class="hljs-keyword">var</span> unicode= BASE64.decoder(res.base64Data);        <span class="hljs-keyword">var</span> str = <span class="hljs-string">''</span>;          <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span> , len =  unicode.length ; i < len ;++i){                   str += <span class="hljs-built_in">String</span>.fromCharCode(unicode[i]);          }        <span class="hljs-comment">//解码后的数据：str</span>        <span class="hljs-comment">//坑：你们测试的时候，不要在这里用alert(),页面会卡死。自己把信息输出到页面中查看吧</span>        <span class="hljs-comment">//不要在这里alert出来</span>    });});</code><ul class="pre-numbering" style="opacity: 0.316797;"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li></ul>

5、继续写方法：

<code class="hljs javascript has-numbering">wx.error(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(res)</span>{</span>    alert(<span class="hljs-string">"wx.error错误："</span>+<span class="hljs-built_in">JSON</span>.stringify(res));    <span class="hljs-comment">//如果初始化出错了会调用此方法，没什么特别要注意的</span>});</code><ul class="pre-numbering" style="opacity: 0.316797;"><li>1</li><li>2</li><li>3</li><li>4</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li></ul>

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

<code class="hljs javascript has-numbering"><span class="hljs-comment">//扫描前请先监听设备扫描事件</span>wx.on(<span class="hljs-string">'onScanWXDeviceResult'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(res)</span>{</span>    alert(<span class="hljs-string">"扫描到1个设备"</span>);    <span class="hljs-comment">//自己解析一下res，里面会有deviceid,扫描设备的目的就是为了得到这个</span>    <span class="hljs-comment">//然后就可以开始绑定了</span>}<span class="hljs-comment">//开始扫描</span>wx.invoke(<span class="hljs-string">"startScanWXDevice"</span>,{<span class="hljs-string">"btVersion"</span>:<span class="hljs-string">"ble"</span>},<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(res)</span>{</span>});<span class="hljs-comment">//这里填的参数是ble,也可以填bc，bc是经典蓝牙，我们做的这个设备不支持经典蓝牙，所以直接填ble</span><span class="hljs-comment">//安卓系统不能同时支持ble和bc，这个后面详细说一下</span><span class="hljs-comment">//执行此方法后，就开始一直不停的扫描，扫描到了设备会触发上面的监听事件</span><span class="hljs-comment">//如果不想扫了，可以停止扫描</span><span class="hljs-comment">//然而经测试，这个方法并没有什么卵用</span><span class="hljs-comment">//你发现重新扫描根本什么都扫不出来，即使你现在刷新页面，也扫不出任何东西</span><span class="hljs-comment">//解决方法：每次扫描前，先调用closeWXDeviceLib关闭设备库，再调用openWXDeviceLib打开设备库</span><span class="hljs-comment">//这样就相当于重新初始化了一遍设备库，你现在再重新扫描，就可以扫描到设备了。</span>wx.invoke(<span class="hljs-string">"stopScanWXDevice"</span>,{},<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(res)</span>{</span>});</code><ul class="pre-numbering" style="opacity: 0.316797;"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li></ul>

7、绑定和解除绑定

<code class="hljs r has-numbering">//用户绑定设备//<span class="hljs-number">1</span>、先获取操作凭证（type为<span class="hljs-number">1</span>表示绑定，<span class="hljs-number">2</span>表示解除绑定）wx.invoke(<span class="hljs-string">'getWXDeviceTicket'</span>,{<span class="hljs-string">"deviceId"</span>:<span class="hljs-string">"填写设备的deviceID"</span>,<span class="hljs-string">"type"</span>:<span class="hljs-number">1</span>},<span class="hljs-keyword">function</span>(res){    <span class="hljs-keyword">if</span>(res.err_msg !=<span class="hljs-string">"getWXDeviceTicket:ok"</span>){            alert(<span class="hljs-string">"获取操作凭证失败，请重试"</span>);              <span class="hljs-keyword">return</span>;    }<span class="hljs-keyword">else</span>{        //<span class="hljs-number">2.</span>将deviceID和操作凭证通过ajax传给后台 进行绑定           //后台应该是有当前用户的openId的，其实前端也可以获取到，但比较麻烦        //我们这边的做法是，后台在数据库里保存了用户的openId,每次要用直接从数据库拿        //就不用每次还去调微信的接口拿，太麻烦了        //<span class="hljs-keyword">...</span>此处ajax代码略          }});//用户解除绑定//与上面的方法基本相同，只有type参数不同wx.invoke(<span class="hljs-string">'getWXDeviceTicket'</span>,{<span class="hljs-string">"deviceId"</span>:<span class="hljs-string">"填写设备的deviceID"</span>,<span class="hljs-string">"type"</span>:<span class="hljs-number">2</span>},<span class="hljs-keyword">function</span>(res){    <span class="hljs-keyword">if</span>(res.err_msg !=<span class="hljs-string">"getWXDeviceTicket:ok"</span>){            alert(<span class="hljs-string">"获取操作凭证失败，请重试"</span>);              <span class="hljs-keyword">return</span>;    }<span class="hljs-keyword">else</span>{        //<span class="hljs-number">2.</span>将deviceID和操作凭证通过ajax传给后台 进行绑定           <span class="hljs-keyword">...</span>代码略          }});</code><ul class="pre-numbering" style="opacity: 0.316797;"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li></ul>

8、向设备发送数据

<code class="hljs javascript has-numbering">wx.invoke(<span class="hljs-string">'sendDataToWXDevice'</span>, {<span class="hljs-string">'deviceId'</span>:dev,<span class="hljs-string">"base64Data"</span>:BASE64.encoder(str)}, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(res)</span>{</span>    <span class="hljs-keyword">if</span>(res.err_msg ==<span class="hljs-string">"sendDataToWXDevice:ok"</span>){            alert(<span class="hljs-string">"数据已发送"</span>);    }<span class="hljs-keyword">else</span>{            alert(<span class="hljs-string">"数据发送失败"</span>);    }});<span class="hljs-comment">//发送的数据需要经过base64编码</span></code><ul class="pre-numbering" style="opacity: 0.316797;"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul>

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

下面来说一下遇到的各种坑：（上面内容中提到的就不说了）
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估计是订阅那个什么东西非常快，不会过期，所以一下就连上了。
（2016-9-23更新：听IOS工程师说：IOS连接蓝牙只需要3步，非常快非常稳定。安卓需要5步，其中2步容易失败，就是错过了某个时机就连不上了。貌似微信官方也没有好的解决办法。我们是让硬件开发人员写了个重新连接的机制。但是也不是很好用）

那句话具体在什么地方，我真的找不到了，微信太坑了。
目前的解决办法：蓝牙板子是有相关接口的，蓝牙板子可以得到当前手机的连接状态。所以如果当前微信显示的是“正在连接中…”，这个时候，让硬件开发人员再发送Auth和Init包。

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

5、继续补充中