Skip to content

小程序集成智石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;
    }