微信硬件蓝牙扫描绑定JSAPI发送数据

最新推荐文章于 2021-10-20 11:27:01 发布

newtelcom

最新推荐文章于 2021-10-20 11:27:01 发布

阅读量1.5k

点赞数

分类专栏： Java Web 文章标签：微信蓝牙硬件

Java Web 专栏收录该内容

60 篇文章

订阅专栏

http://blog.youkuaiyun.com/wangbo54979/article/details/51783016#comments

这是后台接口调用微信文档 http://iot.weixin.qq.com/wiki/document-2_11.html

这是前台JS接口调用微信文档 http://iot.weixin.qq.com/wiki/index.html

首先执行6步操作成功在执行以下操作：

0：去微信后台开通设备功能然后添加一个设备注意添加完设备点击产品管理旁边的设置找到设备连接状态点击启用如果不启用在微信端头部看不到状态

1：在微信后台调式工具里或者在java后台自己调用接口申请获取设备二维码已经设备ID 我这里采用的java 就直接拿java说事了

接口 https://api.weixin.qq.com/device/getqrcode?access_token="+ACCESS_TOKEN+"&product_id=22035 这个ID不是设备ID是在微信后台添加的产品ID 调用此接口会返回咱们需要的设备ID 已经二维码

2:问硬件工程师拿到设备的MAC码地址

3:将mac地址和设备授权可去微信后台调式工具直接授权也可以直接java后台写调用发请求授权

{
  "device_num": "1", //数量
  "device_list": [
  {
  "id": "xxxxxxx", //刚刚获取到的产品ID
"mac": "68C90B145B7C", //MAC码
"connect_protocol": "3", //3表示BLE蓝牙协议
  "auth_key": "", //不加密不填
"close_strategy": "1", //1：退出公众号页面时即断开连接
"conn_strategy": "1", //1：（第1bit置位）在公众号对话页面，不停的尝
  "crypt_method": "0", //1：AES加密
  "auth_ver": "0", //加密版本，0是不加密
  "manu_mac_pos": "-1", /-1：MAC地址在尾部
  "ser_mac_pos": "-2"//-2：表示serialnumber不包含mac地址
  }
],

”op_type“：1
"product_id": "产品ID"
}

如果是在微信后台授权复制上面获取改改如果是java后台那就组装这样的JSON数据

这是接口https://api.weixin.qq.com/device/authorize_device?access_token="+ACCESS_TOKEN+“；然后发请求的时候带上组装的参数

如果授权成功会返回 OK

4:以上工作全部完成开始拿着二维码网址去生成二维码然后用微信扫描绑定设备如果设备在旁边会显示已连接

具体操作看以下 3.3 示例怎么生成怎么操作截图都有

5:扫完二维码微信上显示如果是已连接恭喜你成功了然后在开始下面的操作写页面调用JS接口什么的

这里说明一下安卓如果成功提示的是已连接1个设备苹果是已连接

这里是后台 java获取设备ID 二维码设备授权获取签名需要的那个字段ticket

