原文链接：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

[html] view plain copy
  1. <script src=“http://res.wx.qq.com/open/js/jweixin-1.2.0.js”></script>  

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

–ajax请求

[html] view plain copy
  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的获取在前一节中讲过，这里就带过

[html] view plain copy
  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.         
  7.       return SignatureUtil.sign(tokenService.getJsapi_ticket(), url);  
  8.     }  

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

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


[javascript] view plain copy
  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. });  
[javascript] view plain copy
  1. wx.error(function(res){//验证错误时执行的函数  
  2. alert(JSON.stringify(res));  
  3.  });  

[javascript] view plain copy
  1.   

函数详解：

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资源大放送。

image

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

版权声明：本文为wangting888原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/wangting888/p/9701625.html