微信开发制作一款跑步微信小程序（跑步微信软件）

序

我已经把所有代码放在github -weChatApp-Run上了，可以先下载看看或者由star收藏，未来我会做一些优化更新。现在它只是一个学习演示。大家交流学习，实际应用还需要更多优化。

文本1。准备工作1。要注册小程序帐户，您必须使用尚未在微信官方帐户中注册的电子邮件地址。2.注册过程需要大量的身份验证，这很复杂。如果暂时只是开发测试，没有试用和发布，填写营业执照号即可，不需要完成微信认证。3.注册帐户后，登录，在主页左侧的列表中单击“设置”，然后在“设置”页面中选择“开发设置”以查看用于登录开发工具的AppID。

主页

设置页面

第二，开发工具可以从官方网站下载。

开发工具

开发工具编辑页面

第三，启动项目，打开开发人员工具，选择applet选项，并到达添加项目页面。

添加项目

此时，它用于设置前面页面的AppId。

如果项目目录中的文件是空文件夹，系统将提示您是否创建快速启动项目。选择“是”，开发者工具将帮助我们在开发目录中生成一个简单的演示。这个演示有一个完整的小程序的一般框架。

1、框架首先看下一个目录:

文件目录。png

App.js:小程序逻辑、生命周期和全局变量app.json:小程序公共设置、导航栏颜色等。您不能注释app.wxss: applet公共样式，如CSS。

小程序页面的组成:

页面构成

每个小程序页面由相同路径下的四个不同的同名后缀文件组成，例如:index.js、index.wxml、index.wxss、index.json

葛文佳介绍道

微信小程序中每个页面的【路径+页面名称】需要写入app.json的pages中，pages中的第一页是小程序的主页。

小路

这四个文件根据其功能可以分为三个部分:

在iOS上，小程序的javascript代码在Android上的javascriptCore中运行，小程序的javascript代码通过X5内核在开发工具上解析，小程序的JavaScript代码在nwjs（chrome内核）中运行。因此，开发工具的效果与实际效果不同。

2.组件微信提供了许多组件，主要分为八种类型:

包括视图、scroll -视图、按钮、表单等常用组件，还提供了地图《a href = & quothttp://www.php.cn/code/8210.html"目标= & quot_ blank & quot& gt地图& lt/a & gt；，画布《a href = & quothttp://www.php.cn/code/7892.html"目标= & quot_ blank & quot& gt画布& lt/a & gt；。

组件主要属于视图层，它们通过wxml进行布局，类似于html。通过wxss修改样式，类似于css。组件用法语法示例:

& lt！--普通视图--》；& lt视图& gt这是一种正常的观点

3.API，其中使用网络请求必须首先登录公共平台上的小程序帐户，并在设置页面上设置允许访问的域名。网络请求包括普通的http请求，支持上传、下载和套接字。基本满足了我们在网络方面的发展需求。

这些API属于逻辑层，用js文件编写，示例如下:

