小程序–指南针
- 成果展示
- 程序代码
- 文件管理器展示
- 问题总结
- 参考博文
第一次创建时间: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
})
},
})
},
})
三、文件管理器展示
四、参考文章
- https://blog.csdn.net/WeiHan_Seven/article/details/103872637?utm_source=app&app_version=4.18.0&code=app_1562916241&uLinkId=usr1mkqgl919blen