本章节主要介绍微信硬件jsapi微信客户端设备绑定状态改变事件，接口名字为onWXDeviceBindStateChange，咱们还是首先看看微信官方文档关于此接口的介绍，如下图所示
其实微信的官方文档说的不是很清楚，这里的参数并不是入参，而是调用这个接口后返回的参数。微信到处给挖坑。
具体实现的js代码：
function my_onWXDeviceBindStateChange(){
//alert("-----------");
WeixinJSBridge.on('onWXDeviceBindStateChange', function(argv){
var deviceStatus=argv.state;
mlog("设备绑定状态改变事件的状态："+deviceStatus);
});
}注意：设备绑定状态改变事件只有在解绑成功，绑定成功的瞬间，会触发。
再次累述整个实现过程
一）springMVC controller方法
//V型知识库原创 www.vxzsk.com
@RequestMapping(value="/wxJsSdkConfig")
public ModelAndView wxJsSdkConfig(HttpServletRequest request,HttpServletResponse response){
String url = request.getRequestURL()+"?"+request.getQueryString();
System.out.println("请求地址"+url);
String jsapiTicket = JsapiTicketUtil.getJSApiTicket();
Map<String,String> map = WeixinUtil.sign(jsapiTicket, url);
request.setAttribute("timestamp", map.get("timestamp"));
request.setAttribute("nonceStr", map.get("nonceStr"));
request.setAttribute("signature", map.get("signature"));
request.setAttribute("appId", AppConst.APP_ID);
return new ModelAndView("/weixin/device/jssdkConfig");
}1，变量jsapiTicket的获取请参考https://www.vxzsk.com/298.html
2，WeixinUtil中的sign方法如下：
/***
* 获取界面调用jsapi的所需参数
* @param jsapi_ticket 凭据
* @param url 界面请求地址
* @return V型知识库 www.vxzsk.com
*/
public static Map<String, String> sign(String jsapi_ticket, String url) {
Map<String, String> ret = new HashMap<String, String>();
String nonce_str = create_nonce_str();
String timestamp = create_timestamp();
String string1;
String signature = "";
//注意这里参数名必须全部小写，且必须有序
string1 = "jsapi_ticket=" + jsapi_ticket +
"&noncestr=" + nonce_str +
"×tamp=" + timestamp +
"&url=" + url;
System.out.println(string1);
try
{
MessageDigest crypt = MessageDigest.getInstance("SHA-1");
crypt.reset();
crypt.update(string1.getBytes("UTF-8"));
signature = byteToHex(crypt.digest());
}
catch (NoSuchAlgorithmException e)
{
e.printStackTrace();
}
catch (UnsupportedEncodingException e)
{
e.printStackTrace();
}
ret.put("url", url);
ret.put("jsapi_ticket", jsapi_ticket);
ret.put("nonceStr", nonce_str);
ret.put("timestamp", timestamp);
ret.put("signature", signature);
return ret;
}
private static String byteToHex(final byte[] hash) {
Formatter formatter = new Formatter();
for (byte b : hash)
{
formatter.format("%02x", b);
}
String result = formatter.toString();
formatter.close();
return result;
}
private static String create_nonce_str() {
return UUID.randomUUID().toString();
}
private static String create_timestamp() {
return Long.toString(System.currentTimeMillis() / 1000);
}3, AppConst.APP_ID的值其实是一个固定值，替换为自己公众号中的appid即可。
二）新建jssdkConfig.jsp页面
1，其实本界面就是H5界面，jssdkConfig.jsp界面中，是如何调用微信客户端设备绑定状态改变事件onWXDeviceBindStateChange 的呢，
/****
设备绑定状态改变事件
author V型知识库 www.vxzsk.com
//设备绑定状态改变事件（解绑成功，绑定成功的瞬间，会触发）
***/
function my_onWXDeviceBindStateChange(){
//alert("-----------");
WeixinJSBridge.on('onWXDeviceBindStateChange', function(argv){
var deviceStatus=argv.state;
mlog("设备绑定状态改变事件的状态："+deviceStatus);
});
}2，完整jssdkConfig.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>微信蓝牙设备-V型知识库www.vxzsk.com</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;">当前设备: </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">获取设备ID</button><br>
<button class="weui_btn weui_btn weui_btn_warn" onclick="my_onWXDeviceBindStateChange()">设备绑定状态改变事件</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>
</body>
<script type="text/javascript">
var C_DEVICEID=null;
jQuery(document).ready(function(){
//初始化库
loadXMLDoc();
//初始化库结束
//点击获取设备按钮的函数 开始
$("#CallGetWXrefresh").on("click",function(e){
//1. 打开微信设备
my_openWXDeviceLib();
//2. 获取设备信息
my_getWXDeviceInfos();
//3. 设备绑定改变事件
my_onWXDeviceBindStateChange();
});
//点击获取设备按钮的函数 结束
});
//初始化 微信硬件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);
});
/******************************分割线************************************************/
/*********************************************************
* 打开微信设备
* 作者：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
* 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")
{
alert(C_DEVICEID);
C_DEVICEID = res.deviceInfos[i].deviceId;
$("#lbInfo").html("2.设备已成功连接");
$("#lbInfo").css({color:"green"});
break;
}
}
});
return;
}
/****
设备绑定状态改变事件
//设备绑定状态改变事件（解绑成功，绑定成功的瞬间，会触发）
***/
function my_onWXDeviceBindStateChange(){
//alert("-----------");
WeixinJSBridge.on('onWXDeviceBindStateChange', function(argv){
var deviceStatus=argv.state;
mlog("设备绑定状态改变事件的状态："+deviceStatus);
});
}
//打印日志
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>根据上述步骤，复制代码即可成功实现，本案例经过作者验证。
此文章本站原创，地址 https://www.vxzsk.com/805.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程