一、小程序的实现过程
该小程序实现了指南针功能，能够通过图片的旋转指示当前的方向。实现的方法就是通过罗盘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
})
}
});
},
})