微信硬件蓝牙扫描绑定JSAPI发送数据

1:登录微信公众平台   查看权限接口  看设备功能是否开通  
如果已开通(进行已下操作)   未开通先去开通


2:找到功能里面的  设备功能点击进去 选择添加产品  如果是蓝牙 选择蓝牙系列的 我这里是蓝牙就说蓝牙的
创建完成  回给你个产品ID  继续以下操作


3:开发者工具  在线调式  现获取token  
   3.1-接着选择 硬件调式api   选择设备授权获取deciceid和二维码/device/getqrcode     下面会出现让你填写刚刚获取到的token
       填完token 后面千万要加上你刚刚获取到的产品ID  &product_id=123456   然后点击提交成功会返回OK   还有设备的ID  还有二维码地址  记住别删除了
   3.2 录入设备进微信后台  选择设备授权利用deviceid跟新设备属性.....
       然后同上面一样填写token 这个时候的token不要 产品ID了
       下面还有一个body  填写得json数据  是
{
    "device_num": "1", //数量 
    "device_list": [
        {
            "id": "xxxxxxx", //刚刚获取到的产品ID
            "mac": "68C90B145B7C", //MAC码 
            "connect_protocol": "3", //3表示BLE蓝牙协议
            "auth_key": "",  //不加密 不填
            "close_strategy": "1", //1:退出公众号页面时即断开连接
            "conn_strategy": "1",  //1:(第1bit置位)在公众号对话页面,不停的尝
            "crypt_method": "0", //1:AES加密
            "auth_ver": "0", //加密版本,0是不加密
            "manu_mac_pos": "-1", /-1:MAC地址在尾部
            "ser_mac_pos": "-2"//-2:表示serialnumber不包含mac地址
      }
    ], 
    "product_id": "产品ID"
}

提交 看是否返回 OK  如果OK  继续往下
    3.3 http://pl.iqr.cc/  这是个生产二维码的网站微信指定的  进去这个网站生成二维码用微信扫描  然后他会提示
       你是否绑定设备   你点击是的话  进入公众号后  会自动连接设备的  如果设备在边上

   3.4以下是生成二维码的过程图:

微信硬件蓝牙扫描绑定JSAPI发送数据

微信硬件蓝牙扫描绑定JSAPI发送数据

      微信硬件蓝牙扫描绑定JSAPI发送数据

微信硬件蓝牙扫描绑定JSAPI发送数据

微信硬件蓝牙扫描绑定JSAPI发送数据

上传成功  会产生二维码 扫描关注  然后绑定设备

微信硬件蓝牙扫描绑定JSAPI发送数据

以下是我的测试页面 可参考业务逻辑需要手动修改

<%@page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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-1.10.2.min.js"></script>
<script type="text/javascript" src="js/JQueryGetParName.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.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()">发送数据</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, //是否开启调试模式,会自动弹一些消息框显示微信返回的数据
		appId : "", //让后台返回appid
		timestamp : "1465264902", //让后台返回生成证书时用的时间戳
		nonceStr : "ovRc9vDzRzAtoUNfeOzp8jiq4qISjV5y", //让后台返回生成证书时用的随机串
		signature : "", //让后台返回已当前URL地址生成的证书
		jsApiList : [ //需要调用的接口,都得在这里面写一遍
		"openWXDeviceLib",//初始化设备库(只支持蓝牙设备)
		"closeWXDeviceLib",//关闭设备库(只支持蓝牙设备)
		"getWXDeviceInfos",//获取设备信息(获取当前用户已绑定的蓝牙设备列表)
		"sendDataToWXDevice",//发送数据给设备
		"startScanWXDevice",//扫描设备(获取周围所有的设备列表,无论绑定还是未被绑定的设备都会扫描到)
		"stopScanWXDevice",//停止扫描设备
		"connectWXDevice",//连接设备
		"disconnectWXDevice",//断开设备连接
		"getWXDeviceTicket",//获取操作凭证

		//下面是监听事件:
		"onWXDeviceBindStateChange",//微信客户端设备绑定状态被改变时触发此事件
		"onWXDeviceStateChange",//监听连接状态,可以监听连接中、连接上、连接断开
		"onReceiveDataFromWXDevice",//接收到来自设备的数据时触发
		"onScanWXDeviceResult",//扫描到某个设备时触发
		"onWXDeviceBluetoothStateChange",//手机蓝牙打开或关闭时触发
		]
	});
	wx.ready(function() {

		wx.invoke('openWXDeviceLib', {
			'brandUserName' : 'gh_xxxxxxxxxx'  //公众号原始ID   IOS好像不需要要这一行代码
		}, 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>");
		});

		//手机蓝牙状态改变时触发 (这是监听事件的调用方法,注意,监听事件都没有参数)
		wx.on('onWXDeviceBluetoothStateChange', function(res) {
			//把res输出来看吧
			$("#initBle").append("<p>蓝牙状态变更:" + JSON.stringify(res) + "</p>");
		});

		//设备绑定状态改变事件(解绑成功,绑定成功的瞬间,会触发)
		wx.on('onWXDeviceBindStateChange', function(res) {
			$("#initBle").append("<p>绑定状态变更:" + res.err_msg + "</p>");
		});

		//设备连接状态改变
		wx.on('onWXDeviceStateChange', function(res) {
			//有3个状态:connecting连接中,connected已连接,unconnected未连接
			//每当手机和设备之间的状态改变的瞬间,会触发一次
			alert(JSON.stringify(res))
			$("#initBle").append("<p>设备连接状态:" + 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   这才是生成签名的连接注意上面填写的四个字段

1:jsapi_ticket      //下面介绍怎么获取他的值

2:noncestr  为了测试这里我们先写一个零时的   ovRc9vDzRzAtoUNfeOzp8jiq4qISjV5y  //跟上面config中的一致

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新手发贴大神勿喷    建议以上能成功通过在结合后台来开发后续流程  如果不懂 wb_90@foxmail.com




微信硬件蓝牙扫描绑定JSAPI发送数据

上一篇:C#开发微信门户及应用(44)--微信H5页面开发的经验总结


下一篇:viewpager+fragment的懒加载实现微信点击和滑动切换功能(切换效果)