指南针小程序

小程序–指南针

1. 成果展示
2. 程序代码
3. 文件管理器展示
4. 问题总结
5. 参考博文

第一次创建时间：2021年11月12日20:07:19

一、成果展示

二、程序代码

1、index.wxml

<!--index.wxml-->
<view class="box">
 
  <view class="box1">
  <image mode="aspectFit" style="transform:rotate({{rotate}}deg);" src="https://s3.bmp.ovh/imgs/2021/11/34153a02d0e8d847.jpg"></image>
  </view>

  <view class="textLayout">
    <view>{{resCompass.direction}}</view>
    <!-- <view>{{resCompass.accuracy}}</view> -->
  </view>

  <view class="btnLayout">
    <button type="default" bindtap="startCompass" style="width: 35%; margin: 30rpx;">启动</button>
    <button type="warn" bindtap="stopCompass"style="width: 35%; margin: 30rpx;">停止</button>
  </view>

  <view class="weui-footer">Made by Aping</view>
  
</view>

2、index.wxss

/**index.wxss**/
.btnLayout{
  display: flex;      /*水平排列，按钮大小需要另外设置*/
  flex-direction: row;
  justify-content: center;  /*btnLayout这个居中分布，整体居中分布和text-align不同*/
  margin-bottom: 40px;
}
button{
  margin: 10rpx;
}
view{
  margin: 5rpx;
  padding: 5rpx;
}
.textLayout{
  margin: 5rpx;
  margin-bottom: 40px;
  border: 5rpx dashed blue;
  /* display: flex;  导致以下代码没法运行为什么，，，，好像是卡了hhh
  flex-direction: column;  */
  height: 40px;
  text-align: center;/*box里面的内容居中分布*/
  color: blue;
  text-decoration: underline;
  font-size: 20px;
  font-weight: bold;
}
.box{
  border: solid blue 5rpx;
  margin: 5rpx;
}
.box1{
  margin: 5rpx;
  border: dashed blue 5rpx;
  height: 400px;
  text-align: center;/*box里面的内容居中分布*/
}
image{
  background-color: #ffffff;
  width: 250px;
  height: 250px;
  margin: 75px auto;     /*上下(400-250)/2 = 75 左右()自动*/
}

1、index.js

// index.js
Page({  
  startCompass:function(){  
    var that = this
    wx.startCompass({
      success: function(){  //启动传感器
        wx.onCompassChange(function(res){ 
          let degree = res.direction.toFixed(0);
          that.setData({    
            resCompass:res,
            rotate:360 - degree
          })
        })
      },
    })
  },
  stopCompass:function(){
    var that = this;
    wx.stopCompass({
      success: function(res){//停止传感器
        that.setData({    
          res : '',
          resCompass:res,
          rotate:0
        })
      },
    })
  },
})

三、文件管理器展示

四、参考文章

1. https://blog.csdn.net/WeiHan_Seven/article/details/103872637?utm_source=app&app_version=4.18.0&code=app_1562916241&uLinkId=usr1mkqgl919blen