如何在小程序中使用罗盘

现代生活中,经常会用到导航系统,导航系统必不可少的一个功能就是罗盘,何为罗盘?简单罗盘通过磁力将内部的指针指向某个方向,从而实现判别方位。现代技术以及将罗盘缩小到移动设备端,我们可以直接在手机端查看罗盘的指向。

小程序端也支持直接调用罗盘信息,这篇教程,我们将教大家小程序端罗盘的基础使用,并结合现实应用,开发一款指北针demo。

在教程开始之前,需要搭建搭建好小程序的基础开发环境,关于如何配置,大家可以参考如何入门小程序开发这篇文章的入门教程。

罗盘API调用

小程序官方提供了wx.onCompassChange()API去调用系统的罗盘,并返回与正北方向的夹角度数。返回的夹角数频率为5次每秒,返回会返回两个值,一个是direction,与正北方向的夹角度数。另一个是accuracy返回的值为当前的精度,可以参考官方文档。这里我们主要看direction参数,该参数返回的为0°~360°,这里的值为与正北方向的夹角度数。我们可以通过下面的代码来调用api,并将夹角度数返回打印到控制台。

Page({
  onShow: function () {
    wx.onCompassChange(function (res) {
      console.log(res.direction)
    })
  }
})

然后点击开发界面的真机调试按钮,并使用手机微信扫描二维码。扫描完成后,你电脑会弹出类似下面的界面,这里返回的数字就是我们目前与正北方向的夹角。

1543480928804

我们看到,调用API很简单,能不能将这里的数据实时反馈到前端呢?打开index.wxml文件,添加下面的代码。

<view>{{compass}}°</view>

然后修改index.js文件

Page({
  onShow: function () {
    var myThis = this;
    wx.onCompassChange(function (res) {
      myThis.setData({
        compass: res.direction
      })
    })
  }
})

效果如图

1543481523634

我们也可以将accuracy参数加进来

Page({
  onShow: function () {
    var myThis = this;
    wx.onCompassChange(function (res) {
      myThis.setData({
        compass: res.direction,
        accuracy: res.accuracy
      })
    })
  }
})

除了罗盘基础事件调用,小程序还提供了开始和停止罗盘监听的两个API,调用起来比较简单,参考下面的代码。

index.js

Page({
  startCompass(){
    wx.startCompass()
  },
  stopCompass() {
    wx.stopCompass()
  },
  onShow: function () {
    var myThis = this;
    wx.onCompassChange(function (res) {
      myThis.setData({
        compass: res.direction,
        accuracy: res.accuracy
      })
    })
  }
})

index.wxml

<view>{{compass}}°</view>
<view>{{accuracy}}</view>
<button type="primary" bindtap="startAccelerometer">打开罗盘</button>
<button type="warn" bindtap="startAccelerometer">关闭罗盘</button>
1543482658968

指北针Demo

利用上面的这些API,结合小程序wx.createAnimation()动画API,就可以实现指北针的实现。关于动画API的调用本文暂不涉及,具体使用大家相见官方文档

我们修改上一步中的代码,添加指北针的图片,然后通过wx.createAnimation()API去旋转这个图片。

index.js

Page({
  data: {
    animationData: 0,
    compass:0
  },
  onShow: function () {
    var myThis = this;
    wx.onCompassChange(function (res) {
      this.animation = wx.createAnimation()
      this.animation.rotate(360 - res.direction.toFixed(0)).step({
        timingFunction:"step-start"
      })
      myThis.setData({
        compass: res.direction.toFixed(2),
        animation: this.animation.export()
      })
    })
  }
})

index.wxml

<image animation="{{animation}}" mode="aspectFit" src='https://techeek-cn-1251732175.cos.ap-chengdu.myqcloud.com/wx-compass/img.png'></image>
<view>{{compass}}°</view>

这段代码中,我们首先在index.wxml文件中指定了指北针的图片,然后通过animation方法去等待index.js传至前端的动画事件,并等待compass变量的数据。

index.js文件中,我们将wx.onCompassChange的返回值res.direction通过.toFixed(0)方法做了去小数处理,然后使用360减去与正北方向的夹角,得到图片需要旋转的度数。然后通过this.setData()将得到的数据返回给前端。效果如图。

