微信硬件蓝牙jsapi开发之onWXDeviceStateChange接口实现(12)--监听蓝牙状态变化接口

文章来源 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;" >当前设备:&nbsp</ 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;" >状态信息:&nbsp</ 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();
    });
}

第六、效果图


程序运行后,连接状态为设备已连接成功,等我们把蓝牙设备断开后,发现监听设备连接状态的函数已被触发,并返回设备已断开的状态。


评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值