基于蓝牙的微信硬件JSAPI开发不彻底指南

写在前面

公司的自行车终于接入微信成功，期间经历了无数的大坑，为了同窗们不在误入歧途，特意总结，但愿对各位有用。大家的收藏与推荐是我继续完善的动力，若是有不明白或者有误的地方，欢迎联系微信交流（备注技术咨询），我看到后会在第一时间回复

wx：luputa-

什么是微信硬件JSAPI

微信硬件是微信推出的一项基于公众号的设备服务，依托微信的平台，经过蓝牙或者wifi接入硬件设备，与微信app链接，实现各类服务

两个概念

1. 微信js-sdk
2. 微信硬件js-api

这里要明确两个概念，微信js-sdk是微信给开发人员使用的通用api,不分使用场景，而微信硬件jsapi是专门用来给微信硬件使用的。虽然这两个东西引入的都是同一个微信JS库，可是发挥的做用不一样

前期准备

在老板跟你讲,hi,xx，咱们搞了个XX手环，你把这东西给我接到微信里面去。千万不要大腿一拍开始写撸代码，你至少要准备这些东西：

1. 一个经过微信认证的服务号
2. 服务号开通了设备功能插件
3. 具备操做jsapi的权限

注意：这里不要使用开发者测试号,硬件JSAPI目前还未向开发者测试帐号开放，请使用正式的服务号,服务号的注册就不说了。经过认证以后，在微信后台添加设备功能插件。添加插件后，发送邮件到wxthings@foxmail.com ，申请微信硬件jsapi的操做权限

链接一个设备

咱们想用微信操做一个设备，首先这个设备必须和微信链接在一块儿，就像下图这样，在你的微信公众号界面上，ios系统会显示已链接，安卓系统会显示已链接1个设备，只有在这个基础上，你才能够进行下一步的操做

注意，若是安卓显示已链接0个设备，那么对不起，你的链接是失败的，没有链接成功

那么如何才能在微信显示已链接呢，做为前端，你须要作好下面这些：

1. 在微信后台申请一个设备二维码，
2. 问硬件同窗拿到你要链接的设备的mac地址，
3. 将mac地址和设备的二维码在微信后台受权，这一步很关键
4. 打开手机蓝牙，等待和设备的链接

注意，作为前端，你只要把上面这几步作好就能够了，剩下的就是硬件同窗的事情了，当你打开微信，进入微信公众号界面，微信app就会主动寻找周围的设备，发送链接数据包，而你的设备，在收到微信数据包的时候应该主动发送回包，相似于TCP协议的三次握手，当微信收到回包以后，链接创建，微信界面就会显示 已链接

引入js库

这是微信的js库，使用微信js接口，必须引入这个库,微信设备功能手册里面并无写要引入这个库，新手在这里就要入坑了

<script type="text/javascript" src='http://res.wx.qq.com/open/js/jweixin-1.0.0.js'></script>

为页面注入配置信息

这个config中几个字符串的生成比较复杂,微信后台提供了完整的demo,能够拿来使用生成本身的配置参数

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

注意：调用微信硬件jsapi必须在config中配置beta:true这个选项，而公开的开发手册里面没有讲这个，第一次接手的人走到这里绝对入坑，最后一个参数是jsApiList数组，你必须把全部用到的函数名字添加在这个数组里面，好比说初始化库的openWXDeviceLib，发送数据的sendDataToWXDevice等等

经过ready接口处理成功验证

wx.ready(function(){
     // 初始化设备库函数
     wx.invoke('openWXDeviceLib', {}, function(res){
        // alert(res.err_msg);
     });
 });

注意：你必须在ready中调用openWXDeviceLib来初始化库，getWXDeviceInfos()和sendDataToWXDevice()不用在这里调用，后者在你的业务逻辑里面调用就能够

准备你要发送的数据包

var data={"deviceId": '微信给你的设备id',"base64Data": '你要发送的数据'};

注意：data的第一个参数是设备的id,第二个参数是你要发送的message,message必定要用base64编码，不然设备没有办法解析，在这里我在放一个使用javascript对字符串进行base64编码的函数

js封装的base64编码函数

var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"; 
function base64encode(str) {
  var out, i, len;
  var c1, c2, c3;
  len = str.length;
  i = 0;
  out = "";
  while(i < len) {
      c1 = str.charCodeAt(i++) & 0xff;
      if(i == len)
      {
          out += base64EncodeChars.charAt(c1 >> 2);
          out += base64EncodeChars.charAt((c1 & 0x3) << 4);
          out += "==";
          break;
      }
      c2 = str.charCodeAt(i++);
      if(i == len)
      {
          out += base64EncodeChars.charAt(c1 >> 2);
          out += base64EncodeChars.charAt(((c1 & 0x3)<< 4) | ((c2 & 0xF0) >> 4));
          out += base64EncodeChars.charAt((c2 & 0xF) << 2);
          out += "=";
          break;
      }
      c3 = str.charCodeAt(i++);
      out += base64EncodeChars.charAt(c1 >> 2);
      out += base64EncodeChars.charAt(((c1 & 0x3)<< 4) | ((c2 & 0xF0) >> 4));
      out += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >>6));
      out += base64EncodeChars.charAt(c3 & 0x3F);
  }
  return out;
}

发送到设备

第二个参数data就是咱们在上一步准备的data,当程序执行的到这一步的时候,你的设备就应该收到了你经过蓝牙在微信里面发送的数据，使用WeixinJSBridge.invoke或者wx.invoke均可以，这二者微信均可以识别的

// 发送设置命令
wx.invoke('sendDataToWXDevice', data, function(res){
   //回调
});

监听设备返回的数据

在onReceiveDataFromWXDevice函数中，你能够对设备返回的任何数据进行监听，这个函数最大的用处就是初始化的时候，在页面显示设备当前信息

wx.on('onReceiveDataFromWXDevice', function(argv) {
          var obj=eval("("+JSON.stringify(argv)+")");
          //这里的obj就是你收到的数据对象
          //这里你要对数据再作一次解码
          
  })

我遇到的问题

调用jsapi返回access_denied错误

这个通常的缘由都是由于公众号尚未得到jsapi的使用权限，或者你的微信公众号后台尚未添加硬件设备功能

如何发送16进制的数据\

假设你要发送的是0x85和0x01两个16进制的数据，你须要先使用String.fromCharCode()函数包装数据，再使用window.btoa()对数据作base64位的转码，而后就能够带入微信的sendDataToWXDevice()函数中发送了

var _msg='';
_msg = String.fromCharCode(0x85)+String.fromCharCode(0x01)

 wx.invoke('sendDataToWXDevice', {"deviceId": device,"base64Data":
 window.btoa(_msg)}, function(res){
     //do something        
});

开发建议

用什么UI

日前微信同窗开源了WeUI,这是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，能够令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、icon等各式元素,建议设计师同窗可直接采用这套ui，与微信原生视觉统一

weui框架

选一个js库

咱们开发出来的应用，必须是跑在微信内置浏览器中，这个浏览器仍是有不少兼容方面的问题，因此建议选用zepto.js库，避免后期出现的各类问题

本地保存绑定关系表

当设备接入微信成功以后，会有不少业务逻辑须要获取用户名下绑定的设备或者和设备有关的用户，微信有后台api给咱们调用来获取这些信息，可是这些api的接口调用都是有次数限制的，因此务必在你的server上用一张表来保存全部的绑定关系

参考及开发工具

1. 签名算法确认工具
2. 调试接口
3. 微信硬件官方文档