经过近一年的等待，微信小程序终于正式发布了。 对于开发者来说，朋友们以后可以申请创建自己的小程序。 那么如何申请微信小程序呢？ 下面小编就详细分享一下从零开始制作微信小程序的实用开发教程。 希望操作步骤对早期开发者有所帮助。

微信小程序开发步骤

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

首先，您需要注册一个小程序账号。 您需要使用未注册官方账号的邮箱进行注册。 注册过程需要大量的认证，比较繁琐。 如果您暂时只是试水，没有发布计划，则只需填写基本信息，无需完成微信认证。

之后您就可以使用注册的账号登录公众平台了。

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

启动项目：

打开开发者工具，选择小程序选项，然后直接点击“添加项目”按钮。 这一步我们可以填写我们刚注册时使用的内容。

如果工程目录下的文件为空文件夹，则会提示是否创建工程。

选择“是”，开发者工具会帮我们在开发目录下生成一个简单的Demo。

这个Demo有一个完整的小程序的大概轮廓。

1. 框架

我们先看一下官方Demo中包含的目录：

app.js：小程序逻辑、生命周期、全局变量。

app.json：小程序的常用设置，导航栏颜色等，不能注释。

app.wxss：小程序的公共样式，类似CSS。

小程序页面的组成如下：

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

app.json中需要写入微信小程序中每个页面的路径和页面文件名，数组中的第一个页面就是小程序的首页。

这四个文件按照功能可以分为三部分：

配置：json文件

逻辑层：js文件

视图层：wxss.wxml文件

在iOS上，小程序的逻辑代码在中间运行，而在iOS上，这个任务交给X5内核来完成。

在开发工具上，小程序的代码运行在NW.js（内核）中。 这也导致了开发工具上的效果与实际效果存在差异。

2. 组件

微信提供的组件很多，主要分为八种：

其中包含了view、-view、form等常见且常用的组件，同时也提供了地图。

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

组件使用语法示例：

3. API

网络

媒体

数据

地点

设备

界面

开发接口

网络请求接口包括常见的请求，支持上传、下载，基本满足我们开发中需要的网络需求。

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

使用示例：

wx.({ 类型: '', : (res) { var = res.var = res.var = res.var = res. } })

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

编译并运行

1.模拟器调试

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

我们之前提到过，小程序运行在不同的底层开发小程序必须微信认证吗，这也导致了在模拟器上和在手机上的效果存在差异。

2. 真机调试

在左侧选项栏中选择该项，然后点击预览生成二维码，用管理员微信号扫描，即可在真机上看到实际效果。

实战：运行小程序

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

首先实现一个定时器进行计时，通过wx.获取坐标，将获取到的坐标存储在数组中，每隔一段时间通过坐标获取里程，累加总里程，同时连接坐标点。 现有问题：

由于目前还没有办法在地图上绘制连接线，所以采用在地图上粘贴小红点的方法来显示大概的运行路径，比较粗糙；

虽然使用了API中的火星坐标类型，但是得到的坐标与国际坐标类似，仍然存在偏差。

我已经把所有代码放在网站上了，大家可以先下载看看或者star一下，以后我会做一些优化更新。 现在只是一个学习demo，大家交流学习，实际应用还需要更多优化。