这个教程适用对象：这篇文章适合所有的想学习微信小程序的新手们，需要你们有一点的html和css的基础。如果你只是想了解下小程序的开发流程这篇文章也特别适合你。大神们可以直接跳过这篇文章了。

微信已经为小程序开发了一个名为“微信开发人员工具”的工具。最新版本的WeChat developer Tools集成了WeChat官方帐户的调试和开发功能，这表明WeChat对小程序的信心。对于初学者来说，微信小程序的所有开发工作最好在此[微信开发者工具]上完成。编辑后调试非常方便。微信为此开发了window64、window32和mac的三个版本，甚至Windows也开发了两个版本。我真的很佩服微信的用户体验。您可以去百度搜索和下载ide。

选择“本地小程序项目”以进入第二个屏幕。在此屏幕上微信小程序，填写小程序的appid和项目名称以及项目所在的目录。因为Xiong Xiong不符合进行内部测试的资格，所以我没有appid。只需点击第一个框右下方的绿色字样“ No appid”。然后填写项目的名称，然后写下您喜欢的任何内容，但我建议您不要随便写。最好遵循标准流程并写得更正式。这是开发人员的态度。我们应该重视每个项目。这是一个小型学习演示。最后，选择项目所在的目录。在这里您可以选择任何目录，但我仍然希望您可以为此项目创建目录。好的，填写完所有内容后，点击右下角的“添加项目”。

在编码之前，请谈谈小程序的开发规则（担心一些初学者无法理解它，我们称之为规则）。下一个内容非常重要，请仔细看！

小程序开发需要三个应用程序文件来描述整个程序，以及一个页面文件夹来描述多个页面。

（1）这三个应用文件是app.js，app.json和app.wxss。

（[2）接下来，让我们讨论页面文件夹：

小程序的所有显示页面都必须以子文件夹（包括主页）的形式存储在pages文件夹中。项目显示多少页，需要在pages文件夹下创建多少个子文件夹。每个页面的子文件夹必须包含以下四个文件：.js，.wxml，.wxss和.json（*表示文件名）。这四个文件的文件名必须与子文件夹的名称相同。

以上四个文件仅影响当前页面，不影响整个页面和其他页面

我已经说了很多，现在我们将正式开发它：

1、单击目录窗口右上角的+号，以创建页面文件夹以及app.js，app.json和app.wxss文件。创建完成后，如下所示：

2、目前，页面文件夹中没有页面。现在我们的项目需要一个主页，然后我们需要在pages目录下创建一个新的主页子文件夹，然后单击页面行最右边的+号。创建索引子文件夹，然后单击该目录的+号。在索引行的右侧创建此子文件夹中的三个文件（鉴于上面发现的错误，此处不是创建index.json文件，您需要在何时创建）。

3、页面结构现已完成，并且有一些页面。但是，由于目前我们尚未编写代码，因此此刻页面上什么也没有显示！

如上所述，wxml是用于构建页面元素的文件。我从子页面的wxml文件开始，然后一点一点地编写它。写下第一行代码：

写完后，只需保存crtl + s。今天，子页面的代码编写工作已经完成。是不是令人恐惧或难以置信？今天，子页面编写了这一行代码。

4、尽管我们已经完成了4、主页的编写，但是applet页面上没有任何显示。

别担心！这是因为我们尚未配置它。如果要显示页面，则必须在app.json中使用参数pages配置小程序的页面。 Pages是一个数组，每个元素都是每个页面的相对根目录路径+文件名。文件名不需要写后缀。当applet运行时，它将自动查找.json .wxml .wxss .js文件。数组的第一项表示applet的初始页面，即主页。小程序的每个页面都需要在数组中配置，并且当小程序页面增加或减少时，都需要修改pages数组。

现在我们将配置信息写入app.json中，我们使用index作为applet的初始页面，代码如下：

{"pages": [

"pages/index/index"

]

}

注意：配置文件的准备遵循json格式，参数需要用双引号“”括起来，配置文件的开头和结尾都需要用大括号“ {”“}”括起来。