近一年后，微信小程序终于正式发布了。对于开发人员和朋友，您将来可以申请创建自己的小程序。如何申请微信小程序？以下编辑器将从头开始详细分享微信小程序实用开发教程。我希望这些步骤对早期开发人员有所帮助。

微信小程序开发步骤

微信小程序申请前的准备工作：

首先，您需要注册一个小程序帐户。您需要使用尚未注册官方帐户的邮箱进行注册。注册过程需要大量认证，这很麻烦。如果只是为了测试水而又没有发布计划，则只需填写基本信息，而无需完成微信认证。

之后，您可以使用公共平台上的注册帐户登录。

然后，单击主页左侧列表中的“设置”，然后在“设置”页面中选择“开发设置”，您可以看到AppID。 AppID可用于在开发工具中注册并使用开发工具的高级功能。您可以从官方网站下载开发工具。

开始项目：

打开开发人员工具，选择小程序选项，然后直接单击“添加项目”按钮。在此步骤中，我们可以填写刚刚注册时使用的AppID。

如果项目目录中的文件为空文件夹，则会提示您是否创建快速启动项目。

选择“是”，开发人员工具将帮助我们在开发目录中生成一个简单的演示。

此演示具有完整的小程序大纲。

在iOS上，小程序的逻辑代码在JavaScriptCore中运行，而在Android上，此任务由X5内核完成。

在开发工具上，小程序的JavaScript代码在NW.js（Chrome内核）中运行。这也会导致对开发工具的影响与实际影响不同。

2.组件

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

这包括视图，滚动视图，按钮，表单等常见组件，并且还提供了地图mapcanvas

组件主要属于视图层，并使用WXML进行结构布局，类似于HTML。该样式是通过WXSS定义和修改的，其语法和用法类似于CSS。

组件使用语法示例：

3.API

网络

媒体

数据

位置

设备

接口

开发界面

网络请求接口包括普通的HTtps请求，支持上载，下载和Socket，基本上满足了我们开发中所需的网络要求。

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

用例：

wx.getLocation（{type：'wgs84'，success：function（res）{var latitude = res.latitude var longitude = res.longitude var speed = res.speed var precision = res.accuracy}}）</>

您可以转到官方文档API，以了解如何使用其他API。

编译并运行

1.模拟器调试

我们可以使用模拟器在微信提供的开发人员工具中查看小程序的效果。

如前所述，小程序具有不同的运行底层，这也导致对模拟器的影响与在手机上运行时有所不同。

2.实机调试

在左侧的选项栏中，选择项目，然后单击“预览”以产生QR码。使用管理员微信号进行扫描，即可在实际设备上看到实际效果。

实际战斗：跑步小程序

正在运行的真实计算机的屏幕截图（在iPhone7上运行，微信版本：6.3.30）：

首先实现一个用于计时的计时器，通过wx.getLocation获取坐标，将获取的坐标存储在数组中，通过间隔获取坐标的里程数，并累加以获得总里程数，并通过坐标点进行连接线。问题：

由于当前无法在地图上画线，因此在地图上粘贴小红点的方法用于显示大致的行驶路径，这是比较粗糙的；

尽管在API中使用了GCJ02类型的火星坐标，但是获得的坐标与国际坐标相似，并且仍然存在偏差。

我已将所有代码都放在GitHub上，您可以下载它以进行查看或先加注星标，以后我将进行一些优化更新。现在，这只是一个学习演示，每个人都可以交流和学习，并且实际的应用程序需要更多的优化。