实现方案

利用罗盘接口返回的【数据】，转化为指南针偏移量【度数】，利用CSS3 transform的rotate属性进行2d旋转，旋转量与之双向数据绑定。

核心代码片段

1. <view class='m-compass'>
2. <image class='m-compassbg' src='img/bg.png' style='transform:rotate({{rotate}}deg);'></image>
3. </view>
4. onLoad: function () {
5. var m-this = this;
6. wx.onCompassChange(function (res) {
7. m-this.setData({
8. // 计算应偏移度数
9. rotate: 360 - res.direction.toFixed(0)
10. })
11. });
12. }

优点

即用即走，不需下载安装（相对的），可断网使用

不足

API返回的数据不稳定，手机静止状态，罗盘度数一直浮动，范围跨度比较大，导致体验不够流畅；系统自带罗盘数据就很稳定。

改进方向

可以增加过渡效果、指针移动速率固定、单次范围固定1deg。