微信小程序入门-指南针

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

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

周明杰

巴特西

微信小程序入门-指南针

实现方案

核心代码片段

优点

不足

改进方向

最新文章

热门文章