赞
踩
写于: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" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">wx.config({ beta:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//坑:这个很重要,必须配置这个为true,才能调用微信的硬件API</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">debug</span>: <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">false</span>, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//是否开启调试模式,会自动弹一些消息框显示微信返回的数据</span> appId: 这里填写appID, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//让后台返回appid</span> timestamp: 时间戳, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//让后台返回生成证书时用的时间戳</span> nonceStr: 随机字符串, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//让后台返回生成证书时用的随机串</span> signature: 证书, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//让后台返回以当前URL地址生成的证书</span> jsApiList: [ <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//需要调用的接口,都得在这里面写一遍</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"openWXDeviceLib"</span>,<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//初始化设备库(只支持蓝牙设备)</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"closeWXDeviceLib"</span>,<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//关闭设备库(只支持蓝牙设备)</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"getWXDeviceInfos"</span>,<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//获取设备信息(获取当前用户已绑定的蓝牙设备列表)</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"sendDataToWXDevice"</span>,<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//发送数据给设备</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"startScanWXDevice"</span>,<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//扫描设备(获取周围所有的设备列表,无论绑定还是未被绑定的设备都会扫描到)</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"stopScanWXDevice"</span>,<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//停止扫描设备</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"connectWXDevice"</span>,<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//连接设备</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"disconnectWXDevice"</span>,<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//断开设备连接</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"getWXDeviceTicket"</span>,<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//获取操作凭证</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//下面是监听事件:</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"onWXDeviceBindStateChange"</span>,<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//微信客户端设备绑定状态被改变时触发此事件</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"onWXDeviceStateChange"</span>,<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//监听连接状态,可以监听连接中、连接上、连接断开</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"onReceiveDataFromWXDevice"</span>,<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//接收到来自设备的数据时触发</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"onScanWXDeviceResult"</span>,<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//扫描到某个设备时触发</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"onWXDeviceBluetoothStateChange"</span>,<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//手机蓝牙打开或关闭时触发</span> ] });</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li></ul>
上面这个方法,在进入页面时应该首先被调用,这是初始化微信JS-SDK
其中:
beta 这个参数需设为true,才能调用那些微信还没有正式开放的新接口
appID,timestamp,nonceStr,signature这几个由后台传递到前端。
生成证书的方法JS-SDK文档中有,此处暂时省略
4、继续写方法:
<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">wx.ready(<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//初始化设备库 需填写参数 公众号的原始ID</span> wx.invoke(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'openWXDeviceLib'</span>, {<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'brandUserName'</span>:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'gh_xxxxxxxxxx'</span>}, <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(res)</span>{</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//自己把res输出来看一下吧,里面包括了是否初始化成功,当前手机的蓝牙状态等信息</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//这里有个坑,当时研究了好久,跟论坛里的人讨论了半天,就是IOS下正常,</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//安卓下,请带上这个参数:brandUserName:后面是你公众号的原始ID。不然会初始化失败</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//正式的公众号,也有原始ID,是gh_开头的那个,进入公众号,自己找一下吧,有的</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//测试号,就用测试号管理页面右上角的那个gh_开头的那一串数字</span> }); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//手机蓝牙状态改变时触发 (这是监听事件的调用方法,注意,监听事件都没有参数)</span> wx.on(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'onWXDeviceBluetoothStateChange'</span>,<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(res)</span>{</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//把res输出来看吧</span> }); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//设备绑定状态改变事件(解绑成功,绑定成功的瞬间,会触发)</span> wx.on(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'onWXDeviceBindStateChange'</span>,<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(res)</span>{</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//把res输出来看吧</span> }); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//设备连接状态改变</span> wx.on(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'onWXDeviceStateChange'</span>,<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(res)</span>{</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//有3个状态:connecting连接中,connected已连接,unconnected未连接</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//每当手机和设备之间的状态改变的瞬间,会触发一次</span> }); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//接收到设备传来的数据</span> wx.on(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'onReceiveDataFromWXDevice'</span>,<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(res)</span>{</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//接收到的原始数据:JSON.stringify(res)</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//自己去百度下载一个jbase64.js,可以对字符串进行base64编码解码</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//这里就是用的jbase64.js对原始数据进行解码</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> unicode= BASE64.decoder(res.base64Data); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> str = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">''</span>; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> i = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> , len = unicode.length ; i < len ;++i){ str += <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">String</span>.fromCharCode(unicode[i]); } <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//解码后的数据:str</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//坑:你们测试的时候,不要在这里用alert(),页面会卡死。自己把信息输出到页面中查看吧</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//不要在这里alert出来</span> }); }); </code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li></ul>
5、继续写方法:
<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">wx.error(<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(res)</span>{</span> alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"wx.error错误:"</span>+<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">JSON</span>.stringify(res)); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//如果初始化出错了会调用此方法,没什么特别要注意的</span> });</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>
6、扫描设备:
(我做的那个项目,是通过手机扫描附近的设备,得到设备的deviceid,然后进行绑定,不是用户扫描二维码进行绑定,所以这里介绍扫描设备的过程)
<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//扫描前请先监听设备扫描事件</span> wx.on(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'onScanWXDeviceResult'</span>,<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(res)</span>{</span> alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"扫描到1个设备"</span>); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//自己解析一下res,里面会有deviceid,扫描设备的目的就是为了得到这个</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//然后就可以开始绑定了</span> } <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//开始扫描</span> wx.invoke(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"startScanWXDevice"</span>,{<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"btVersion"</span>:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ble"</span>},<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(res)</span>{</span>}); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//这里填的参数是ble,也可以填bc,bc是经典蓝牙,我们做的这个设备不支持经典蓝牙,所以直接填ble</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//安卓系统不能同时支持ble和bc,这个后面详细说一下</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//执行此方法后,就开始一直不停的扫描,扫描到了设备会触发上面的监听事件</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//如果不想扫了,可以停止扫描</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//然而经测试,这个方法并没有什么卵用</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//你发现重新扫描根本什么都扫不出来,即使你现在刷新页面,也扫不出任何东西</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//解决方法:每次扫描前,先调用closeWXDeviceLib关闭设备库,再调用openWXDeviceLib打开设备库</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//这样就相当于重新初始化了一遍设备库,你现在再重新扫描,就可以扫描到设备了。</span> wx.invoke(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"stopScanWXDevice"</span>,{},<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(res)</span>{</span>});</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li></ul>
7、绑定和解除绑定
<code class="hljs r has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">//用户绑定设备 //<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>、先获取操作凭证(type为<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>表示绑定,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>表示解除绑定) wx.invoke(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'getWXDeviceTicket'</span>,{<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"deviceId"</span>:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"填写设备的deviceID"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"type"</span>:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>},<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span>(res){ <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(res.err_msg !=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"getWXDeviceTicket:ok"</span>){ alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"获取操作凭证失败,请重试"</span>); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span>; }<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span>{ //<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.</span>将deviceID和操作凭证通过ajax传给后台 进行绑定 //后台应该是有当前用户的openId的,其实前端也可以获取到,但比较麻烦 //我们这边的做法是,后台在数据库里保存了用户的openId,每次要用直接从数据库拿 //就不用每次还去调微信的接口拿,太麻烦了 //<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">...</span>此处ajax代码略 } }); //用户解除绑定 //与上面的方法基本相同,只有type参数不同 wx.invoke(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'getWXDeviceTicket'</span>,{<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"deviceId"</span>:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"填写设备的deviceID"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"type"</span>:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>},<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span>(res){ <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(res.err_msg !=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"getWXDeviceTicket:ok"</span>){ alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"获取操作凭证失败,请重试"</span>); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span>; }<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span>{ //<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.</span>将deviceID和操作凭证通过ajax传给后台 进行绑定 <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">...</span>代码略 } });</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li></ul>
8、向设备发送数据
<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">wx.invoke(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'sendDataToWXDevice'</span>, {<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'deviceId'</span>:dev,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"base64Data"</span>:BASE64.encoder(str)}, <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(res)</span>{</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(res.err_msg ==<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"sendDataToWXDevice:ok"</span>){ alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"数据已发送"</span>); }<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span>{ alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"数据发送失败"</span>); } }); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//发送的数据需要经过base64编码</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">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估计是订阅那个什么东西非常快,不会过期,所以一下就连上了。
那句话具体在什么地方,我真的找不到了,微信太坑了。
目前的解决办法:蓝牙板子是有相关接口的,蓝牙板子可以得到当前手机的连接状态。所以如果当前微信显示的是“正在连接中…”,这个时候,让硬件开发人员再发送Auth和Init包。
4、关于设备向手机发数据:
设备发的数据,里面有两个值,一个代表包括包头包尾的总长度,一个代表除去包头包尾的长度,必须与所发数据的实际情况相对应,HTML页面中才能接收到。否则不报错,但也接收不到。
5、继续补充中
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。