2.3 创建小程序页面

启动微信开发工具，创建新的项目demo2,此处不勾选“创建QuickStart项目”复选项，如图2-5所示。

单击“确定”按钮后，可以看到开发工具中的“目录结构”界面只显示项目配置文件（project. config. json），同时系统提示错误信息，如图2-6所示。

将在2.1.1小节中提到的3个主体文件（app. js、app. json和app. wxss）在项目的主目录下建立，小程序依然提示错误信息。

2.3.1 创建第一个页面文件

继续在项目主目录下新建一个pages目录，在pages目录下新建一个index目录，并在index目录下新建index. js、index. json、in-dex. wxml和index. wxss空文件。新建index页面后的项目目录结构如图2-7所示。

此时，系统仍然提示错误信息。假设，我们的目的是页面能显示“欢迎学习小程序，实现大梦想”。首先，打开index. wxml文件，输入“欢迎学习小程序，实现大梦想”。然后，告诉系统这个文件的名称及所处路径。因此，打开项目配置文件app. json，输入如下代码：

这段代码将index页面注册到小程序中，这个对象的第一属性pages接受了一个数组，该数组的每一项是一个字符串，该字符串由“路径”+“文件名”组成，不包含扩展名。pages属性用来指定这个项目由哪些页面组成，多个页面之间用“, ”分隔。

接下来，打开index. json文件，输入如下代码：

在index. json文件中，只需加入一对空“{}”即可。

打开index. js文件，输入如下代码：

只需引入Page（）方法，保证index. js文件不为空即可。

将这4个文件保存后进行编译，在模拟器中即可得到所需的结果。各文件的代码内容如表2-1所示。

2.3.2 创建另一个页面文件

在2.3.1小节中，我们采用逐步创建目录及4个文件的方式成功创建了一个页面文件。在本节中，我们采用另一种方式来创建另一个页面文件news。

打开app. json文件，输入以下代码：

将文件保存后，我们发现系统在目录结构中自动添加了相应的目录和文件，系统还自动补全了每个页面文件中必需的基本代码，而且没有出现错误提示，如图2-8所示。