接入微信蓝牙硬件踩过的坑

本片内容主要讲解 JS-SDK 如何调试硬件，以及开发调试过程中要避开那些坑。

前期准备

1. 微信蓝牙 BLE 接入调试指南，确保硬件没有问题，下面这篇了解即可
   http://blog.csdn.net/skdev/article/details/50974343
2. 微信蓝牙 BLE 接入测试公众号，「必看」
   http://www.jianshu.com/p/8057148fc306

按照这篇文章操作，我们这时便可以生成设备二维码，微信扫描绑定设备,微信界面显示已绑定，完成蓝牙硬件设备接入微信公众号。如下图：

WechatIMG1 1.jpeg

由于手机是英文，所以显示 Connected, 中文是显示已连接。这时便可以通过 JS-SDK 调试蓝牙设备了。
JS-SDK 文档地址：https://mp.weixin.qq.com/wiki?id=mp1451025292&highline=appid

本篇文章是用微信官方示例 PHP 代码来做调试的。
微信官方示例代码：http://demo.open.weixin.qq.com/jssdk/sample.zip

需要注意、了解的点

• 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“ JS 接口安全域名”。
• 微信硬件 JSAPI 接口属于微信 JS-SDK 的一部分,微信 JS-SDK 是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。使用微信硬件 JSAPI,设备厂商可以在网页通过内 javascript，对设备操作的接口。
• 微信硬件 JSAPI 功能已经对所有开通设备功能的微信公众平台测试号开放，无需申请

在绑定域名，引入 JS 扩展库后，我们便来到了开发时的第一个坑。通过 config接口注入权限验证配置

wx.config({
    beta: true, // 开启内测接口调用，注入wx.invoke方法,非常重要!!必须有这个
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳，写现在的时间戳即可
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

这些参数要从哪里来？怎么填？这时需要看下附录1-JS-SDK的内容。

jsapi_ticket

生成签名之前必须先了解一下 jsapi_ticket，jsapi_ticket 是公众号用于调用微信 JS 接口的临时票据。正常情况下，jsapi_ticket的有效期为 7200 秒，通过 access_token 来获取。由于获取 jsapi_ticket 的 api 调用次数非常有限，频繁刷新 jsapi_ticket 会导致 api 调用受限，影响自身业务，开发者必须在自己的服务全局缓存 jsapi_ticket 。

1. 使用微信公众平台接口调试工具获取 ，https://mp.weixin.qq.com/debug/
2. 用第一步拿到的 access_token 采用http GET方式请求获得 jsapi_ticket（有效期 7200 秒，开发者必须在自己的服务全局缓存 jsapi_ticket）https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
   成功返回如下JSON：

{
"errcode":0,
"errmsg":"ok",
"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
"expires_in":7200
}

3. 获取签名 signature，使用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行获取、校验。

解释一下这里的服务全局缓存 jsapi_ticket,access_token。php 示例代码：

### access_token.php

{"access_token":"把获取的 access_token 填写在这里即可","expire_time":0}
### jsapi_ticket.php文件同理

{"jsapi_ticket":"把获取的 jsapi_ticket 填写在这里即可","expire_time":0}

注意事项

1. 签名用的 noncestr 和 timestamp 必须与wx.config 中的 nonceStr 和
   timestamp 相同。
2. 签名用的 url 必须是调用 JS 接口页面的完整 URL。使用 alert(window.location.href) 获取 JS 接口页面的完整 URL
3. 出于安全考虑，开发者必须在服务器端实现签名的逻辑。

配置完 config 之后，我们便可以根据文档来开发自己所需要的功能了。
完整代码地址：https://github.com/todayqq/WeChat-JSAPI
下面是完整 sample.php 代码示例：

GetSignPackage();
?>



  
  
  
  
  
  

  
    

        
  
            
连接设备
  
        
  
    
 

    
  
        
  
            
发送数据
  
        
  
    
  

    
  
 

具体的代码细节不再多做解释，说一下在调试的时候遇到一个调试了很久的问题。调用接收设备函数 onReceiveDataFromWXDevice 「无论如何也始终触发」。这个究竟是怎么回事呢？这篇文章做了解答：http://www.vxzsk.com/143.html

硬件返回数据有两种途径，一种路径是返回服务器端，另一种路径是返回到html端，微信默认返回服务端，在默认返回服务器端的情况，onReceiveDataFromWXDevice 事件是监听不到硬件返回的数据的。

修改硬件放回路径，只能返厂修改程序芯片，这是我们软件工程师做不到的，所以我们只好在服务器端来获取硬件返回的数据。
配置 URL 服务器地址的具体细节不再介绍，在此地址里面的 post 方法里打印输出一段日志，然后操作设备，查看是否日志有输出。

因为时间和技术水平有限，写的不好的地方还请大家多多指教，如果大家有什么问题，可以留言和我一起探讨哦！