微信硬件jsapi接口发送和接收设备数据(6)

来源:互联网 发布:sql语句添加字段 编辑:程序博客网 时间:2024/05/08 07:38

本文来源: http://www.vxzsk.com/157.html V型知识库

关于微信硬件jsapi接口发送和接收蓝牙设备数据前几天已经写过一篇,感觉写的博客很乱,初学者可能读了之后也摸不着头脑,所以这节课尽量说的更有逻辑更详细,见谅哈,语文功底不是很好。尽量表达清楚吧。

整个流程大体为1,添加设备 2,设备授权 3,绑定设备 4,连接设备发送指令到设备并接收设备数据

1,2,3流程前几章节已经说得很详细了,在这里不在累述,如果想了解更多,请初学者点击本页面左上角的菜单。

咱们重点介绍第四步骤,通过微信硬件jsapi接口发送指令到设备并接收设备的响应数据。(发送和接收都在H5端)。

第一,引入javascript文件

1
2
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
 <script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"> </script>

说明:第一行引入的是依赖jQuery的库。 第二行引入微信硬件jsapi的js库。

第二,<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
//V型知识库 www.vxzsk.com
<body ontouchstart>
<!--标题行-->
<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>
            <button class="weui_btn  weui_btn_primary" id="icFuWei" >复位</button>
  
        </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代码最后几行 也就是id为myparams的代码块为初始微信硬件JSAPI所必须的参数,具体如何获取请查看本界面左上角菜单。

第三、javascript代码

1,jQuery中的方法

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
//V型知识库 www.vxzsk.com
jQuery(document).ready(function(){
  //初始化库 
 loadXMLDoc();
 //初始化库结束
 //点击获取设备按钮的函数 开始
 $("#CallGetWXrefresh").on("click",function(e){  
    
     //1. 打开微信设备 
     my_openWXDeviceLib();
     //2. 获取设备信息
     my_getWXDeviceInfos();
     //3. 接收设备数据
     my_onReceiveDataFromWXDevice();
 });
 //点击获取设备按钮的函数 结束 
  
 /***
   * IC卡复位
   */
  $("#icFuWei").on("click",function(e){
         alert("开始"+C_DEVICEID);
          
         var Bytes=CheckBalance();
         var x=senddataBytes(Bytes,C_DEVICEID);
           
         
    });
     
   
 });

说明:1,loadXMLDoc();方法为初始化微信硬件JSAPI。2,my_openWXDeviceLib() 打开微信设备,用来判断手机是否已经打开蓝牙。3,my_getWXDeviceInfos()获取设备信息,也就是获取设备的deviceid。4,my_onReceiveDataFromWXDevice();接收设备的响应数据,以上四个步骤的初始化顺序不得改变。

1)、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("初始化库结束");
}

说明:四个参数必填,而且是在跳转本页面前的方法里初始化好存储到request对象中。

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
43
44
45
46
47
48
49
/*********************************************************
* 打开微信设备
* 作者:V型知识库  2016-04-04 www.vxzsk.com
* my_openWXDeviceLib
* 入口参数:无
* 出口参数:0表示打开成功;1表示打开失败
*********************************************************/
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_getWXDeviceInfos()代码 获取设备信息

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
/**********************************************
* 取得微信设备信息
* 作者:2016-04-04 V型知识库 www.vxzsk.com
* my_getWXDeviceInfos
* 入口参数:无
* 出口参数:返回一个已经链接的设备的ID
**********************************************/
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;    
}

说明:此方法此时已经获取到我们给设备授权的时候的deviceid了。

4、my_onReceiveDataFromWXDevice()代码 接收蓝牙设备响应数据

/*********************************************************
* 接收到数据事件
* 作者:V型知识库 www.vxzsk.com
* my_onReceiveDataFromWXDevice
* 入口参数:无
* 出口参数:无
*********************************************************/ 
function my_onReceiveDataFromWXDevice(){
  WeixinJSBridge.on('onReceiveDataFromWXDevice'function(argv) {
    mlog("接收的数据-->"+argv.base64Data);
 });
}

说明:mlog是打印输出的js一个方法,把设备数据输出到页面中。蓝牙设备响应的数据为base64编码,需开发者反编

译后方可识别。

mlog方法


//打印日志
function mlog(m){
    var log=$('#logtext').val();
    //log=log+m;
    log = m;
    $('#logtext').val(log);
}


第四、发送指令到设备 

微信硬件jsapi发送指令函数


