微信小程序入门-指南针

微信小程序提供了众多的原生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。

文中内容多为原创,若有侵权,请联系核实删除,转载请注明出处
周明杰

微信小程序入门-指南针

上一篇:微信小程序带搜索记录的输入框 -- localStorage


下一篇:部署wepy框架开发微信小程序