微信小程序罗盘功能开发指南
微信小程序提供了罗盘API，可以获取设备的方向信息，包括方向角、倾斜角等。通过调用wx.onCompassChange接口，可以监听设备方向变化，实现指南针、AR导航等功能。
罗盘API基本用法
在小程序页面中，可以通过以下代码监听罗盘数据变化：
Page({data: {direction: 0},onLoad() {wx.startCompass()this.compassCallback = (res) => {this.setData({direction: res.direction})}wx.onCompassChange(this.compassCallback)},onUnload() {wx.offCompassChange(this.compassCallback)wx.stopCompass()}
})
案例：简易指南针实现
下面是一个完整的指南针案例，包含界面和逻辑代码：
// index.js
Page({data: {rotate: 0,angleText: '0°',direction: '北'},onLoad() {this.startCompass()},onUnload() {this.stopCompass()},startCompass() {wx.startCompass()this.compassCallback = res => {const direction = res.directionconst angle = Math.round(direction)let dirText = ''if (angle >= 337.5 || angle < 22.5) dirText = '北'else if (angle >= 22.5 && angle < 67.5) dirText = '东北'else if (angle >= 67.5 && angle < 112.5) dirText = '东'else if (angle >= 112.5 && angle < 157.5) dirText = '东南'else if (angle >= 157.5 && angle < 202.5) dirText = '南'else if (angle >= 202.5 && angle < 247.5) dirText = '西南'else if (angle >= 247.5 && angle < 292.5) dirText = '西'else if (angle >= 292.5 && angle < 337.5) dirText = '西北'this.setData({rotate: -angle,angleText: angle + '°',direction: dirText})}wx.onCompassChange(this.compassCallback)},stopCompass() {wx.offCompassChange(this.compassCallback)wx.stopCompass()}
})
<!-- index.wxml -->
<view class="container"><view class="compass-box"><image class="compass-bg" src="/images/compass-bg.png" style="transform: rotate({{rotate}}deg);"></image><image class="compass-pointer" src="/images/pointer.png"></image></view><view class="info"><text>{{angleText}}</text><text>{{direction}}</text></view>
</view>
/* index.wxss */
.container {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;
}.compass-box {position: relative;width: 300rpx;height: 300rpx;margin-bottom: 40rpx;
}.compass-bg {width: 100%;height: 100%;transition: transform 0.1s linear;
}.compass-pointer {position: absolute;top: 50%;left: 50%;width: 40rpx;height: 40rpx;transform: translate(-50%, -50%);
}.info {display: flex;flex-direction: column;align-items: center;font-size: 36rpx;
}
高级应用：罗盘与地图结合
罗盘数据可以与地图组件结合，实现方向感知的地图导航功能：
Page({data: {rotate: 0,latitude: 39.9042,longitude: 116.4074,markers: [{id: 1,latitude: 39.9042,longitude: 116.4074,iconPath: '/images/marker.png'}]},onLoad() {wx.getLocation({type: 'gcj02',success: (res) => {this.setData({latitude: res.latitude,longitude: res.longitude})}})wx.startCompass()this.compassCallback = res => {this.setData({rotate: res.direction})}wx.onCompassChange(this.compassCallback)},onUnload() {wx.offCompassChange(this.compassCallback)wx.stopCompass()}
})
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" show-location enable-rotaterotation="{{rotate}}"markers="{{markers}}"
></map>
注意事项
- 使用罗盘功能前需要在小程序配置文件中声明权限：
{"requiredPrivateInfos": ["getLocation", "onCompassChange"]
}
- 部分安卓设备可能存在罗盘数据不准确的问题，可以在代码中加入校准提示：
wx.onCompassChange(function(res) {if (res.accuracy && res.accuracy === 'unreliable') {wx.showToast({title: '请校准设备',icon: 'none'})}
})
- 长时间使用罗盘功能会增加设备耗电量，建议在页面不可见时停止监听。
通过以上方法和案例，可以快速在微信小程序中实现罗盘相关功能，为应用增加方向感知能力。