微信小程序入門-指南針

微信小程序提供了眾多的原生API接口，利用羅盤接口，做了個簡單的指南針小程序，搜索小程序【X的實驗室】可看效果。

實現方案

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

核心代碼片段

<view class='m-compass'>
    <image class='m-compassbg' src='img/bg.png' style='transform:rotate({{rotate}}deg);'></image>
</view>

onLoad: function () {
    var m-this = this;
    wx.onCompassChange(function (res) {
      m-this.setData({
        // 計算應偏移度數
        rotate: 360 - res.direction.toFixed(0)
      })
    });
}

優點

即用即走，不需下載安裝（相對的），可斷網使用

不足

API返回的數據不穩定，手機靜止狀態，羅盤度數一直浮動，范圍跨度比較大，導致體驗不夠流暢；系統自帶羅盤數據就很穩定。

改進方向

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

文中內容多為原創，若有侵權，請聯系核實刪除，轉載請注明出處
周明傑