wx . get location（{ type:& amp；#39;wgs84 & amp#39;，success:function（RES）{ var latitude = RES . latitude var longitude = RES . longitude var speed = RES . speed var accuracy = RES . accuracy } }）您可以在官方文档-API中查看其他API的用法。

四、编译运行1、模拟器在模拟器上可以看到效果，这与在底层运行不同，与在手机上运行的效果也有些不同。

模拟器。png

2.真机在左侧的选项栏中。选择一个项目，然后点按“预览”以生成二维码。你可以用管理员的微信号扫描一下，看看真机上的实际效果。

粘贴_Image.png

练习--跑步小程序。真机运行截图（在iPhone7上运行，微信版本:6 . 3 . 30）:

home.jpeg

run.jpeg

slideback.jpeg

slide.jpeg

功能:可以实时计算里程、时间、获取跑步路线（略显粗糙）。

思路:我们主要使用微信小程序的采集位置APIwx.getLocation（）和地图组件map。首先，实现一个计时器来计时，通过wx.getLocation（）获取坐标，并将获取的坐标存储在一个数组中。每隔一段时间通过坐标获得里程，并累计总里程。同时，通过坐标点连线也存在问题:1。由于目前没有办法在地图上绘制连接线，所以采用在地图上粘贴小红点地图的方法来显示大致的行驶路径，比较粗糙。2.虽然采用了API中的火星坐标gcj02，但得到的坐标与国际坐标几乎一致，仍然存在偏差。

核心代码:我把所有代码都放在了github -weChatApp-Run上，可以先下载看看，也可以先被star收藏，未来我会做一些优化更新。现在它只是一个学习演示。大家交流学习，实际应用还需要更多优化。

Wxml文件布局代码:

& lt视图class = & quothead & quotstyle = & quotflex -方向:排；"& gt& ltimage class = & quot图标& quotsrc = & quot/resources/joy run . png & quot；mode = & quotaspectFill&quot/& gt；& ltbutton bindtap = & quot打开位置& gt打开位置

var countTooGetLocation = 0；var total _ micro _ sec = 0；var star run = 0；var total second = 0；var oriMeters = 0.0/*毫秒倒计时*/function count _ down（that）{ if（star run = = 0）{ return；} if（countTooGetLocation & gt；= 100）{ var time = date _ format（total _ micro _ sec）；that.updateTime（时间）；} if（countTooGetLocation & gt；= 5000）{//1000是1s that . get location（）；countTooGetLocation = 0；} setTimeout setTimeout（function（）{ countTooGetLocation+= 10；total _ micro _ sec+= 10；倒计时（那个）；}，10）}//时间打印格式，如03:25:19 86。函数date _ format（micro _ second）{//seconds var second = math。floor（micro _ second/1000）将每10ms调用一次；//小时位var hr = Math.floor（秒/3600）；//分钟位var min = fill _ zero _ prefix（math。地板（（第二个-HR * 3600）/60）；//第二位var sec = fill _ zero _ prefix（（second -HR * 3600-min * 60））；//等于= & gtvar sec =秒% 60；返回HR+& quot；:& quot+min+& quot；:& quot+sec+& quot；"；}函数get distance（la t1，lng1，lat2，LNG 2）{ var dis = 0；var rad lat 1 = tora dians（la t1）；var rad lat 2 = tora dians（la T2）；var deltaLat = rad lat 1 -rad lat 2；var delta LNG = tora dians（LNG 1）-tora dians（LNG 2）；var dis = 2 * math . asin（math . sqrt（math . pow（math . sin（delta lat/2），2）+math . cos（rad lat 1）* math . cos（rad lat 2）* math . pow（math . sin（delta LNG/2），2））））；返回dis * 6378137函数tora dians（d）{ return d * Math。PI/180；}}函数fill _ zero _ prefix（num）{ return num & lt；10 ?"0 & gt；+num:num }/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *（{ data:& amp；#39;& amp#39;，isLocation:false，纬度:0，经度:0，标记:【】，覆盖范围:【】，米:0.00，时间:& quot0:00:00 & quot；}，/* * * * * onLoad:function（options）{//页面初始化选项是参数this . get location（）console . log（“onLoad & quot；）count_down（这个）；}，//* * * * * * * * * * * * * * * * * * * * open location:function（）{ wx . get location（{ type:& amp；#39;gcj02 & amp#39;，//默认情况下，wgs84返回gps坐标，gcj02返回可用于wx.openLocation的坐标成功:function（RES）{ wx . open location（{ Latitude:RES . Latitude，//Latitude，范围为-90~90，负数表示南纬的经度:res.longitude，//经度，范围为-180~180，负数表示西经的刻度:28，//缩放比例}}}}，//***********} star run = 1；count_down（这个）；this . get location（）；}，//* * * * * stop run:function（）{ star run = 0；count_down（这个）；}，//* * * * * * * * * * * * * * * * * * * * * * * * update time:function（time）{ var data = this . data；data.time = timethis.data = datathis . setdata（{ time:time，}）}，//* * * * * * * * * * * * * * * * * * * * * * get location:function（）{ var that = this wx . get location（{ type:& amp；#39;gcj02 & amp#39;，//默认情况下，wgs84返回gps坐标，gcj02返回可用于wx.openLocation成功的坐标:function（RES）{ console . log（“res--------& quot；）console . log（RES）//make datas var new cover = { latitude:RES . latitude，longitude: res.longitude，icon path:& amp；#39;/resources/red point . png & amp；#39;, };var ori covers = the . data . covers；console . log（& quot；-----------& quot；）console . log（oriMeters）；var len = oriCovers.lengthvar lastCoverif（len = = 0）{ oricovers . push（new cover）；} len = oriCovers.lengthvar lastCover = oriCovers【len -1】；console . log（& quot；oricovers ----------& quot；）console . log（oriCovers，len）；var new meters = get distance（last cover . latitude，lastCover.longitude，res.latitude，RES . longitude）/1000；if（new meters & lt；0.0015）{ new meters = 0.0；} oriMeters = oriMeters+new meters；console . log（& quot；纽米----------& quot；）console . log（new meters）；var电表=新号码（oriMeters）；var show meters = meters . to fixed（2）；oricovers . push（new cover）；that . setdata（{ latitude:RES . latitude，longitude: res.longitude，markers:【】，covers: oriCovers，meters:showMeters，}）；},})}) 5.本文之后是快速入门介绍。详情请参考官方文件。

【相关建议】

1.下载微信微信官方账号平台源代码。

2.PigCMS（PigCMS）微电商系统运营版（独立微店商城+三级分销系统）

3.微信网王v3.4.5高级商业版微信魔方源代码

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：微信开发制作一款跑步微信小程序（跑步微信软件） https://zhujicankao.com/114142.html