微信小程序开发之实现一个跑步小程序

网友投稿 586 2023-11-08

−目录地图组件当前位置开始跑步按钮GPS定位设置前后台允许获取定位开启前后台定位绘制路线

自己动手实现一个跑步小程序 用到的方法：wx.onLocationChange，监听实时地理位置变化事件，需结合 wx.startLocationUpdateBackground，wx.startLocationUpdate使用。

地图组件

微信小程序开发之实现一个跑步小程序

定义一个全屏的地图，地图配置项经纬度（longitude，latitude），缩放（scale），标记点（markers），路线（polyline）等

?
1
2
3
4
<view class="map">
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" markers="{{markers}}"
polyline="{{polyline}}" style="width: 100%; height: 100%"></map>
</view>

地图配置项字段

当前位置

用wx.getLocation获取当前位置，

?
1
2
3
4
5
6
7
8
9
10
11
12
13
// 获取当前位置
getNowLocation() {
wx.getLocation({
type: gcj02,
isHighAccuracy: true,
success: (res) => {
this.setData({
latitude: res.latitude,
longitude: res.longitude,
})
}
})
},

效果如图：

需在app.json中配置

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
"requiredBackgroundModes": [
"location"
],
"requiredPrivateInfos": [
"getLocation",
"onLocationChange",
"startLocationUpdate",
"startLocationUpdateBackground"
]

效果如下：

点击允许，就可以看到当前位置了

开始跑步按钮

添加一个开始跑步按钮

?
1
<button bindtap="startRun" class="btn" type="primary">开始跑步</button>
?
1
2
3
4
5
6
7
8
9
10
11
12
.map {
width: 100%;
height: 100vh;
}
.btn {
position: absolute;
bottom: 100rpx;
left: 0;
right: 0;
z-index: 1000;
}

GPS定位

点击开始跑步的时候，我们需要获取手机的GPS定位是否开启，开启后才能获取地图返回我们的坐标

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 判断手机定位是否开启
checkGPS() {
wx.getSystemInfo({
success: (res) => {
if (!res.locationEnabled) {
wx.showModal({
title: 提示,
content: 请先开启手机GPS定位,
showCancel: false
})
return;
}
}
})
},

开发者工具获取不到，只能用手机测试

设置前后台允许获取定位

?
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
wx.startLocationUpdate({
success: () => {
wx.onLocationChange((res) => {
this.setData({
latitude: res.latitude,
longitude: res.longitude
})
wx.getSetting({
success: (res) => {
wx.hideLoading()
if (!res.authSetting[scope.userLocationBackground]) {
wx.showModal({
title: 提示,
content: 为确保后台定位精确，请先设置 "使用小程序时和离开后允许" 再进行跑步,
showCancel: false,
success: function (res) {
if (res.confirm) {
wx.openSetting()
}
}
})
} else {
this.running();
}
}
})
wx.offLocationChange();
wx.stopLocationUpdate();
})
},
})

开启前后台定位

?
1
2
3
4
5
6
7
8
9
10
11
12
13
// 开始前后台定位
wx.startLocationUpdateBackground({
success: () => {
draw();
time();
},
fail: () => {
wx.showToast({
title: 后台定位开启失败,
icon: none
})
}
})

绘制路线

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
let arr = this.data.polyline[0].points;
wx.onLocationChange((res) => {
if (dis > 0) {
arr.push({
latitude: res.latitude,
longitude: res.longitude
})
totalDistance = Number(((totalDistance + dis) * 100).toFixed(2)) / 100;
}
}
this.setData({
polyline[0].points: arr
})
})

以上就是微信小程序开发之实现一个跑步小程序的详细内容，更多关于微信跑步小程

您可能感兴趣的文章:微信小程序开发之实现食堂点餐系统微信小程序开发之实现记账本微信小程序开发之实现心情记事本微信小程序组件化开发的实战步骤微信小程序开发WXML模板语法基础教程微信小程序云开发实现分页刷新获取数据微信小程序开发中组件的生命周期详细介绍微信小程序开发中所碰到问题集锦

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 配置 方法
上一篇:小程序怎么运营与推广
下一篇:微信小程序云开发实现微信支付功能业务逻辑可靠
相关文章

 发表评论

暂时没有评论，来抢沙发吧~