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

一、小程序的实现过程

该小程序实现了指南针功能，能够通过图片的旋转指示当前的方向。实现的方法就是通过罗盘API函数onCompassChange(function
callback)来算出当前便宜的角度，然后将该角度的值rotatｅ传到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
        })
      }
    });
},
})