微信小程序指南针

官方文档
今天我们利用微信罗盘api来实现一个简单地指南针的案例.最终的页面效果如下所示:
首页:

首页.png
点击我知道了进入指南针页面:
指南针.png
案例代码：
首页:

//结构
<view class="conatainer">
<view class="text">
<text>请您远离磁场干扰源</text>
<text>并按下图所示校准指南针</text>
</view>
<view class="img">
<image src="../../assets/compass/tip.jpg"></image>
</view>
<button class="btn" bindtap="jumptocompass">我知道了</button>
</view>

//样式
/* pages/compass/compass.wxss */
.text{
    color: white;
    padding-top: 10vh;
    font-size: 26rpx;
    text-align: center;
}
.text text{
    display: flex;
    line-height: 50rpx;
    flex-direction: column;
}
.img{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.btn{
    width: 80%;
    margin-top: 60rpx;
}

//js
// pages/compass/compass.js
Page({
    jumptocompass(){
        wx.navigateTo({
          url: '../compassdemo/compassdemo',
        })
    },

})

指南针页面:

//结构
<view class="container">
<!-- 方向 -->
<view class="text">
<text>{{direction}}</text>
<text>{{angle}}°</text>
</view>
<view class="compass">
<image src="../../assets/compass/compass.png" style="transform:rotate({{rotate}}deg)"></image>
</view>
</view>

//样式
/* pages/compassdemo/compassdemo.wxss */
.text{
    color: white;
    font-size: 26rpx;
    font-family: '微软雅黑';
    margin-top: 80rpx;

}
.text text{
    display: flex;
    justify-content: center;
    line-height: 50rpx;
}
.compass{
    position: absolute;
    top: 50%;
    left: 50%;
    width:650rpx;
    height: 650rpx;
    transform: translate(-50%,-50%);
}
.compass image{
    width: 100%;
    height: 100%;
}

//js
// pages/compassdemo/compassdemo.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        direction:'--',
        angle:'--',
        rotate:''
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        // 开始使用罗盘
        let that=this;
        wx.onCompassChange((res)=>{
            console.log(res,'res');
            let directions=res.direction.toFixed(2);
            let radios = res.direction.toFixed(0)
            that.setData({
                angle:directions,
                rotate:360-radios,
                direction:this.check(radios)
            })
        })
        // 判断手机是否有罗盘
        setTimeout(()=>{
            if(this.data.angle=='--'&&this.data.direction=='--'){
                wx.showToast({
                  title: '没有电子罗盘',
                  duration:3000,
                  icon:'loading',
                  mask:true
                })
            }
        },3000)
    },
    // 判断方向的函数
    check(i){
        if(15 <= i && i <= 75){
            return '东北'
          }else if(75 < i && i< 105){
            return '正东'
          }else if(105 <= i && i <= 165){
            return '东南'
          }else if(165 < i && i < 195){
            return '正南'
          }else if(195 <= i && i <= 255){
            return '西南'
          }else if(255 < i && i < 285){
            return '正西'
          }else if(285 <= i && i <= 345){
            return '西北'
          }else{
            return '正北'
          }
    },
})