微信開發之八頁面獲取周圍beacon設備

時間 2021-08-15

標籤 javascript html 前端 java ajax 編程 json api 數組微信欄目 JavaScript 简体版

原文原文鏈接

--注意：微信測試號不具有這個功能javascript

步驟一：綁定域名注意不要加http://html

步驟二：引入js文件前端

--在須要調用JS接口的頁面引入以下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.jsjava

[html] view plain copy

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

步驟三：經過ajax獲取參數，完成config接口注入權限驗證配置

--ajax請求ajax

[html] view plain copy

var url = location.href.split('#')[0];
$.ajax({
type:"GET",
url:"signature.action?url=" + url,
dataType:"json",
success:function(data){
if (data){
wx.config({
debug: false,
appId: data.appid,
timestamp: data.timestamp,
nonceStr: data.nonceStr,
signature: data.signature,
jsApiList: [// 這個必需要配置，否則會報權限不足的錯誤
'checkJsApi',
'getNetworkType',//網絡狀態接口
'openLocation',//使用微信內置地圖查看地理位置接口
'getLocation', //獲取地理位置接口
'startSearchBeacons',//開啓掃描周邊設備
'stopSearchBeacons'//中止掃描
]
});
}
}
});

--後臺代碼編程

注：jsapi-ticket的獲取在前一節中講過，這裏就帶過json

[html] view plain copy

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

[java] view plain copy

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 str;
String signature = "";
//注意這裏參數名必須所有小寫，且必須有序
str = "jsapi_ticket=" + jsapi_ticket +
"&noncestr=" + nonce_str +
"×tamp=" + timestamp +
"&url=" + url;
try
{
MessageDigest crypt = MessageDigest.getInstance("SHA-1");
crypt.reset();
crypt.update(str.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);
ret.put("appid", WeChatInfo.WX_APPID);
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);
}

步驟四：經過ready接口處理成功驗證api

[javascript] view plain copy

wx.ready(function(){
// 藍牙掃描接口
wx.startSearchBeacons({
ticket:"", //搖周邊的業務ticket, 系統自動添加在搖出來的頁面連接後面
success: function(res){
wx.onSearchBeacons({
complete:function(data){
alert(JSON.stringify(data));
showBeacon(data.beacons);//處理返回的beacon數組
}
});
},
fail:function(res){
var errmsg = JSON.stringify(res.errMsg);
var arr = errmsg.split(':');
var errmsgBody = arr[1];
if(errmsgBody.substr(0, 9) == "bluetooth"){
alert("藍牙未打開，請打開後重試！");
} else if(errmsgBody.substr(0, 8) == "location"){
alert("手機位置未打開，請打開後重試！");
}else{
alert(JSON.stringify(res));
}
}
});
});

[javascript] view plain copy

wx.error(function(res){//驗證錯誤時執行的函數
alert(JSON.stringify(res));
});

[javascript] view plain copy

函數詳解：數組

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獲取，查看示例

90後前端妹子，愛編程，愛運營，愛折騰。堅持總結工做中遇到的技術問題，堅持記錄工做中所所思所見，歡迎你們一塊兒探討交流。