用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

微信小程序入门-指南针

Rolan 2018-3-8 00:38

微信小程序提供了众多的原生API接口,利用罗盘接口,做了个简单的指南针小程序,搜索小程序【X的实验室】可看效果。实现方案利用罗盘接口返回的【数据】,转化为指南针偏移量【度数】,利用CSS3 transform的rotate属 ...

微信小程序提供了众多的原生API接口,利用罗盘接口,做了个简单的指南针小程序,搜索小程序【X的实验室】可看效果。

实现方案

利用罗盘接口返回的【数据】,转化为指南针偏移量【度数】,利用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。

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 周明杰 来自: cnblogs

相关阅读