扫描绑定设备连接设备并调用微信jsapi接口获取设备deviceid(第八课)

2017年08月15日 10:35 | 10379次浏览作者原创版权保护

我们在微信蓝牙设备使用jsapi说明这节课已经说的很明白了，以后案例是按照红色箭头的走向，所以接下来也是这样子。

完整微信硬件接入案例源码:点我下载案例源码

第一、扫描二维码绑定蓝牙设备

1)、把我们在第三课生成的二维码用二维码生成器生成图片并打开。

2)、打开手机蓝牙并且打开手机微信扫一扫，扫描二维码图片会出现如图：

3),点击绑定设备然后进入公众账号，进入公众账号之后，我们在微信的头部会看到"未连接设备"或"已连接1个设备"

4）、如果没有出现已连接1个设备或者未连接设备可能是您授权的二维码和设备mac地址不匹配，还有一种情况就是手机蓝牙不支持ble模式，在绑定设备后，记得打开设备。

第二、根据微信蓝牙接入官方文档编写调用微信jsapi代码。

js代码：

<script type="text/javascript">
 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();
     
     
      
  });
  
});
 //微信硬件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);
});

/******************************分割线************************************************/
/*********************************************************
* 打开微信设备 
* 作者：V型知识库 www.vxzsk.com 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表示失败
}


/*********************************************************
* 装载微信事件处理
* 作者：V型知识库 www.vxzsk.com 2016-04-04
* my_installwxEvents
* 入口参数：无
* 出口参数：无
*********************************************************/
 function my_installwxEvents(){
   //1. 安装微信绑定事件
   WeixinJSBridge.on('onWXDeviceBindStateChange', function(argv) {
       //todo
		}); 
   //2. 扫描到某个设备      
   WeixinJSBridge.on('onScanWXDeviceResult', function(argv) {
        //todo
	    });
   //3. 手机蓝牙状态改变事件    
   WeixinJSBridge.on('onWXDeviceBluetoothStateChange', function(argv) {
	    //todo
        });         
 }
 
/*********************************************************
* 接收到数据事件
* 作者：V型知识库 www.vxzsk.com 2016-04-04
* my_onReceiveDataFromWXDevice
* 入口参数：无
* 出口参数：无
*********************************************************/ 
function my_onReceiveDataFromWXDevice(){
	
    WeixinJSBridge.on('onReceiveDataFromWXDevice', function(argv) {
    mlog("接收的数据-->"+argv.base64Data);
		//var Bytes=base64_to_bytes_array(argv.base64Data);
		//alert("硬件设备返回的base64数据"+argv.base64Data);
      //  mlog("接收的数据-->"+pHex(base64_to_bytes_array(argv.base64Data)));
       // recevResult=checkReceiveData(Bytes);
       
      
	  });
}
 


/**********************************************
* 取得微信设备信息
* 作者：V型知识库 www.vxzsk.com 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();
   });
}
</script>

loadXMLDoc();这个方法中的四个参数咱们在前两节已经讲过，如果读者不明白可翻看前两节在这里不在累述

第7行是微信蓝牙接入的步骤，分为四步，第一步打开微信设备、第二步安装设备事件、第三安装设备接收事件、其中有个步骤我注释掉了主要因为这个接口经过测试很不稳定，不知是微信原因还是我设备或者代码原因。第四呢就是刷新设备信息。

第三、点击菜单进入界面，点击获取设备，获取设备信息和日志状态等

第四、完整jsp代码如下

<%@ 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 type="text/javascript" src="<%=basePath %>/resource/weixin/jquery_mobile/js/jquery-2.0.3.min.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>
            
            
        </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>
  <span id="trueCardRandom"></span>

</div>



</body> 
<script type="text/javascript">
 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();
     
     
      
  });
  
});
 //微信硬件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);
});

/******************************分割线************************************************/
/*********************************************************
* 打开微信设备 
* 作者：V型知识库 www.vxzsk.com 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表示失败
}


/*********************************************************
* 装载微信事件处理
* 作者：V型知识库 www.vxzsk.com 2016-04-04
* my_installwxEvents
* 入口参数：无
* 出口参数：无
*********************************************************/
 function my_installwxEvents(){
   //1. 安装微信绑定事件
   WeixinJSBridge.on('onWXDeviceBindStateChange', function(argv) {
       //todo
		}); 
   //2. 扫描到某个设备      
   WeixinJSBridge.on('onScanWXDeviceResult', function(argv) {
        //todo
	    });
   //3. 手机蓝牙状态改变事件    
   WeixinJSBridge.on('onWXDeviceBluetoothStateChange', function(argv) {
	    //todo
        });         
 }
 
/*********************************************************
* 接收到数据事件
* 作者：V型知识库 www.vxzsk.com 2016-04-04
* my_onReceiveDataFromWXDevice
* 入口参数：无
* 出口参数：无
*********************************************************/ 
function my_onReceiveDataFromWXDevice(){
	
    WeixinJSBridge.on('onReceiveDataFromWXDevice', function(argv) {
    mlog("接收的数据-->"+argv.base64Data);
		//var Bytes=base64_to_bytes_array(argv.base64Data);
		//alert("硬件设备返回的base64数据"+argv.base64Data);
      //  mlog("接收的数据-->"+pHex(base64_to_bytes_array(argv.base64Data)));
       // recevResult=checkReceiveData(Bytes);
       
      
	  });
}
 


/**********************************************
* 取得微信设备信息
* 作者：V型知识库 www.vxzsk.com 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();
   });
}
</script>
</html>

第五、说明

用户打开微信，打开手机蓝牙，然后点击菜单进入h5界面并点击获取设备按钮获取设备信息，其中用户点击菜单跳转H5界面这个代码流程请看https://www.vxzsk.com/82.html 这一章节。

小说《我是全球混乱的源头》

此文章本站原创，地址 https://www.vxzsk.com/106.html 转载请注明出处！谢谢！

感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程

上一篇：程序员笑话系列(2)智商低于110的别看了,看了你也不懂下一篇：微信公众号支付开发教程之页面调用微信支付js完成支付过程(补充1)

微信蓝牙开发

扫描绑定设备连接设备并调用微信jsapi接口获取设备deviceid(第八课)

2017年08月15日 10:35 | 10379次浏览 作者原创 版权保护

2017年08月15日 10:35 | 10379次浏览作者原创版权保护