基於藍牙的微信硬件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. 微信硬件官方文檔