微信开发之八 页面获取周围beacon设备

原文链接：https://blog.csdn.net/qq_37936542/article/details/78912197

--注意：微信测试号不具备这个功能

步骤一：绑定域名   注意不要加http://

步骤二：引入js文件

--在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js

1. <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

步骤三：通过ajax获取参数，完成config接口注入权限验证配置

--ajax请求

1. var url = location.href.split('#')[0];
2. $.ajax({
3. type:"GET",
4. url:"signature.action?url=" + url,
5. dataType:"json",
6. success:function(data){
7. if (data){
8. wx.config({
9. debug: false,
10. appId: data.appid,
11. timestamp: data.timestamp,
12. nonceStr: data.nonceStr,
13. signature: data.signature,
14. jsApiList: [// 这个必须要配置，不然会报权限不足的错误
15. 'checkJsApi',
16. 'getNetworkType',//网络状态接口
17. 'openLocation',//使用微信内置地图查看地理位置接口
18. 'getLocation', //获取地理位置接口
19. 'startSearchBeacons',//开启扫描周边设备
20. 'stopSearchBeacons'//停止扫描
21. ]
22. });
23. }
24. }
25. });

--后台代码

注：jsapi-ticket的获取在前一节中讲过，这里就带过

1. @RequestMapping(value = "signature", method = RequestMethod.GET)
2. @ResponseBody
3. public Map<String, String> createSignature(@RequestParam String url)
4. {
5. System.out.println("RestFul of createSignature parameters url:"+url);
6. return SignatureUtil.sign(tokenService.getJsapi_ticket(), url);
7. }

1. public static Map<String, String> sign(String jsapi_ticket, String url) {
2. Map<String, String> ret = new HashMap<String, String>();
3. String nonce_str = create_nonce_str();
4. String timestamp = create_timestamp();
5. String str;
6. String signature = "";
7. //注意这里参数名必须全部小写，且必须有序
8. str = "jsapi_ticket=" + jsapi_ticket +
9. "&noncestr=" + nonce_str +
10. "×tamp=" + timestamp +
11. "&url=" + url;
12. try
13. {
14. MessageDigest crypt = MessageDigest.getInstance("SHA-1");
15. crypt.reset();
16. crypt.update(str.getBytes("UTF-8"));
17. signature = byteToHex(crypt.digest());
18. }
19. catch (NoSuchAlgorithmException e)
20. {
21. e.printStackTrace();
22. }
23. catch (UnsupportedEncodingException e)
24. {
25. e.printStackTrace();
26. }
27. ret.put("url", url);
28. ret.put("jsapi_ticket", jsapi_ticket);
29. ret.put("nonceStr", nonce_str);
30. ret.put("timestamp", timestamp);
31. ret.put("signature", signature);
32. ret.put("appid", WeChatInfo.WX_APPID);
33. return ret;
34. }
35. private static String byteToHex(final byte[] hash) {
36. Formatter formatter = new Formatter();
37. for (byte b : hash)
38. {
39. formatter.format("%02x", b);
40. }
41. String result = formatter.toString();
42. formatter.close();
43. return result;
44. }
45. private static String create_nonce_str() {
46. return UUID.randomUUID().toString();
47. }
48. private static String create_timestamp() {
49. return Long.toString(System.currentTimeMillis() / 1000);
50. }

步骤四：通过ready接口处理成功验证

1. wx.ready(function(){
2. // 蓝牙扫描接口
3. wx.startSearchBeacons({
4. ticket:"",  //摇周边的业务ticket, 系统自动添加在摇出来的页面链接后面
5. success: function(res){
6. wx.onSearchBeacons({
7. complete:function(data){
8. alert(JSON.stringify(data));
9. showBeacon(data.beacons);//处理返回的beacon数组
10. }
11. });
12. },
13. fail:function(res){
14. var errmsg = JSON.stringify(res.errMsg);
15. var arr = errmsg.split(':');
16. var errmsgBody = arr[1];
17. if(errmsgBody.substr(0, 9) == "bluetooth"){
18. alert("蓝牙未打开，请打开后重试！");
19. } else if(errmsgBody.substr(0, 8) == "location"){
20. alert("手机位置未打开，请打开后重试！");
21. }else{
22. alert(JSON.stringify(res));
23. }
24. }
25. });
26. });

1. wx.error(function(res){//验证错误时执行的函数
2. alert(JSON.stringify(res));
3. });

函数详解：

1.开启查找周边ibeacon设备接口

wx.startSearchBeacons({
   ticket:"",
   complete:function(argv){
   //回调函数
   }
});

返回参数说明

打开成功返回：“startSearchBeacons:ok”；

打开后未stop再次打开 ：“startSearchBeacons:already started”；

蓝牙未打开返回 ：“startSearchBeacons:bluetooth power off”；

地理位置服务未打开返回： “startSearchBeacons:location service disable”；

系统不支持返回 ：“startSearchBeacons:system unsupported”。

2. 关闭查找周边ibeacon设备接口

wx.stopSearchBeacons({
   complete:function(res){
   //回调函数
   }
});
返回说明

关闭成功返回“stopSearchBeacons:ok”；

3.监听周边ibeacon设备接口（这个函数写在startSearchBeacons的回调函数里面）

wx.onSearchBeacons({
   complete:function(argv){
   //回调函数
   }
});

返回数据为数组

onSearchBeacons:
{
   "beacons":[
               {
               "major":10008,
               "minor":57686,
               "uuid":"FDA50693-A4E2-4FB1-AFCF-C6EB07647825",
               "accuracy":"0.235344",
               "rssi":"-66",
               "proximity":"1",
               "heading":"288.1355"
               },
               {
               "major":10008,
               "minor":57687,
               "uuid":"FDA50693-A4E2-4FB1-AFCF-C6EB07647825",
               "accuracy":"0.349124",
               "rssi":"-49",
               "proximity":"2",
               "heading":"288.1355"
               }
               ]
}
参数说明

参数 说明
UUID、major、minor UUID、major、minor
accuracy 距离，单位为米
proximity 精度，0：CLProximityUnknown, 1：CLProximityImmediate, 2：CLProximityNear, 3：CLProximityFar
rssi 接收信号的强度指示

heading 接收信号时设备的方向（安卓设备返回有此字段，iOS无）；iOS设备若需要获取方向，可以利用HTML5标准API获取， 查看示例

文末福利：

福利一：前端，Java，产品经理，微信小程序，Python等10G资源合集大放送：https://www.jianshu.com/p/e8197d4d9880

福利二：微信小程序入门与实战全套详细视频教程

【领取方法】

关注 【编程微刊】微信公众号：

回复【小程序demo】一键领取130个微信小程序源码demo资源。

回复【领取资源】一键领取前端，Java，产品经理，微信小程序，Python等资源合集10G资源大放送。

90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。