/*******************************************************************
 * 发送数据函数
 * 作者:V型知识库 www.vxzsk.com 2016-04-04
 * 入口参数:
 *     cmdBytes: 需要发送的命令字节
 *     selDeviceID: 选择的需要发送设备的ID 
 * 出口参数:
 *     返回: 0表示发送成功;1表示发送失败
 *     如果成功,则接收事件应该能够收到相应的数据
*******************************************************************/
function senddataBytes(cmdBytes,selDeviceID){
  //1. 如果输入的参数长度为零,则直接退出
  if(cmdBytes.length<=0){return 1};
 // alert("向微信发送指令数据");
  //1.1 如果设备ID为空,则直接返回
  if(selDeviceID.length<=0){return 1};
  //2. 发送数据
  var x=0;
  WeixinJSBridge.invoke('sendDataToWXDevice', {
            "deviceId":selDeviceID, 
            "base64Data":bytes_array_to_base64(cmdBytes)
            }, function(res){
                //alert("向微信发送指令数据返回的状态"+res.err_msg);
            if(res.err_msg=='sendDataToWXDevice:ok')
               {
                  
                 x=0;
                 alert("数据发送成功");
               }  
            else
               {
                  
                 x=1; 
                 alert("数据发送失败");
               
        });  
  return x;      
}

一般硬件设备接收的是16进制的指令数据


 function CheckBalance(){
     var Bytes=new Array();
      
        Bytes[0]=0x02;
          
        Bytes[1]=0x00;
        Bytes[2]=0x05;
          
        Bytes[3]=0x76;
        Bytes[4]=0x89;
          
        Bytes[5]=0x03;
        Bytes[6]=0x74;
      return Bytes;
      
  }

根据微信官方文档说明,发送的指令数据必须是base64编码,所以还必须有个转换方法。


/**
 *  Byte数组转Base64字符,原理同上 
 * @Param [0x00,0x00]
 * @return Base64字符串
 **/
function bytes_array_to_base64(array) {
    if (array.length == 0) {
        return "";
    }
    var b64Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
    var result = "";
    // 给末尾添加的字符,先计算出后面的字符
    var d3 = array.length % 3;
    var endChar = "";
    if (d3 == 1) {
        var value = array[array.length - 1];
        endChar = b64Chars.charAt(value >> 2);
        endChar += b64Chars.charAt((value << 4) & 0x3F);
        endChar += "==";
    else if (d3 == 2) {
        var value1 = array[array.length - 2];
        var value2 = array[array.length - 1];
        endChar = b64Chars.charAt(value1 >> 2);
        endChar += b64Chars.charAt(((value1 << 4) & 0x3F) + (value2 >> 4));
        endChar += b64Chars.charAt((value2 << 2) & 0x3F);
        endChar += "=";
    }
  
    var times = array.length / 3;
    var startIndex = 0;
    // 开始计算
    for (var i = 0; i < times - (d3 == 0 ? 0 : 1); i++) {
        startIndex = i * 3;
  
        var S1 = array[startIndex + 0];
        var S2 = array[startIndex + 1];
        var S3 = array[startIndex + 2];
  
        var s1 = b64Chars.charAt(S1 >> 2);
        var s2 = b64Chars.charAt(((S1 << 4) & 0x3F) + (S2 >> 4));
        var s3 = b64Chars.charAt(((S2 & 0xF) << 2) + (S3 >> 6));
        var s4 = b64Chars.charAt(S3 & 0x3F);
        // 添加到结果字符串中
        result += (s1 + s2 + s3 + s4);
    }
  
    return result + endChar;
}

好了,至此关于微信硬件jsapi发送数据到设备和接收蓝牙设备响应数据的代码已经编写完毕。

第五、效果图


第六 完整的jsp页面代码

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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
8
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
session.setAttribute("basePath",basePath);
%>
<!DOCTYPE html>
<html class="ie"><!--<![endif]-->
<head>
<meta charset="utf-8">
  <title>微信蓝牙设备</title>
  <meta name="viewport" content="width=320.1,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
  
  <link rel="stylesheet" href="<%=basePath %>/resource/device/weui.min.css?what=0">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
  <script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"> </script>
 
  
</head>
<body ontouchstart>
<!--标题行-->
<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>
            <button class="weui_btn  weui_btn_primary" id="icFuWei" >IC卡复位</button>
  
        </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>
 
</body
<script type="text/javascript">
 jQuery(document).ready(function(){
  //初始化库 
 loadXMLDoc();
 //初始化库结束
 //点击获取设备按钮的函数 开始
 $("#CallGetWXrefresh").on("click",function(e){  
    
     //1. 打开微信设备 
     my_openWXDeviceLib();
     //2. 获取设备信息
     my_getWXDeviceInfos();
     //3. 接收设备数据
     my_onReceiveDataFromWXDevice();
 });
 //点击获取设备按钮的函数 结束 
  
 /***
   * IC卡复位
   */
  $("#icFuWei").on("click",function(e){
         alert("开始复位"+C_DEVICEID);
          
         var Bytes=CheckBalance();
         var x=senddataBytes(Bytes,C_DEVICEID);
           
         if(x===0){$("#lbInfo").html('x.IC卡复位完成')}
         else {$("#lbInfo").html('x.查询卡复位失败')};
    });
     
   
 });
  
 //初始化 微信硬件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("初始化库结束");
}
//判断调用jsapi返回状态 true表示成功
wx.error(function (res) {
  alert("调用微信jsapi返回的状态:"+res.errMsg);
});
 
/******************************分割线************************************************/
/*********************************************************
* 打开微信设备
* 作者:wxh 2016-04-04
* my_openWXDeviceLib
* 入口参数:无
* 出口参数:0表示打开成功;1表示打开失败
*********************************************************/
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表示失败
}
 
 
 
 
 
