微信小程序入门案例——指南针,供大家参考,具体内容如下
涉及技术:获取地理位置、监听指南针角度
目录结构:
pages\index\index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
Page({
/**
* 页面的初始数据
*/
data: {
rotate:0,
degree: '未知' ,
direction: '' ,
lat:0,
lon:0,
alt:0
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this ;
wx.getLocation({
altitude: true ,
success: function (res){
that.setData({
lat:res.latitude.toFixed(2),
lon:res.longitude.toFixed(2),
alt:res.altitude.toFixed(2)
})
}
})
wx.onCompassChange( function (res){
let degree = res.direction.toFixed(0);
that.getDirection(degree)
that.setData({
rotate:360 - degree
})
})
},
/**
* 判断方向
*/
getDirection: function (deg){
let dir = '未知' ;
if (deg>=340||deg<=20){
dir= '北' ;
} else if (deg>20&°<70){
dir= '东北' ;
} else if (deg>=70&°<=110){
dir= '东' ;
} else if (deg>110&°<160){
dir= '东南' ;
} else if (deg>=160&°<=200){
dir= '南' ;
} else if (deg>200&°<250){
dir= '西南' ;
} else if (deg>=250&°<=290){
dir= '西' ;
} else if (deg>290&°<340){
dir= '西北' ;
}
this .setData({
degree:deg,
direction:dir
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
|
pages\index\index.wxml
1
2
3
4
5
6
7
8
|
< view class = "container" >
< image src = "/images/1.jpg" mode = "widthFix" style = "transform:rotate({{rotate}}deg);" ></ image >
< view class = "status" >
< text class = "bigTxt" >{{degree}}°{{direction}}</ text >
< text class = "smallTxt" >北纬{{lat}}东经{{lon}}</ text >
< text class = "smallTxt" >海拔{{alt}}米</ text >
</ view >
</ view >
|
pages\index\index.wxss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
.container{
height : 100 vh;
display : flex;
flex- direction : column;
align-items: center ;
justify- content : space-around;
color : #A46248 ;
}
image{
width : 80% ;
}
.status{
display : flex;
flex- direction : column;
align-items: center ;
}
.bigTxt{
font-size : 30pt ;
margin : 15 rpx;
}
.smallTxt{
font-size : 20pt ;
margin : 15 rpx;
}
|
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
App({
/**
* 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
*/
onLaunch: function () {
},
/**
* 当小程序启动,或从后台进入前台显示,会触发 onShow
*/
onShow: function (options) {
},
/**
* 当小程序从前台进入后台,会触发 onHide
*/
onHide: function () {
},
/**
* 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
*/
onError: function (msg) {
}
})
|
app.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
{
"pages" :[
"pages/index/index"
],
"window" :{
"backgroundTextStyle" : "light" ,
"navigationBarBackgroundColor" : "#fff" ,
"navigationBarTitleText" : "指南针" ,
"navigationBarTextStyle" : "black"
},
"permission" :{
"scope.userLocation" :{
"desc" : "你的位置信息将用于小程序指南针的效果展示"
}
},
"style" : "v2" ,
"sitemapLocation" : "sitemap.json"
}
|
运行截图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/yunfeather/article/details/109046583