实现一个指南针功能的微信小程序

导读:本篇文章讲解 实现一个指南针功能的微信小程序,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

一、小程序的实现过程

该小程序实现了指南针功能,能够通过图片的旋转指示当前的方向。实现的方法就是通过罗盘API函数onCompassChange(function
callback)来算出当前便宜的角度,然后将该角度的值rotate传到image组件中transform:rotate({{rotate}}deg),实现绑定的图片的旋转。同时还通过当前的偏转角度来显示出相对于正北方向的便宜角度。
罗盘传感器的使用方法: 与罗盘传感器有关的API函数包括: wx.startCompass(Object object)
wx.stopCompass(Object object) wx.onCompassChange(function callback)

wx.startCompass()和wx.stopCompass()分别
用于启动和停止罗盘监听,它们的参数属性包含:success、fail和complete。
wx.onCompassChange(function callback)用于监听罗盘数据变化事件。监听频率是5次/秒,
接口调用后会自动开始监听,可使用 wx.stopCompass 停止监听。 wx.onCompassChange(function
callback) 的参数为罗盘数据变化事件的回调函数。

二、该回调函数的参数属性如下:

属性 类型 说明
direction number 面对的方向度数
accuracy number/string 精度

实现的效果图:
在这里插入图片描述
视频展示如下:

微信小程序实现一个指南针

三、代码:

<!--index.wxml-->
<view class="box">
  <view class="title">哈喽指南针</view>
  <image class="jiantouStyle" src="/pages/images/jiantou.jpg"></image>
  <image class='m-compassbg' src='/pages/images/compass.jpg' style='transform:rotate({{rotate}}deg);'></image>
  <view class="compassStyle">{{area}}  {{detailArea}}°</view>
  <view class='lable'>
    #等风来,不如追风去#
  </view>
</view>

/**index.wxss**/
.title{
  font-size: 30px;
  font-weight: bold;
  color: darkkhaki;
}
.m-compassbg{
  width: 260px;
  height: 260px;
  border-radius: 50%;
}
.jiantouStyle{
  width: 90px;
  height: 90px;
  margin-bottom: 30px;
}
.compassStyle{
  font-size:60rpx;
  margin-top:80rpx;
}
.lable{
  margin-top: 20px;
  font-size: 26px;
  color: lightseagreen;
}
/**app.wxss**/
.box {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 100rpx 0;
  box-sizing: border-box;
} 

//index.js

Page({
  data: {
    rotate:0,
    area:"东偏北",
    detailArea:90
  },

  onLoad: function () {
    var that = this;
    wx.onCompassChange(function (res) {
        // 计算应偏移度数
      var rotate = 360 - res.direction.toFixed(0)
      var area = parseInt(rotate/90)
      var detailArea = rotate%90
      that.setData({
        rotate:rotate
      })
      if(area==0){
        that.setData({
          area:"西偏北",
          detailArea: 90-detailArea
        })
      }else if(area==1){
        that.setData({
            area: "西偏南",
            detailArea: detailArea
        })
      } else if (area == 2) {
        that.setData({
          area: "东偏南",
          detailArea: 90-detailArea
        })
      }else{
        that.setData({
          area: "东偏北",
          detailArea: detailArea
        })
      }
    });
},
})

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/74951.html

(0)
小半的头像小半

相关推荐

极客之家——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!