實現(xiàn)方案

利用羅盤接口返回的【數(shù)據(jù)】，轉(zhuǎn)化為指南針偏移量【度數(shù)】，利用CSS3 transform的rotate屬性進行2d旋轉(zhuǎn)，旋轉(zhuǎn)量與之雙向數(shù)據(jù)綁定。

核心代碼片段

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. // 計算應偏移度數(shù)
9. rotate: 360 - res.direction.toFixed(0)
10. })
11. });
12. }

優(yōu)點

即用即走，不需下載安裝（相對的），可斷網(wǎng)使用

不足

API返回的數(shù)據(jù)不穩(wěn)定，手機靜止狀態(tài)，羅盤度數(shù)一直浮動，范圍跨度比較大，導致體驗不夠流暢；系統(tǒng)自帶羅盤數(shù)據(jù)就很穩(wěn)定。

改進方向

可以增加過渡效果、指針移動速率固定、單次范圍固定1deg。