微信小程序开发实战教程之开发跑步微信小程序

微信小程序正式上线，很多地方在刷屏，我们可以看见很多人都在使用微信小程序，但是不少用户不会微信小程序怎么开发？下面脚本之家的小编带来微信小程序开发实战教程，手把手教你开发跑步微信小程序，随着小编一起来了解下吧。

• 软件名称：微信小程序开发工具(免内测资格) 0.12.130400 绿色免费版

• 软件大小：38MB

• 更新时间：2017-01-09

一、准备工作

1、注册一个小程序账号，得用一个没注册过公众号的邮箱注册。

2、注册过程中需要很多认证，有很多认证，比较繁琐，如果暂时只是开发测试，不进行提审、发布的话，只要完成营业执照号填写就可以了，不需要完成微信认证。

3、注册完账号，登录，在主页面左边列表中点击设置，然后再设置页面中选开发设置就可以看到AppID，用于登录开发工具。

wx.getLocation(
{ 
  type: &＃39;wgs84&＃39;, 
  success: function(res) 
 {
   var latitude = res.latitude 
   var lOngitude= res.longitude   
   var speed = res.speed        
   var accuracy = res.accuracy
 }
}
)

可以到官方文档-API查看其它API的使用方法。

4、编译运行

1、模拟器

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

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

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

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

存在的问题：

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

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

核心代码：

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

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

相关阅读：

微信小程序名单有哪些？微信小程序125个名单详细介绍

微信小程序常见问题有哪些？微信小程序常见的疑问解答汇总图文教程

微信小程序和支付宝小程序有什么区别？付宝小程序和微信小程序哪个好？

微信小程序消耗流量吗？微信小程序占内存大吗

以上就是微信小程序开发实战教程之开发跑步微信小程序的详细内容，更多请关注 第一PHP社区 其它相关文章！