微信小程序入门案例——指南针，供大家参考，具体内容如下
涉及技术：获取地理位置、监听指南针角度
目录结构：
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: 100vh; 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: 15rpx;}.smallTxt{ font-size: 20pt; margin: 15rpx;} |
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
