实战：从零开始制作一个跑步微信小程序

更多的组件以及相关使用方法可以到官方文档-组件查看。

API

小程序中，大致提供以下几个部分的 API 接口：

• 网络
• 媒体
• 数据
• 位置
• 设备
• 界面
• 开发接口

其中网络请求的使用必须先到公众平台登录小程序账号，在设置页面那里，设置允许访问的域名，网络请求包含了普通的HTTP请求、支持上传、下载、Socket。基本上满足了我们开发中所需要的网络需求。

这些API属于逻辑层，写在JavaScript文件中。

使用实例:

wx.getLocation({   type: 'wgs84',   success: function(res) {       var latitude = res.latitude        var longitude = res.longitude        var speed = res.speed        var accuracy = res.accuracy }})

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

编译运行

1.模拟器

可以在模拟器上看效果，上面提到了小程序的运行底层不同，效果在手机上运行也会有些差异。

模拟器

2.真机

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

实践：跑步小程序

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

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

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

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

存在的问题：

1. 因为目前找不到在地图上画连线的方法，所以采用了在地图上贴小红点图的方法显示大概跑步路径，路径比较粗糙。
2. 虽然采用了API里面的火星坐标gcj02类型，但是获取的坐标跟国际坐标差不多，依然存在着偏差。

核心代码：

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

wxml文件布局代码：

<view class="head" style="flex-direction:row;">    <image class="icon" src="/resources/joyrun.png" mode="aspectFill"/>    <button bindtap="openLocation">打开位置</button>    <button bindtap="starRun">开始跑步</button>    <button bindtap
 2/5   首页 上一页 1 2 3 4 5 下一页 尾页