/**********************************************
* 取得微信设备信息
* 作者:2016-04-04
* my_getWXDeviceInfos
* 入口参数:无
* 出口参数:返回一个已经链接的设备的ID
**********************************************/
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;    
}
//打印日志
function mlog(m){
    var log=$('#logtext').val();
    //log=log+m;
    log = m;
    $('#logtext').val(log);
}
 
/***************************************************************
 * 显示提示信息
***************************************************************/
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();
   });
}
 
 
/*******************************************************************
 * 发送数据函数
 * 作者:V型知识库 www.vxzsk.com 2016-04-04
 * 入口参数:
 *     cmdBytes: 需要发送的命令字节
 *     selDeviceID: 选择的需要发送设备的ID 
 * 出口参数:
 *     返回: 0表示发送成功;1表示发送失败
 *     如果成功,则接收事件应该能够收到相应的数据
*******************************************************************/
function senddataBytes(cmdBytes,selDeviceID){
  //1. 如果输入的参数长度为零,则直接退出
  if(cmdBytes.length<=0){return 1};
 // alert("向微信发送指令数据");
  //1.1 如果设备ID为空,则直接返回
  if(selDeviceID.length<=0){return 1};
  //2. 发送数据
  var x=0;
  WeixinJSBridge.invoke('sendDataToWXDevice', {
            "deviceId":selDeviceID, 
            "base64Data":bytes_array_to_base64(cmdBytes)
            }, function(res){
                //alert("向微信发送指令数据返回的状态"+res.err_msg);
            if(res.err_msg=='sendDataToWXDevice:ok')
               {
                  
                 x=0;
                 alert("数据发送成功");
               }  
            else
               {
                  
                 x=1; 
                 alert("数据发送失败");
               
        });  
  return x;      
}
 
/*********************************************************
* 接收到数据事件
* my_onReceiveDataFromWXDevice
* 入口参数:无
* 出口参数:无
*********************************************************/ 
function my_onReceiveDataFromWXDevice(){
      
    WeixinJSBridge.on('onReceiveDataFromWXDevice', function(argv) {
    mlog("接收的数据-->"+argv.base64Data);
 });
}
 
 
      
    function CheckBalance(){
     var Bytes=new Array();
      
        Bytes[0]=0x02;
          
        Bytes[1]=0x00;
        Bytes[2]=0x07;
          
        Bytes[3]=0x79;
        Bytes[4]=0x80;
          
        Bytes[5]=0x03;
        Bytes[6]=0x79;
      return Bytes;
      
  }
   
  /**
 *  Byte数组转Base64字符,原理同上 
 * @Param [0x00,0x00]
 * @return Base64字符串
 **/
function bytes_array_to_base64(array) {
    if (array.length == 0) {
        return "";
    }
    var b64Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
    var result = "";
    // 给末尾添加的字符,先计算出后面的字符
    var d3 = array.length % 3;
    var endChar = "";
    if (d3 == 1) {
        var value = array[array.length - 1];
        endChar = b64Chars.charAt(value >> 2);
        endChar += b64Chars.charAt((value << 4) & 0x3F);
        endChar += "==";
    } else if (d3 == 2) {
        var value1 = array[array.length - 2];
        var value2 = array[array.length - 1];
        endChar = b64Chars.charAt(value1 >> 2);
        endChar += b64Chars.charAt(((value1 << 4) & 0x3F) + (value2 >> 4));
        endChar += b64Chars.charAt((value2 << 2) & 0x3F);
        endChar += "=";
    }
  
    var times = array.length / 3;
    var startIndex = 0;
    // 开始计算
    for (var i = 0; i < times - (d3 == 0 ? 0 : 1); i++) {
        startIndex = i * 3;
  
        var S1 = array[startIndex + 0];
        var S2 = array[startIndex + 1];
        var S3 = array[startIndex + 2];
  
        var s1 = b64Chars.charAt(S1 >> 2);
        var s2 = b64Chars.charAt(((S1 << 4) & 0x3F) + (S2 >> 4));
        var s3 = b64Chars.charAt(((S2 & 0xF) << 2) + (S3 >> 6));
        var s4 = b64Chars.charAt(S3 & 0x3F);
        // 添加到结果字符串中
        result += (s1 + s2 + s3 + s4);
    }
  
    return result + endChar;
}
    
</script>
</html>
0 0
原创粉丝点击