public static void main(String[] args) {  
    //获取token  
    WeixinOauth2Token dd = CommonUtil.getAccess_Token(Config.APPID,  
            Config.APPSECRET);  
    String ACCESS_TOKEN = dd.getAccessToken();  
  
    //获取设备ID和二维码地址  
    String url = "https://api.weixin.qq.com/device/getqrcode?access_token="+ACCESS_TOKEN+"&product_id=22035";  
    JSONObject object = CommonUtil.httpsRequest(url, "POST", null);  
    System.err.println(object.toString());  
    //设备ID    
    String deviceId = object.getString("deviceid");  
    //二维码  
    String qrticket = object.getString("qrticket");  
    //测试写死的MAC码  
    String mac = "544A1629E774";  
    System.err.println(qrticket);  
    String params="{\"device_num\":\"1\",\"device_list\":[{"    
               +"\"id\":\""+deviceId+"\","    
               +"\"mac\":\""+mac+"\","    
                +"\"connect_protocol\":\"3\","    
                +"\"auth_key\":\"\","    
                +"\"close_strategy\":\"1\","    
                +"\"conn_strategy\":\"1\","    
                +"\"crypt_method\":\"0\","    
                +"\"auth_ver\":\"0\","    
                +"\"manu_mac_pos\":\"-1\","    
                +"\"ser_mac_pos\":\"-2\","    
                +"\"ble_simple_protocol\": \"0\""    
                + "}],"    
            //修改每次进来都是修改 避免输入一样的MAC导致 提示数据已存在  
                +"\"op_type\":\"1\","  
             //因为是测试  这里 产品ID  我就直接写死了  
                +"\"product_id\":\"22035\""  
               + "}";    
    //授权设备  
    String urls = "https://api.weixin.qq.com/device/authorize_device?access_token="+ACCESS_TOKEN;  
    JSONObject objectw = CommonUtil.httpsRequest(urls, "POST", params);  
    System.err.println(objectw.toString());  
    //获取ticket  到时候 开始写页面调用JS  config得时候  里面签名 需要这个字段来签名  
    String msg = CommonUtil.getticket(ACCESS_TOKEN);  
    System.err.println(msg);}

//强制解除设备和用户绑定  
        String params="{\"device_id\":\"gh_b9284c11a1a2_xxxxxxxxxx\","   
                        +"\"openid\":\"xxxxxxxxxxxxxxx\""  
                    + "}";    
        //https://api.weixin.qq.com/device/compel_bind?access_token  这是强制绑定设备  下面是强制解绑  
        String urls1 = "https://api.weixin.qq.com/device/compel_unbind?access_token="+ACCESS_TOKEN;  
        JSONObject objectw = CommonUtil.httpsRequest(urls1, "POST", params);  
        System.err.println(objectw);

3.3 http://pl.iqr.cc/ 这是个生产二维码的网站微信指定的进去这个网站生成二维码用微信扫描然后他会提示
你是否绑定设备你点击是的话进入公众号后会自动连接设备的如果设备在边上

3.4以下是生成二维码的过程图：

以下是我的测试页面可参考业务逻辑需要手动修改

<%@page language="java" contentType="text/html; charset=UTF-8"%>  
<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<meta http-equiv="X-UA-Compatible" content="IE=edge">  
<meta name="viewport"  
    content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">  
<meta name="apple-mobile-web-app-capable" content="yes">  
<meta name="apple-mobile-web-app-status-bar-style" content="black">  
<meta name="format-detection" content="telephone=no">  
<title>测试蓝牙1</title>  
<link rel="stylesheet" type="text/css" href="css/common.css">  
<script src="js/jquery-1.10.2.min.js"></script>  
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>  
<style type="text/css">  
.wdbll4 {  
    margin-top: 15px;  
}  
  
.grxx_top_biaoge td {  
    text-align: center;  
}  
</style>  
</head>  
<body id="activity-detail" class="zh_CN ">  
    <div class="wdbll4" align="center"  
        style="padding-left: 10px; padding-right: 10px;">  
        <div style="width: 95%; margin: 0 auto; text-align: center" id="scan">  
            <div class='aui-btn aui-btn-info aui-btn-block' onclick="scan();"  
                id="startScanWXDevice">搜索蓝牙</div>  
        </div>  
    </div>  
    <div class="wdbll4" align="center"  
        style="padding-left: 10px; padding-right: 10px;">  
        <div style="width: 95%; margin: 0 auto; text-align: center" id="scan">  
            <div class='aui-btn aui-btn-info aui-btn-block' onclick="stopSacn();"  
                id="stopScanWXDevice">停止搜索</div>  
        </div>  
    </div>  
    <div class="wdbll4" align="center"  
        style="padding-left: 10px; padding-right: 10px;">  
        <div style="width: 95%; margin: 0 auto; text-align: center" id="scan">  
            <div class='aui-btn aui-btn-info aui-btn-block' onclick="getInfo()">获取设备信息</div>  
        </div>  
    </div>  
    <div class="wdbll4" align="center"  
        style="padding-left: 10px; padding-right: 10px;">  
        <div style="width: 95%; margin: 0 auto; text-align: center" id="scan">  
            <div class='aui-btn aui-btn-info aui-btn-block' onclick="bleConn()">连接蓝牙</div>  
        </div>  
    </div>  
    <div class="wdbll4" align="center"  
        style="padding-left: 10px; padding-right: 10px;">  
        <div style="width: 95%; margin: 0 auto; text-align: center" id="scan">  
            <div class='aui-btn aui-btn-info aui-btn-block' onclick="sendData()">发送数据</div>  
        </div>  
    </div>  
    <div id="initBle"></div>  
