微信小程序入门-指南针

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

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

转载于:https://www.cnblogs.com/zhoumingjie/p/8521354.html

微信小程序入门-指南针相关推荐

微信小程序入门二：底部导航tabBar
小程序底部导航栏组件tabBar,可以参考下官方的API:tabBar 先看代码 //app.json {"pages":["pages/index/index" ...
天河微信小程序入门《四》：融会贯通，form表单提交数据库
天河在阔别了十几天之后终于又回来了.其实这篇文章里的demo是接着(天河微信小程序入门<三>)后面就做了的,但是因为最近在做别的项目,所以就偷懒没有发出来.放到今天来看,从前台提交数据到数 ...
微信小程序入门---01
目录微信小程序入门一.小程序简介二.第一个小程序二.小程序代码的构成三.WXML模块四.WXSS 样式五.JS 逻辑交互六.组件七.API 八.WXML 模板语法 - 数据绑定九. ...
微信小程序入门之常用组件(04)
常见组件重点讲解微信小程序中常见的布局组件 view,text,rich-text,button,image,navigator,icon,swiper, radio,checkbox 等一.vi ...
微信小程序入门案例-会议邀请函
微信小程序入门案例-会议邀请函涉及内容:地图目录结构: pages\index\index.wxml <view class="box"><view clas ...
【零基础微信小程序入门开发一】小程序介绍及环境搭建
什么是小程序? 微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打 ...
微信小程序入门教程+案例demo
微信小程序入门教程+案例demo 尊重原创,转载请注明出处:原文查看惊喜更多 http://blog.csdn.net/qq137722697 首先摆在好姿态,--微信小程序开发也就那么回事.你只需要 ...
微信小程序入门七登录注册
上一章介绍了微信小程序入门六本地缓存和搜索 ,这章介绍小程序的登录注册页面.主要有表单的验证,错误信息的提示,form表单的取值,get / post 请求 ,反馈交互提示框,页面跳转以及页面U ...
微信小程序入门-音乐播放器
萌新,随便做做,只是了解一下微信小程序,希望可以给看到的胖友一点参考. 之前在网上看到这个人入门四天做完一个,我五天做完了,比他好看,突然有一点自信然后发现自己特别不乐意重新看自己的代码,总觉得写的 ...

微信小程序入门-指南针

实现方案

核心代码片段

优点

不足

改进方向

微信小程序入门-指南针相关推荐

最新文章

热门文章