微信小程序罗盘功能开发指南

微信小程序提供了罗盘API，可以获取设备的方向信息，包括方向角、倾斜角等。通过调用wx.onCompassChange接口，可以监听设备方向变化，实现指南针、AR导航等功能。

罗盘API基本用法

在小程序页面中，可以通过以下代码监听罗盘数据变化：

javascript 复制代码

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()
  }
})

案例：简易指南针实现

下面是一个完整的指南针案例，包含界面和逻辑代码：

javascript 复制代码

// index.js
Page({
  data: {
    rotate: 0,
    angleText: '0°',
    direction: '北'
  },
  onLoad() {
    this.startCompass()
  },
  onUnload() {
    this.stopCompass()
  },
  startCompass() {
    wx.startCompass()
    this.compassCallback = res => {
      const direction = res.direction
      const 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()
  }
})

xml 复制代码

<!-- 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>

css 复制代码

/* 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;
}

高级应用：罗盘与地图结合

罗盘数据可以与地图组件结合，实现方向感知的地图导航功能：

javascript 复制代码

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()
  }
})

xml 复制代码

<map 
  id="map" 
  longitude="{{longitude}}" 
  latitude="{{latitude}}" 
  show-location 
  enable-rotate
  rotation="{{rotate}}"
  markers="{{markers}}"
></map>

注意事项

使用罗盘功能前需要在小程序配置文件中声明权限：

json 复制代码

{
  "requiredPrivateInfos": ["getLocation", "onCompassChange"]
}

部分安卓设备可能存在罗盘数据不准确的问题，可以在代码中加入校准提示：

javascript 复制代码

wx.onCompassChange(function(res) {
  if (res.accuracy && res.accuracy === 'unreliable') {
    wx.showToast({
      title: '请校准设备',
      icon: 'none'
    })
  }
})

长时间使用罗盘功能会增加设备耗电量，建议在页面不可见时停止监听。

通过以上方法和案例，可以快速在微信小程序中实现罗盘相关功能，为应用增加方向感知能力。