如何从零开始，做一个跑步小程序？| 实战案例

如何从零开始，做一个跑步小程序？|实战案例

了解程序注意事项:

大家坚信小程序的形态特别适合情景应用的线下推广。如何做一个线下推广场景的小程序？

今天要和大家分享的是一个涉及地图应用的健身程序的开发设计笔记。我坚信可以给致力于业务流程线下推广的小程序开发者一些启发。

文本|alanwangmodify

准备工作/即将开始工作

首先，你需要申请注册一个小程序账号。必须用未申请注册微信微信官方账号的邮箱申请。

整个注册过程需要大量的验证，比较复杂。如果暂时只有供水，没有发表的准备，那么如果填写了基本信息，就不需要微信官方账号认证了。

以后可以在微信微信官方账号登录自己申请注册的账号。

然后在主页面左侧的目录中点击设置，然后设置网页选择开发设计设置，就可以看到AppID了。

AppID可用于在开发工具中记录和应用开发工具的高级角色。可以从官网下载开发工具。

刚开始一个新项目

打开微信开发工具，选择小程序选项，然后立即点击“添加新项”按钮。在这个过程中，我们可以填写刚刚申请注册的AppID。

如果新项目文件目录中的文档是空文件夹名，它会提醒您是否创建新的快速启动项目。

选择“是”，微信开发工具会帮助我们在开发设计文档目录中形成一个简单的Demo。

这个演示有一个小程序的详细概要。

1.体系结构

我们先来看看官网提供的Demo的文件目录:

applet网页的页面组成类似于:

每个小程序网页都是由四个不同后缀的文档以相同的方式组成相同的名称，比如:index.js，index.wxml，index.wxss，index.json

微信小程序中每个网页的路径和页面文件名必须写在app.json的pages中，pages数组中的第一个网页就是小程序的首页。

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

在iOS上，小程序的逻辑编码运行在JavaScriptCore上，而在Android上，这个日常任务交给了X5Core。

在开发工具上，小程序的JavaScript代码运行在NW.js(Chromecore)中。这也导致开发工具的实际效果和预期效果存在一定的出入。

2.成分

微信提供了很多组件，重点分为八种:

其中包含了视图、滚动视图、按钮、表单等常用组件，还提供了地形图、画板画布等独特的显示元素。

关键组件属于主视图层，合理布局按照WXML构建，类似HTML。样式是根据WXSS定义和改变的，其英文语法和应用类似于CSS。

成分英语的语法案例；

这是一个总的主要观点。

样式已更改的主视图

大量组件及相关 *** 作方法可在官网文本文档“组件”部分查询。

3.应用程序接口

在applet中，以下部分可能有几个API套接字:

其中，互联网要求的应用必须先去微信微信官方账号设置授权管理网站的域名。

互联网插座要求包括一般HTTPS要求，适用于提交，免费下载和插座。大部分都考虑到了每个人开发设计所必须的互联网需求。

这个API属于逻辑层，用JS逻辑文件编写。

应用案例:

wx.getLocation({type:'wgs84'，success:function(RES){varlatitude=RES.latitudevarlongitude=RES.longitudevarspeed=RES.speedvaraccuracy=RES.accuracy}})

能够去官网文本文档——API查询其他API的 *** 作方法。

编译器运行

1.手机模拟器调整

我们可以使用微信提供的微信开发工具中的手机模拟器来查询小程序运行的实际效果。

前面说过，小程序的运行在底层是不一样的，这也造成了在手机模拟器上的实际效果，会和在手机上运行不一样。

2.真实机器调整

在左侧选项栏中，选择一个新项目，然后单击浏览以生成QR码。用经理的微信号扫描一下，在真机里就能看到预期的效果。

练习:慢跑小程序

真机运行截图(运行在iPhone7上，旧版微信:6.3.30):

首先，当一个计时器启动时，根据wx.getLocation()获取坐标，并将获取的坐标存储在一个数组中。根据坐标，每隔一段时间获取里程，累计总里程。另外，在线连接也是根据坐标点进行的。

现有缺点:

我已经把所有代码放在GitHub上了，所以你可以下载并讨论它们或者先启动它们。之后我会继续进行一些升级。现在的学习培训只有一个Demo，大家可以沟通交流学习培训，具体应用还有待大大提高。

全文:http://www.jianshu.com/p/6e826464d52c

开源详细地址:https://github.com/alanwangmodify/weChatApp-Run

知道程序(微信号zxcx0101)是爱范儿集团的微信官方账号，致力于小程序的绿色生态。人人提供小程序最全面、最新鲜的新闻资讯(资讯、观点、手册、主题活动)和服务项目，在这里你可以掌握小程序的一切。

注:阅读相关网站基本建设方法的文章，请移至网站建设教程频道栏目。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zz/769403.html