Appearance
小程序集成智石H5项目
1、小程序设置
1.1 request合法域名
https://a.brtmap.com;
https://files.brtmap.com;
https://map-sdk.brtmap.com;
https://wx-lts-pull.brtmap.com;
1.2 业务域名
下载校验文件,把文件发送给智石方进行域名绑定。
https://brtmap.com
2、下载小程序端 - JS-SDK
下载 brtloc.miniprogram.js 下载到本地后放到您自己小程序项目里面
.
3、开始使用
定位方式:
// 服务器中转模式
1. http: 小程序端扫描ibeacon信息 ----> 服务器(中转) ----> H5定位
// 哈希无刷新模式
2. hash: 小程序端扫描ibeacon信息 ----> url hash无刷新 ----> H5定位
3.1 示例
.wxml
javascript
<web-view src="{{url}}{{beaconsHashString}}" bindmessage="onH5Message" bindload="onWebLoad"></web-view>
.js
javascript
//index.js
//获取应用实例
const app = getApp();
// 引入sdk
const brtloc = require('/brtloc.miniprogram.js');
// 分享信息
let shareInfo = {};
// 您的建筑ID
const buildingID = '';
// 有效token
const token = '';
// 用户唯一定位ID (建议使用openId)
let userId = brtloc.RandomUserId();
// 项目地址 (智石提供的H5项目)
let h5Url = `https://brtmap.com/ ... /index.html?t=${Date.now()}`;
// 实例对象
let $locate = null;
Page({
data: {
// webview -> src
url: '',
// 利用hash变化 无刷新传给H5的beacons字符串
beaconsHashString: ''
},
onLoad: function (options) {
// 当用户是 通过分享内容进入小程序 则打开的H5地址 应是 分享的地址
if(options.url) {
h5Url = decodeURIComponent(options.url);
}
// 拼接userId参数
h5Url += `&userId=${userId}`;
//在未开启蓝牙/位置服务时
let system = wx.getSystemInfoSync();
// 权限状态
let locationState = 0;
// 未打开蓝牙
if (!system.bluetoothEnabled) {
locationState = -1;
}
// 未打开位置服务
else if (!system.locationEnabled) {
locationState = -2;
}
//然后在打开我们提供的H5地址后面加上“&locationState=${locationState}”
h5Url += `&locationState=${locationState}`;
// 实例
$locate = new brtloc.Location({
userId,
wechatMode: "hash", // hash || http
buildingID,
token
});
// ready
$locate.on('ready', () => {
// 开启内置ibeacon扫描功能
$locate.openBeaconScanning(res => {
console.log('beacons', res.beacons);
});
// hash模式 (需嵌套iframe页面进行中转)
if($locate.wechatMode === 'hash') {
h5Url = `https://brtmap.com/bb/v4/c-h5v4/public/wxframe.html?url=${encodeURIComponent(h5Url)}`;
}
// 打开项目
this.setData({
url: h5Url
});
//iframe导致部分android手机bindload失效问题解决
this._bindloadTick_ && clearTimeout(this._bindloadTick_);
this._bindloadTick_ = setTimeout(() => {
this.onWebLoad();
}, 2000);
});
},
// H5加载完成
onWebLoad () {
//
this._bindloadTick_ && clearTimeout(this._bindloadTick_);
// hash模式
if($locate.wechatMode === 'hash') {
// 监听 beaconAnalysis方法 进行有效定位beacons筛选
$locate.on('beacons', beacons => {
this.setData({
beaconsHashString: '#' + beacons.toHashString()
});
});
}
},
// 监听H5传递的消息
onH5Message(e) {
if (e.detail.data.length) {
let len = e.detail.data.length;
// 缓存分享内容信息 (H5传过来的分享信息)
// 属性字段 {title, imageUrl, path, sign}
shareInfo = e.detail.data[len - 1];
}
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
// 分享的信息
let message = {};
// 分享的标题
message.title = shareInfo.title || '';
// 分享的图片
message.imageUrl = shareInfo.imageUrl || "";
// 分享的内容 需打开的页面 并 带入参数 H5地址
message.path = `/pages/index/index?sign=${shareInfo.sign || ''}&url=${shareInfo.path || ''}`;
return message;
}