微信硬件蓝牙jsapi开发之onWXDeviceStateChange接口实现(12)--监听蓝牙状态变化接口
来源：互联网 发布：满文翻译软件 编辑：程序博客网 时间：2024/05/15 02:49
文章来源 http://www.vxzsk.com/142.html
已推出最新微信硬件jsapi学习笔记 地址 http://www.vxzsk.com/282.html
我们在开发微信硬件蓝牙设备的时候，对于监听蓝牙设备连接状态是有必要的，因为我们无法预测到用户在用蓝牙设备的时候是处于怎么样的环境状态下，必须时时刻刻监听手机微信和蓝牙设备之间的连接状态，以便我们在数据交互的时候提醒用户注意蓝牙连接，否则数据交互会因为蓝牙断开导致中断。
首先看微信硬件jsapi接口介绍
其实微信的官方文档说的不是很清楚，这里的参数并不是入参，而是调用这个接口后返回的参数。微信到处给挖坑。
第一、新建jsp界面，引入微信硬件js库和jquery库，weui库
1
2
<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"> </script><script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>weui.min.css文件请网友自行百度下载，之所以在这里提微信的weui库是因为使得界面看起来美观一些
第二，<body></body>之间的html代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!--标题行--><h2 style="color: white;background-color: green;text-align: center;background-position: center;">蓝牙设备</h2> <div class="page"> <div class="bd spacing"> <div class="weui_cells weui_cells_form"> <div class="weui_cell"> <div class="weui_cell_hd"><label class="weui_label" style="width: auto;">当前设备: </label></div> <div class="weui_cell_bd weui_cell_primary"> <label id="lbdeviceid" class="weui_label" style="width: auto;"></label> </div> </div> <div class="weui_cell"> <div class="weui_cell_hd"><label class="weui_label" style="width: auto;">状态信息: </label></div> <div class="weui_cell_bd weui_cell_primary"> <label id="lbInfo" class="weui_label" style="width: auto;"></label> </div> </div> <div class="weui_cell" > <div class="weui_cell_hd"><label class="weui_label">日志: </label></div> <div class="weui_cell_bd weui_cell_primary"> <textarea id="logtext" class="weui_textarea" placeholder="日志" rows="5"></textarea> </div> </div> </div> <div class="weui_btn_area weui"> <button class="weui_btn weui_btn weui_btn_warn" id="CallGetWXrefresh">获取设备</button><br> </div> </div> <div class="weui_dialog_alert" id="Mydialog" style="display: none;"> <div class="weui_mask"></div> <div class="weui_dialog"> <div class="weui_dialog_hd" id="dialogTitle"><strong class="weui_dialog_title">着急啦</strong></div> <div class="weui_dialog_bd" id="dialogContent">亲,使用本功能,请先打开手机蓝牙！</div> <div class="weui_dialog_ft"> <a href="#" class="weui_btn_dialog primary">确定</a> </div> </div> </div> <!--BEGIN toast--> <div id="toast" style="display: none;"> <div class="weui_mask_transparent"></div> <div class="weui_toast"> <i class="weui_icon_toast"></i> <p class="weui_toast_content" id="toast_msg">已完成</p> </div> </div> <!--end toast--> <!-- loading toast --> <div id="loadingToast" class="weui_loading_toast" style="display:none;"> <div class="weui_mask_transparent"></div> <div class="weui_toast"> <div class="weui_loading"> <div class="weui_loading_leaf weui_loading_leaf_0"></div> <div class="weui_loading_leaf weui_loading_leaf_1"></div> <div class="weui_loading_leaf weui_loading_leaf_2"></div> <div class="weui_loading_leaf weui_loading_leaf_3"></div> <div class="weui_loading_leaf weui_loading_leaf_4"></div> <div class="weui_loading_leaf weui_loading_leaf_5"></div> <div class="weui_loading_leaf weui_loading_leaf_6"></div> <div class="weui_loading_leaf weui_loading_leaf_7"></div> <div class="weui_loading_leaf weui_loading_leaf_8"></div> <div class="weui_loading_leaf weui_loading_leaf_9"></div> <div class="weui_loading_leaf weui_loading_leaf_10"></div> <div class="weui_loading_leaf weui_loading_leaf_11"></div> </div> <p class="weui_toast_content" id="loading_toast_msg">数据加载中</p> </div> </div> <!-- End loading toast --> <!--BEGIN dialog1--> <div class="weui_dialog_confirm" id="dialog1" style="display: none;"> <div class="weui_mask"></div> <div class="weui_dialog"> <div class="weui_dialog_hd"><strong class="weui_dialog_title">弹窗标题</strong></div> <div class="weui_dialog_bd">自定义弹窗内容，居左对齐显示，告知需要确认的信息等</div> <div class="weui_dialog_ft"> <a href="javascript:;" class="weui_btn_dialog default" id="qxBtn">取消</a> <a href="javascript:;" class="weui_btn_dialog primary" id="okBtn">确定</a> </div> </div> </div> <!--END dialog1--> <!--BEGIN dialog2--> <div class="weui_dialog_alert" id="dialog2" style="display: none;"> <div class="weui_mask"></div> <div class="weui_dialog"> <div class="weui_dialog_hd"><strong class="weui_dialog_title">弹窗标题</strong></div> <div class="weui_dialog_bd">弹窗内容，告知当前页面信息等</div> <div class="weui_dialog_ft"> <a href="javascript:;" class="weui_btn_dialog primary">确定</a> </div> </div> </div> <!--END dialog2--></div><div id="myparams" style="display: none"> <span id="timestamp">${timestamp }</span> <span id="nonceStr">${nonceStr }</span> <span id="signature">${signature }</span> <span id="appId">${appId }</span></div>上述最后四行html代码是调用微信硬件jsapi的四个参数凭证，具体如何初始化四个参数,请参考http://www.vxzsk.com/79.html
第三、javascript代码编写
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
jQuery(document).ready(function(){ //初始化库 loadXMLDoc(); //初始化库结束 $("#CallGetWXrefresh").on("click",function(e){ //showdialog(); //1. 打开微信设备 my_openWXDeviceLib(); //2. 安装设备事件 my_installwxEvents(); //2.1安装状态改变事件 my_onWXDeviceStateChange(); //3. 安装接收到数据事件 my_onReceiveDataFromWXDevice(); //4. 刷新设备信息 my_getWXDeviceInfos(); }); });1)：首先是loadXMLDoc();方法，首先必须初始化微信硬件jsapi库，库里面包含了各种调用微信硬件jsapi接口方法。而初始化这个库需要四个参数，分别为appId，timestamp，nonceStr，signature，其中appid是我们的应用id,其它三个参数是在我们点击微信菜单请求java方法生成的，此方法跳转到jsp界面。
loadXMLDoc()方法如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//微信硬件jsapi库function loadXMLDoc(){ var appId =jQuery("#appId").text(); var timestamp=jQuery("#timestamp").text(); var nonceStr =jQuery("#nonceStr").text(); var signature=jQuery("#signature").text(); wx.config({ beta: true, debug: true,// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: appId, timestamp: timestamp, nonceStr: nonceStr, signature: signature, jsApiList: [ 'openWXDeviceLib', 'closeWXDeviceLib', 'getWXDeviceInfos', 'getWXDeviceBindTicket', 'getWXDeviceUnbindTicket', 'startScanWXDevice', 'stopScanWXDevice', 'connectWXDevice', 'disconnectWXDevice', 'sendDataToWXDevice', 'onWXDeviceBindStateChange', 'onWXDeviceStateChange', 'onScanWXDeviceResult', 'onReceiveDataFromWXDevice', 'onWXDeviceBluetoothStateChange', ] }); alert("初始化库结束");}2)：my_openWXDeviceLib()方法打开微信设备，此方法用来判断手机蓝牙或者设备蓝牙是否打开
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
function my_openWXDeviceLib(){ var x=0; WeixinJSBridge.invoke('openWXDeviceLib', {}, function(res){ mlog("打开设备返回："+res.err_msg); if(res.err_msg=='openWXDeviceLib:ok') { if(res.bluetoothState=='off') { showdialog("太着急啦","亲,使用前请先打开手机蓝牙！"); $("#lbInfo").innerHTML="1.请打开手机蓝牙"; $("#lbInfo").css({color:"red"}); x=1; isOver(); }; if(res.bluetoothState=='unauthorized') { showdialog("出错啦","亲,请授权微信蓝牙功能并打开蓝牙！"); $("#lbInfo").html("1.请授权蓝牙功能"); $("#lbInfo").css({color:"red"}); x=1; isOver(); }; if(res.bluetoothState=='on') { //showdialog("太着急啦","亲,请查看您的设备是否打开！"); $("#lbInfo").html("1.蓝牙已打开,未找到设备"); $("#lbInfo").css({color:"red"}); //$("#lbInfo").attr(("style", "background-color:#000"); x=0; //isOver(); }; } else { $("#lbInfo").html("1.微信蓝牙打开失败"); x=1; showdialog("微信蓝牙状态","亲,请授权微信蓝牙功能并打开蓝牙！"); } }); return x; //0表示成功 1表示失败}3）：my_installwxEvents();安装设备事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**V型知识库 www.vxzsk.com****/function my_installwxEvents(){ //1. 安装微信绑定事件 WeixinJSBridge.on('onWXDeviceBindStateChange', function(argv) { //todo }); //2. 扫描到某个设备 WeixinJSBridge.on('onScanWXDeviceResult', function(argv) { //todo }); //3. 手机蓝牙状态改变事件 WeixinJSBridge.on('onWXDeviceBluetoothStateChange', function(argv) { //todo }); }4)：my_onWXDeviceStateChange()监听设备状态变化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var C_DEVICEID=null;function my_onWXDeviceStateChange(){ WeixinJSBridge.on('onWXDeviceStateChange', function(argv) { var deviceStatus=argv.state; if(deviceStatus==="connected") { //$("#lbdeviceid").html(res.deviceInfos[i].deviceId); C_DEVICEID = res.deviceInfos[i].deviceId; $("#lbInfo").html("x.蓝牙设备已连接"); //$("#BLEState").val("connected"); } if(deviceStatus==="connecting") { //$("#lbdeviceid").html(res.deviceInfos[i].deviceId); C_DEVICEID = res.deviceInfos[i].deviceId; $("#lbInfo").html("x.蓝牙设备正连接..."); //$("#BLEState").val("connecting"); } if(deviceStatus==="disconnected") { // $("#lbdeviceid").html(''); C_DEVICEID = ""; $("#lbInfo").html("x.蓝牙设备已断开"); } }); }5）：my_getWXDeviceInfos()获取蓝牙设备信息
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function my_getWXDeviceInfos(){ WeixinJSBridge.invoke('getWXDeviceInfos', {}, function(res){ var len=res.deviceInfos.length; //绑定设备总数量 for(i=0; i<=len-1;i++) { //alert(i + ' ' + res.deviceInfos[i].deviceId + ' ' +res.deviceInfos[i].state); if(res.deviceInfos[i].state==="connected") { $("#lbdeviceid").html(res.deviceInfos[i].deviceId); C_DEVICEID = res.deviceInfos[i].deviceId; $("#lbInfo").html("2.设备已成功连接"); $("#lbInfo").css({color:"green"}); break; } } }); return; }第四、my_onReceiveDataFromWXDevice();接收设备返回的数据
之所以把这个函数单独列出来是因为这个函数比较重要，手机微信和蓝牙设备通信交互数据的返回都靠这个函数来接收。
1
2
3
4
5
6
7
function my_onReceiveDataFromWXDevice(){ WeixinJSBridge.on('onReceiveDataFromWXDevice', function(argv) { mlog("接收的数据-->"+argv.base64Data); });}第五、日志打印mlog函数 和错误提示函数showdialog
1
2
3
4
5
6
function mlog(m){ var log=$('#logtext').val(); //log=log+m; log = m; $('#logtext').val(log);}1
2
3
4
5
6
7
8
9
function showdialog(DialogTitle,DialogContent){ var $dialog = $("#Mydialog"); $dialog.find("#dialogTitle").html(DialogTitle); $dialog.find("#dialogContent").html(DialogContent); $dialog.show(); $dialog.find(".weui_btn_dialog").one("click", function(){ $dialog.hide(); });}第六、效果图
程序运行后，连接状态为设备已连接成功，等我们把蓝牙设备断开后，发现监听设备连接状态的函数已被触发，并返回设备已断开的状态。
0 0
- 微信硬件蓝牙jsapi开发之onWXDeviceStateChange接口实现(12)--监听蓝牙状态变化接口
- 微信硬件蓝牙jsapi开发之sendDataToWXDevice接口和onReceiveDataFromWXDevice接口（11）
- 微信蓝牙设备开发之初步接入微信硬件jsapi接口（4）
- 微信硬件蓝牙jsapi之getWXDeviceInfos接口获取设备deviceid(10)
- 微信硬件蓝牙jsapi开发使用说明(9)
- 微信蓝牙设备开发之初步接入微信硬件jsapi（8）
- 微信jsapi获取网络状态接口开发(第七课)
- 微信jsapi获取网络状态接口开发(第七课)
- 微信硬件蓝牙扫描绑定JSAPI发送数据
- 微信硬件蓝牙扫描绑定JSAPI发送数据
- 【Android】监听蓝牙状态变化
- 微信jsapi扫一扫接口实现(4)
- 微信jsapi扫一扫接口实现(4)
- 初始化微信硬件JSAPI接口库（7）
- 微信硬件蓝牙开发指南
- 微信硬件蓝牙开发指南
- 微信硬件蓝牙开发教程之添加蓝牙设备(1)
- 微信jsapi获取网络状态接口（6）
- C#Winform连接摄像头
- IOS-OC 高德地图自定义锚点+点击事件处理
- android开发之日常
- 客户端直接执行存储过程正常但代码调用慢的问题
- Beautiful Soup4 之table数据提取
- 微信硬件蓝牙jsapi开发之onWXDeviceStateChange接口实现(12)--监听蓝牙状态变化接口
- C++面向对象实验四：超市管理系统
- 使用VideoView播放App中的资源文件
- build.gradle
- 对于清除字符串中空格
- sql,mongoDB批处理语句中间有某几条报异常
- 改类对象的const的状态
- C++const注意点以及用法
- Java NIO详细分析