</body>  
<script type="text/javascript">  
    function BleManage() {  
    };  
    //在它的原型上添加方法    
    BleManage.prototype = {  
        //搜索蓝牙    
        bleInit_sAcn : function() {  
            wx.invoke('startScanWXDevice', {  
                //  'connType' : 'blue',    
                'btVersion' : 'ble'  
            }, function(res) {  
                console.log('开始扫描设备：', res);  
                $("#initBle").append("<p>开始扫描设备：" + res.err_msg + "</p>");  
            });  
        },  
        //关不搜索蓝牙    
        bleInit_stopSacn : function() {  
            wx.invoke('stopScanWXDevice', {  
                'connType' : 'blue'  
            }, function(res) {  
                $("#initBle").append("<p>停止扫描设备：" + res.err_msg + "</p>");  
                console.log('停止扫描设备：', res);  
                //alert(res.err_msg);      
            });  
        },  
        //获取设备信息    
        bleInit_getDev_Info : function() {  
            wx.invoke('getWXDeviceInfos', {  
                'connType' : 'ble'  
            }, function(res) {  
                alert(JSON.stringify(res))  
            });  
        },  
        //连接兰芽    
        bleInit_connBle : function() {  
            wx.invoke('connectWXDevice', {  
                'deviceId' : 'gh_b9284c11a1a2_b806ab8c3e6c1b33',  
                'connType' : 'ble'  
            }, function(res) {  
                alert(JSON.stringify(res))  
            });  
        },  
        //发送数据    
        bleInit_sendData : function() {  
            wx  
                    .invoke(  
                            'sendDataToWXDevice',  
                            {  
                                'deviceId' : '',  
                                'connType' : 'ble',  
                                'base64Data' : 'MDAwMEZGRjItMDAwMC0xMDAwLTgwMDAtMDA4MDVGOUIzNEZC'  
                            }, function(res) {  
                                alert(JSON.stringify(res))  
                            });  
        },  
        //初始化微信配置    
        bleInit_callback_ : function() {  
            //刚刚开测试 建议这4个值 直接在页面上写死    
            //动态获取签名的时候才建议 使用下面 ready里面的ajax    
            /* 
            var appId = data.appId;   
            var timestamp = data.timestamp;   
            var nonceStr = data.nonceStr;   
            var signature = data.signature;  6eee7ee157ea0fbe3bb92e11e12357c696933b9e 
             */  
            wx.config({  
                beta : true, //坑：这个很重要，必须配置这个为true,才能调用微信的硬件API  
                debug : true, //是否开启调试模式，会自动弹一些消息框显示微信返回的数据  
                appId : "", //让后台返回appid  
                timestamp : "1467363034", //让后台返回生成证书时用的时间戳  
                nonceStr : "ByqsO2DGvi6tl0ftNcrexpxXr9gVlyLM", //让后台返回生成证书时用的随机串  
                signature : "beea321841612b40ccb44b326b20f3572d75bd3a", //让后台返回已当前URL地址生成的证书  
                jsApiList : [ //需要调用的接口，都得在这里面写一遍      
                "openWXDeviceLib",//初始化设备库（只支持蓝牙设备）      
                "closeWXDeviceLib",//关闭设备库（只支持蓝牙设备）      
                "getWXDeviceInfos",//获取设备信息（获取当前用户已绑定的蓝牙设备列表）      
                "sendDataToWXDevice",//发送数据给设备      
                "startScanWXDevice",//扫描设备（获取周围所有的设备列表，无论绑定还是未被绑定的设备都会扫描到）      
                "stopScanWXDevice",//停止扫描设备      
                "connectWXDevice",//连接设备      
                "disconnectWXDevice",//断开设备连接      
                "getWXDeviceTicket",//获取操作凭证      
  
                //下面是监听事件：      
                "onWXDeviceBindStateChange",//微信客户端设备绑定状态被改变时触发此事件      
                "onWXDeviceStateChange",//监听连接状态，可以监听连接中、连接上、连接断开      
                "onReceiveDataFromWXDevice",//接收到来自设备的数据时触发      
                "onScanWXDeviceResult",//扫描到某个设备时触发      
                "onWXDeviceBluetoothStateChange",//手机蓝牙打开或关闭时触发      
                ]  
            });  
            wx.ready(function() {  
                wx.invoke('openWXDeviceLib', {  
                // 'brandUserName' : '',  
                // 'connType':'blue'  
                }, function(res) {  
                    $("#initBle").append("<p>初始化设备库：" + res.err_msg + "</p>");  
                    if (res.bluetoothState == "off") {  
                        alert("请先开启手机蓝牙");  
                        $("#initBle").append("<p>请先开启手机蓝牙</p>");  
  
                    }  
                });  
                wx.invoke('getWXDeviceInfos', {  
                    'connType' : 'blue'  
                }, function(res) {  
                    $("#initBle").append("<p>获取我的设备：" + res.err_msg + "</p>");  
                });  
  
                wx.on('onScanWXDeviceResult', function(res) {  
                    var ret_ = res.devices;  
                    for (var i = 0; i < ret_.length; i++) {  
                        var macid = JSON.stringify(res.devices[i].deviceId)  
                                .replace(/\"/g, "");  
                        //给扫描到的设备添加点击事件  
                        $("#initBle").append(  
                                "<button onclick=\"bindBle('" + macid  
                                        + "')\">扫描到设备：" + macid + "</button>");  
                    }  
                });  
                //手机蓝牙状态改变时触发 （这是监听事件的调用方法，注意，监听事件都没有参数）      
                wx.on('onWXDeviceBluetoothStateChange', function(res) {  
                    //把res输出来看吧      
                    $("#initBle").append(  
                            "<p>蓝牙状态变更：" + JSON.stringify(res) + "</p>");  
                });  
                //设备绑定状态改变事件（解绑成功，绑定成功的瞬间，会触发）      
                wx.on('onWXDeviceBindStateChange', function(res) {  
  
                    $("#initBle").append(  
                            "<p>绑定状态变更：" + JSON.stringify(res) + "</p>");  
                });  
                //设备连接状态改变      
                wx.on('onWXDeviceStateChange', function(res) {  
                    //有3个状态：connecting连接中,connected已连接,unconnected未连接      
                    //每当手机和设备之间的状态改变的瞬间，会触发一次      
  
                    $("#initBle").append("<p>设备连接状态：" + res.state + "</p>");  
                });  
                //接收到设备传来的数据      
                wx.on('onReceiveDataFromWXDevice', function(res) {  
                    $("#initBle").append(  
                            "<p>收到设备数据：" + JSON.stringify(res) + "</p>");  
                });  
                wx.error(function(res) {  
                    alert("wx.error错误：" + JSON.stringify(res));  
                    //如果初始化出错了会调用此方法，没什么特别要注意的      
                });  
  
            });  
        }  
    }  
    //绑定设备  
    function bindBle(str) {  
        //先去后台验证一下当前用户的openid有效  
        $.ajax({  
            type : "post",  
            url : "ble/bleServlet",  
            data : {  
                "method" : "getOpenid"  
            },  
            dataType : "json",  
            success : function(data) {  
                var openid = data.openid;  
                if (openid == 1) {  
                    alert("errr");  
                } else {  
                    //强制绑定 传值 后台获取的openid  和当前点击的设备ID  
                    $.ajax({  
                        type : "post",  
                        url : "ble/bleServlet",  
                        data : {  
                            "method" : "bindDe",  
                            "deviceId" : str,  
                            "openid" : openid  
                        },  
                        dataType : "json",  
                        success : function(data) {  
                            alert(JSON.stringify(data))  
                            var s = data.errmsg;  
                            if (s == "ok") {  
                                alert("bind   succ");  
                            }  
                        },  
                        error : function(e) {  
                        }  
                    });  
                }  
            },  
            error : function(e) {  
            }  
        });  
    }  
  
    var bleManage = null;  
    //进来动态加载签名    
    $(document).ready(function() {  
        bleManage = new BleManage();  
        bleManage.bleInit_callback_();  
        /* 
        $.ajax({   
            type : "post",   
            url : "xxx.com",   
            data : {},   
            dataType : "json",   
            success : function(data) {   
                //调用之前先打印一下传回来的4个值 是否跟你之前写死的 能成功的值是一样的   
                bleManage.bleInit_callback_(data);   
            }   
        }); 
         */  
    });  
  
    function scan() {  
        bleManage.bleInit_sAcn();  
    }  
    function stopSacn() {  
        bleManage.bleInit_stopSacn();  
    }  
    function getInfo() {  
        bleManage.bleInit_getDev_Info();  
    }  
    function bleConn() {  
        bleManage.bleInit_connBle();  
    }  
    function sendData() {  
        bleManage.bleInit_sendData();  
    }  
    var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";  
    function base64encode(str) {  
        var out, i, len;  
        var c1, c2, c3;  
        len = str.length;  
        i = 0;  
        out = "";  
        while (i < len) {  
            c1 = str.charCodeAt(i++) & 0xff;  
            if (i == len) {  
                out += base64EncodeChars.charAt(c1 >> 2);  
                out += base64EncodeChars.charAt((c1 & 0x3) << 4);  
                out += "==";  
                break;  
            }  
            c2 = str.charCodeAt(i++);  
            if (i == len) {  
                out += base64EncodeChars.charAt(c1 >> 2);  
                out += base64EncodeChars.charAt(((c1 & 0x3) << 4)  
                        | ((c2 & 0xF0) >> 4));  
                out += base64EncodeChars.charAt((c2 & 0xF) << 2);  
                out += "=";  
                break;  
            }  
            c3 = str.charCodeAt(i++);  
            out += base64EncodeChars.charAt(c1 >> 2);  
            out += base64EncodeChars.charAt(((c1 & 0x3) << 4)  
                    | ((c2 & 0xF0) >> 4));  
            out += base64EncodeChars.charAt(((c2 & 0xF) << 2)  
                    | ((c3 & 0xC0) >> 6));  
            out += base64EncodeChars.charAt(c3 & 0x3F);  
        }  
        return out;  
    }  
</script>  
</html>

下面教怎么获取正确的签名也就上上面JS中config中要用到的

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=&lang=zh_CN 这是错误码查看连接

http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 这才是生成签名的连接注意上面填写的四个字段

1：jsapi_ticket //下面介绍怎么获取他的值

2：noncestr 为了测试这里我们先写一个零时的 ovRc9vDzRzAtoUNfeOzp8jiq4qISjV5y //跟上面config中的一致

3：timestamp 1465264902

4：url 这里是需要调JS的页面所在的URL

然后点击生存签名

jsapi_ticket //获取

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+ACCESS_TOKEN+"&type=jsapi 这是获取的请求自己在后头组装get或post请求先获取token然后传进去请求这个连接出来的就是jsapi_ticket

xin新手发贴大神勿喷建议以上能成功通过在结合后台来开发后续流程如果不懂 wb_90@foxmail.com