当前位置：首页 > news >正文

基于微信小程序蓝牙信标 (Beacon)的室内导航实例

news 2025/9/19 10:59:00

这个例子模拟了在商场中，当用户靠近某个店铺（由Beacon信标代表）时，小程序自动识别位置并提示用户已到达目的地。

📁 项目结构

beacon-navigation/
├── pages/
│   └── index/
│       ├── index.js
│       ├── index.wxml
│       ├── index.wxss
│       └── index.json
├── utils/
│   └── beaconService.js
└── app.js

1. `pages/index/index.wxml` - 页面结构

<view class="container"><view class="status-box"><text>蓝牙状态：{{bluetoothStatus}}</text></view><view class="target-store"><text>目标店铺：3楼 - 星巴克 (Beacon UUID: FDA50693-A4E2-4FB1-AFCF-C6EB07647825)</text></view><view class="navigation-info"><!-- 根据距离显示不同提示 --><block wx:if="{{currentDistance === null}}"><text class="tip">请打开蓝牙，靠近目标区域...</text></block><block wx:elif="{{currentDistance <= 1}}"><text class="arrived">🎉 恭喜！您已到达星巴克门店！</text></block><block wx:elif="{{currentDistance <= 5}}"><text class="close">接近目标：距离约 {{currentDistance.toFixed(1)}} 米</text></block><block wx:else><text class="far">寻找目标：距离较远 ({{currentDistance.toFixed(1)}} 米)</text></block></view><!-- 显示最近探测到的Beacon设备信息 --><view class="beacon-info" wx:if="{{nearestBeacon}}"><text>当前信号最强设备：</text><text>UUID: {{nearestBeacon.uuid}}</text><text>RSSI: {{nearestBeacon.rssi}} dBm</text><text>距离估算: {{nearestBeacon.distance.toFixed(2)}} 米</text></view><button bindtap="startSearch" disabled="{{isSearching}}">开始搜索Beacon</button><button bindtap="stopSearch" disabled="{{!isSearching}}">停止搜索</button>
</view>

2. `pages/index/index.js` - 页面逻辑