1543484166406

不论我们怎么旋转手机当前指向都为正北方向。有了与正北方向的夹角,我们可以通过判断这个数值来判断当前的方向,可以使用if或者switch方法去判断,这里我用switch,代码如下。

index.js

Page({
  data: {
    animationData: 0,
    angle:"北",
    compass:0

  },
  onShow: function () {
    var myThis = this;
    wx.onCompassChange(function (res) {
      this.animation = wx.createAnimation()
      this.animation.rotate(360 - res.direction.toFixed(0)).step({
        timingFunction:"step-start"
      })
      switch (true) {
        case res.direction < 22.5:
          myThis.setData({
            angle: "北"
          });
          break;
        case 22.5 < res.direction && res.direction < 67.5:
          myThis.setData({
            angle: "东北"
          });
          break;
        case 67.5 < res.direction && res.direction < 112.5:
          myThis.setData({
            angle: "东"
          });
          break;
        case 112.5 < res.direction && res.direction < 157.5:
          myThis.setData({
            angle: "东南"
          });
          break;
        case 157.5 < res.direction && res.direction < 202.5:
          myThis.setData({
            angle: "南"
          });
          break;
        case 202.5 < res.direction && res.direction < 247.5:
          myThis.setData({
            angle: "西南"
          });
          break;
        case 247.5 < res.direction && res.direction < 292.5:
          myThis.setData({
            angle: "西"
          });
          break;
        case 292.5 < res.direction && res.direction <337.5:
          myThis.setData({
            angle: "西北"
          });
          break;
    }
      myThis.setData({
        compass: res.direction.toFixed(2),
        animation: this.animation.export()
      })
    })
  }
})

index.wxml

<view style='display:flex;justify-content:center;align-items:center;'>
<image animation="{{animation}}" mode="aspectFit" src='https://techeek-cn-1251732175.cos.ap-chengdu.myqcloud.com/wx-compass/img.png'></image>
</view>
<view style='display:flex;justify-content:center;align-items:center;font-size:50px;'>{{angle}} {{compass}}°</view>

稍微优化下前端样式,我们就可以得到一个比较好看的指北针了!

1543484411045

总结

怎么样,简单吗?赶快去体验下吧,后续我将会对其他组件做详细的介绍。喜欢的小伙伴请持续关注本专栏。腾讯云联合小程序给大家带来了小程序·云开发解决方案,为开发者提供完整的云端支持,弱化后端和运维操作,使用平台原生 API 进行核心业务开发,实现快速上线和迭代。欢迎免费使用!

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏xx_Cc的学习总结专栏

iOS-世界那么大,CoreLocation带你去看看

2939
来自专栏技术总结

Photos存储、获取、更改照片详解

2469
来自专栏hightopo

基于 HTML5 Canvas 绘制的电信网络拓扑图

2263
来自专栏Material Design组件

Human Interface Guidelines —— Pickers

992
来自专栏携程技术中心

干货 | React Fiber 初探

1712
来自专栏韩东吉的Unity杂货铺

零基础入门 20: UGUI DropDown

(题外话,因为这期分享中段制作之后,微信平台抽疯,Gif图无法使用,导致我不得不尝试用其他的方式来让文章看起来没那么死板,在后面的部分展示中,我插入了视频文件而...

2284
来自专栏有趣的django

博客园美化终极版-(自定义导航栏)----什么CSDN、简书、腾讯云专栏、个人博客和微信公众号都弱爆了

6600
来自专栏微信公众号:Java团长

你们都在用IntelliJ IDEA吗?或许你们需要看一下这篇博文

以前一直用的elipce,如今入坑IntelliJ IDEA,没想到啊。深深的爱上了它,强大到无所不能;

1593
来自专栏冰霜之地

WWDC2016 Session笔记 - Xcode 8 Auto Layout新特性

Incrementally Adopting Auto Layout是什么意思呢?在我们IB里面布局我们的View的时候,我们并不需要一次性就添加好所有的con...

833
来自专栏QQ音乐技术团队的专栏

web实时长图实践

本文将介绍几种浏览器端和服务器端 web 实时生成图片的方案,欲知详情请看文章详情。

1.3K8

扫码关注云+社区