微信小程序开发实战 手把手教你开发跑步微信小程序

4、编译运行

1、模拟器

可以在模拟器上看效果，上面降到了运行底层不同，效果跟在手机上运行有些差异

2、真机

在左边的选项栏中，选择项目，然后点预览会生产一个二维码，用管理员微信号扫一扫就可以在真机上看实际效果

实践--跑步小程序。

真机运行截图（运行于iPhone7，微信版本：6.3.30）：

home.jpeg

run.jpeg

功能：能够计算里程、时间、实时获取跑步路径（有些粗糙）

思路：主要使用了微信小程序的获取位置APIwx.getLocation()和地图组件map。

首先实现一个计时器进行计时，通过wx.getLocation()获取坐标，把获取到的坐标存在一个数组中，通过坐标每隔一段时间获取里程，进行累加得到总里程，同时也通过坐标点进行连线

存在的问题：

1、因为目前找不到在地图上画连线的方法，所以采用了在地图上贴小红点图的方法显示大概跑步路径，路径比较粗糙。

2、虽然采用了API里面的火星坐标gcj02类型，但是获取的坐标跟国际坐标差不多，依然存在着偏差。

核心代码：

我把全部代码放在github上-weChatApp-Run，可以下载来看看或者先star收藏，我以后还会进行一些优化更新。现在只是一个学习Demo，大家沟通学习，实际应用还需更多优化。

wxml文件布局代码&js文件逻辑代码：点击进入Github

（编辑：源码网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!