当前位置:首页手机软件教程微信小程序开发实战 手把手教你开发跑步微信小程序 (3)

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

小王数码
2017-01-10 10:47 电脑百事网 0

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

提示:支持键盘“← →”键翻页 阅读全文
意见反馈
返回顶部