[置頂] 微信硬件藍牙掃描綁定JSAPI發(fā)送數據
來源：程序員人生 發(fā)布時間：2016-07-21 08:34:48 閱讀次數：4795次
1：登錄微信公眾平臺 查看權限接口 看裝備功能是不是開通
如果已開通(進行已下操作) 未開通先去開通
2：找到功能里面的 裝備功能點擊進去 選擇添加產品 如果是藍牙 選擇藍牙系列的 我這里是藍牙就說藍牙的
創(chuàng)建完成 回給你個產品ID 繼續(xù)以下操作
3：開發(fā)者工具 在線調式 現獲得token
3.1-接著選擇 硬件調式api 選擇裝備授權獲得deciceid和2維碼/device/getqrcode 下面會出現讓你填寫剛剛獲得到的token
填完token 后面千萬要加上你剛剛獲得到的產品ID &product_id=123456 然后點擊提交成功會返回OK 還有裝備的ID 還有2維碼地址 記住別刪除
3.2 錄入裝備進微信后臺 選擇裝備授權利用deviceid跟新裝備屬性.....
然后同上面1樣填寫token 這個時候的token不要 產品ID了
下面還有1個body 填寫得json數據 是
{
"device_num": "1", //數量
"device_list": [
{
"id": "xxxxxxx", //剛剛獲得到的產品ID
"mac": "68C90B145B7C", //MAC碼
"connect_protocol": "3", //3表示BLE藍牙協(xié)議
"auth_key": "", //不加密 不填
"close_strategy": "1", //1：退出公眾號頁面時即斷開連接
"conn_strategy": "1", //1：（第1bit置位）在公眾號對話頁面，不停的嘗
"crypt_method": "0", //1：AES加密
"auth_ver": "0", //加密版本，0是不加密
"manu_mac_pos": "⑴", /⑴：MAC地址在尾部
"ser_mac_pos": "⑵"//⑵：表示serialnumber不包括mac地址
}
],
"product_id": "產品ID"
}
提交 看是不是返回 OK 如果OK 繼續(xù)往下
3.3 http://pl.iqr.cc/ 這是個生產2維碼的網站微信指定的 進去這個網站生成2維碼用微信掃描 然后他會提示
你是不是綁定裝備 你點擊是的話 進入公眾號后 會自動連接裝備的 如果裝備在邊上
3.4以下是生成2維碼的進程圖：
上傳成功 會產生2維碼 掃描關注 然后綁定裝備
以下是我的測試頁面 可參考業(yè)務邏輯需要手動修改
<%@page language="java" contentType="text/html; charset=UTF⑻"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF⑻">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>測試藍牙1</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<script src="js/
jquery⑴.10.2.min.js"></script>
<script type="text/javascript" src="js/JQueryGetParName.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin⑴.0.0.js"></script>
<style type="text/css">
.wdbll4 {
margin-top: 15px;
}
.grxx_top_biaoge td {
text-align: center;
}
</style>
</head>
<body id="activity-detail" class="zh_CN ">
<div class="wdbll4" align="center"
style="padding-left: 10px; padding-right: 10px;">
<div style="width: 95%; margin: 0 auto; text-align: center" id="scan">
<div class='aui-btn aui-btn-info aui-btn-block' onclick=""
id="startScanWXDevice">搜索藍牙</div>
</div>
</div>
<div class="wdbll4" align="center"
style="padding-left: 10px; padding-right: 10px;">
<div style="width: 95%; margin: 0 auto; text-align: center" id="scan">
<div class='aui-btn aui-btn-info aui-btn-block' onclick=""
id="stopScanWXDevice">停止搜索</div>
</div>
</div>
<div class="wdbll4" align="center"
style="padding-left: 10px; padding-right: 10px;">
<div style="width: 95%; margin: 0 auto; text-align: center" id="scan">
<div class='aui-btn aui-btn-info aui-btn-block' onclick="getInfo()">獲得裝備信息</div>
</div>
</div>
<div class="wdbll4" align="center"
style="padding-left: 10px; padding-right: 10px;">
<div style="width: 95%; margin: 0 auto; text-align: center" id="scan">
<div class='aui-btn aui-btn-info aui-btn-block' onclick="bleConn()">連接藍牙</div>
</div>
</div>
<div class="wdbll4" align="center"
style="padding-left: 10px; padding-right: 10px;">
<div style="width: 95%; margin: 0 auto; text-align: center" id="scan">
<div class='aui-btn aui-btn-info aui-btn-block' onclick="sendData()">發(fā)送數據</div>
</div>
</div>
<div id="initBle"></div>
</body>
<script type="text/javascript">
function sacn() {
wx.invoke("startScanWXDevice", {
"btVersion" : "ble"
}, function(res) {
alert(JSON.stringify(res))
});
}
function stopScan() {
wx.invoke('stopScanWXDevice', {
'connType' : 'ble'
}, function(res) {
alert(JSON.stringify(res))
});
}
function getInfo() {
wx.invoke('getWXDeviceInfos', {
'connType' : 'ble'
}, function(res) {
alert(JSON.stringify(res))
});
}
function bleConn() {
wx.invoke('connectWXDevice', {
'deviceId' : 'MTT1',
'connType' : 'ble'
}, function(res) {
alert(JSON.stringify(res))
});
}
function sendData() {
wx.invoke('sendDataToWXDevice', {
'deviceId' : 'MD99201',
'connType' : 'ble',
'base64Data' : 'MDAwMEZGRjItMDAwMC0xMDAwLTgwMDAtMDA4MDVGOUIzNEZC'
}, function(res) {
alert(JSON.stringify(res))
});
}
wx.config({
beta : true, //坑：這個很重要，必須配置這個為true,才能調用微信的硬件API
debug : true, //是不是開啟調試模式，會自動彈1些消息框顯示微信返回的數據
appId : "", //讓后臺返回appid
timestamp : "1465264902", //讓后臺返復生成證書時用的時間戳
nonceStr : "ovRc9vDzRzAtoUNfeOzp8jiq4qISjV5y", //讓后臺返復生成證書時用的隨機串
signature : "", //讓后臺返回已當前URL地址生成的證書
jsApiList : [ //需要調用的接口，都得在這里面寫1遍
"openWXDeviceLib",//初始化裝備庫（只支持藍牙裝備）
"closeWXDeviceLib",//關閉裝備庫（只支持藍牙裝備）
"getWXDeviceInfos",//獲得裝備信息（獲得當前用戶已綁定的藍牙裝備列表）
"sendDataToWXDevice",//發(fā)送數據給裝備
"startScanWXDevice",//掃描裝備（獲得周圍所有的裝備列表，不管綁定還是未被綁定的裝備都會掃描到）
"stopScanWXDevice",//停止掃描裝備
"connectWXDevice",//連接裝備
"disconnectWXDevice",//斷開裝備連接
"getWXDeviceTicket",//獲得操作憑證
//下面是監(jiān)聽事件：
"onWXDeviceBindStateChange",//微信客戶端裝備綁定狀態(tài)被改變時觸發(fā)此事件
"onWXDeviceStateChange",//監(jiān)聽連接狀態(tài)，可以監(jiān)聽連接中、連接上、連接斷開
"onReceiveDataFromWXDevice",//接收到來自裝備的數據時觸發(fā)
"onScanWXDeviceResult",//掃描到某個裝備時觸發(fā)
"onWXDeviceBluetoothStateChange",//手機藍牙打開或關閉時觸發(fā)
]
});
wx.ready(function() {
wx.invoke('openWXDeviceLib', {
'brandUserName' : 'gh_xxxxxxxxxx' //公眾號原始ID IOS好像不需要要這1行代碼
}, function(res) {
$("#initBle").append("<p>初始化裝備庫：" + res.err_msg + "</p>");
if (res.bluetoothState == "off") {
$("#initBle").append("<p>請先開啟手機藍牙</p>");
}
});
wx.invoke('getWXDeviceInfos', {
'connType' : 'blue'
}, function(res) {
$("#initBle").append("<p>獲得我的裝備：" + res.err_msg + "</p>");
});
document.querySelector('#startScanWXDevice').onclick = function() {
wx.invoke('startScanWXDevice', {
'connType' : 'blue',
'btVersion' : 'ble'
}, function(res) {
console.log('開始掃描裝備：', res);
$("#initBle").append("<p>開始掃描裝備：" + res.err_msg + "</p>");
//alert(res.err_msg);
});
};
document.querySelector('#stopScanWXDevice').onclick = function() {
wx.invoke('stopScanWXDevice', {
'connType' : 'blue'
}, function(res) {
$("#initBle").append("<p>停止掃描裝備：" + res.err_msg + "</p>");
console.log('停止掃描裝備：', res);
//alert(res.err_msg);
});
};
wx.on('onScanWXDeviceResult', function(res) {
var macid = JSON.stringify(res.devices[0].deviceId).replace(/\"/g,"");
alert(macid);
$("#initBle").append(
"<button onclick=\"bindBle('" + macid + "')\">掃描到裝備："
+ macid + "</button>");
});
//手機藍牙狀態(tài)改變時觸發(fā) （這是監(jiān)聽事件的調用方法，注意，監(jiān)聽事件都沒有參數）
wx.on('onWXDeviceBluetoothStateChange', function(res) {
//把res輸出來看吧
$("#initBle").append("<p>藍牙狀態(tài)變更：" + JSON.stringify(res) + "</p>");
});
//裝備綁定狀態(tài)改變事件（解綁成功，綁定成功的瞬間，會觸發(fā)）
wx.on('onWXDeviceBindStateChange', function(res) {
$("#initBle").append("<p>綁定狀態(tài)變更：" + res.err_msg + "</p>");
});
//裝備連接狀態(tài)改變
wx.on('onWXDeviceStateChange', function(res) {
//有3個狀態(tài)：connecting連接中,connected已連接,unconnected未連接
//每當手機和裝備之間的狀態(tài)改變的瞬間，會觸發(fā)1次
alert(JSON.stringify(res))
$("#initBle").append("<p>裝備連接狀態(tài)：" + res.state + "</p>");
});
//接收到裝備傳來的數據
wx.on('onReceiveDataFromWXDevice', function(res) {
$("#initBle").append("<p>收到裝備數據：" + res.err_msg + "</p>");
});
wx.error(function(res) {
alert("wx.error毛病：" + JSON.stringify(res));
//如果初始化出錯了會調用此方法，沒甚么特別要注意的
});
});
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;
}
</script>
</html>
下面教怎樣獲得正確的簽名也就上上面JS中config中要用到的
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=&lang=zh_CN 這是毛病碼查看連接
http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 這才是生成簽名的連接注意上面填寫的4個字段
1：jsapi_ticket //下面介紹怎樣獲得他的值
2：noncestr
為了測試這里我們先寫1個零時的 ovRc9vDzRzAtoUNfeOzp8jiq4qISjV5y //跟上面config中的1致
3：timestamp
1465264902
4：url
這里是需要調JS的頁面所在的URL
然后點擊生存簽名
jsapi_ticket
//獲得
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="這里面要自己獲得其它的不用改變"&type=jsapi
這是獲得的要求 自己在后頭組裝get或post要求先獲得token然后傳進去要求這個連接出來的就是jsapi_ticket
xin新手發(fā)貼大神勿噴
建議以上能成功通過在結合后臺來開發(fā)后續(xù)流程 如果不懂 wb_90@foxmail.com
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