// 引入Beacon服务工具
import BeaconService from '../../utils/beaconService.js';Page({data: {bluetoothStatus: '初始化中...',isSearching: false,currentDistance: null, // 当前与目标Beacon的距离nearestBeacon: null,   // 最近的Beacon设备},// 页面加载onLoad() {this.beaconService = new BeaconService();// 监听蓝牙状态和Beacon事件this.beaconService.on('stateChange', (state) => {this.setData({ bluetoothStatus: state });});this.beaconService.on('found', (beacons) => {this.handleBeaconFound(beacons);});this.beaconService.on('updated', (beacons) => {this.handleBeaconFound(beacons); // 更新时也处理});// 初始化蓝牙this.beaconService.init();},// 处理发现的Beacon设备handleBeaconFound(beacons) {if (!Array.isArray(beacons) || beacons.length === 0) return;// 过滤出目标店铺的Beacon (假设我们知道其UUID)const TARGET_UUID = 'FDA50693-A4E2-4FB1-AFCF-C6EB07647825'.toLowerCase();const targetBeacons = beacons.filter(b => b.uuid.toLowerCase() === TARGET_UUID && b.distance !== undefined);if (targetBeacons.length > 0) {// 找到信号最强（距离最近）的目标Beaconconst nearest = targetBeacons.reduce((a, b) => a.distance < b.distance ? a : b);this.setData({nearestBeacon: nearest,currentDistance: nearest.distance});} else {// 如果没有找到目标，显示最近的任意Beacon作为参考const nearest = beacons.reduce((a, b) => a.rssi > b.rssi ? a : b);this.setData({nearestBeacon: nearest,currentDistance: nearest.distance || null});}},// 开始搜索startSearch() {this.beaconService.startSearch().then(() => {this.setData({ isSearching: true });}).catch(err => {wx.showToast({ title: '启动失败', icon: 'error' });console.error(err);});},// 停止搜索stopSearch() {this.beaconService.stopSearch();this.setData({ isSearching: false });},// 页面卸载时清理onUnload() {this.stopSearch();this.beaconService.destroy();}
});

3. `utils/beaconService.js` - Beacon服务工具类

class BeaconService {constructor() {this.eventCallbacks = {};this.isInitialized = false;}// 注册事件监听on(event, callback) {if (!this.eventCallbacks[event]) {this.eventCallbacks[event] = [];}this.eventCallbacks[event].push(callback);}// 触发事件emit(event, data) {if (this.eventCallbacks[event]) {this.eventCallbacks[event].forEach(cb => cb(data));}}// 初始化蓝牙init() {wx.openBluetoothAdapter({success: () => {this.emit('stateChange', '蓝牙适配器已开启');this.isInitialized = true;// 监听蓝牙状态变化wx.onBluetoothAdapterStateChange((res) => {this.emit('stateChange', res.available ? '蓝牙可用' : '蓝牙不可用');});},fail: (err) => {this.emit('stateChange', '蓝牙初始化失败，请检查权限');console.error('蓝牙初始化失败', err);}});}// 开始搜索BeaconstartSearch() {return new Promise((resolve, reject) => {if (!this.isInitialized) {reject(new Error('蓝牙未初始化'));return;}wx.startBeaconDiscovery({uuids: ['FDA50693-A4E2-4FB1-AFCF-C6EB07647825'], // 可以指定目标UUID提高效率ignoreBluetoothAvailable: true,success: () => {this.bindBeaconEvents();resolve();},fail: (err) => {reject(err);}});});}// 绑定Beacon事件bindBeaconEvents() {// 发现Beaconwx.onBeaconServiceChange((res) => {if (res.available) {wx.getBeacons({success: (beaconRes) => {if (beaconRes.beacons && beaconRes.beacons.length > 0) {const processedBeacons = this.processBeacons(beaconRes.beacons);this.emit('found', processedBeacons);}}});}});// 更新Beacon信号wx.onBeaconUpdate((res) => {const processedBeacons = this.processBeacons(res.beacons);this.emit('updated', processedBeacons);});}// 停止搜索stopSearch() {wx.stopBeaconDiscovery();}// 销毁资源destroy() {this.stopSearch();wx.closeBluetoothAdapter();}// 处理原始Beacon数据，估算距离processBeacons(rawBeacons) {return rawBeacons.map(beacon => {// 简单的距离估算公式（实际应用需校准）// 使用 RSSI 和 measuredPower (通常为-59dBm @1m) 计算const txPower = beacon.measuredPower || -59; // 发射功率if (beacon.rssi >= txPower) {beacon.distance = 1.0; // 距离小于1米} else {// 对数距离路径损耗模型简化版const ratio = beacon.rssi * 1.0 / txPower;if (ratio < 1.0) {beacon.distance = Math.pow(ratio, 10);} else {beacon.distance = 0.89976 * Math.pow(ratio, 7.7095) + 0.111;}}return beacon;});}
}module.exports = BeaconService;

4. `pages/index/index.wxss` - 样式文件（可选）

.container {padding: 20rpx;font-size: 28rpx;
}.status-box {background: #f0f0f0;padding: 20rpx;margin-bottom: 20rpx;border-radius: 8rpx;
}.target-store {background: #e8f4ff;padding: 20rpx;margin-bottom: 30rpx;border-left: 4px solid #007aff;
}.navigation-info {text-align: center;margin: 40rpx 0;
}.tip { color: #666; }
.far { color: #ff9900; }
.close { color: #00aa00; font-weight: bold; }
.arrived { color: #ff0000; font-size: 36rpx; font-weight: bold; }.beacon-info {background: #f9f9f9;padding: 20rpx;margin: 20rpx 0;border-radius: 8rpx;font-size: 24rpx;
}button {margin: 15rpx 0;
}