清云小程序教程三：新建一个小程序页面

原文链接：http://www.0575yun.com/articledetail/id/60.html

从本节课开始我们就要逐步讲解小程序的编写，小程序的基本知识，我们就在小程序的编写中逐步为大家一一去讲解介绍。我们将在项目中为大家一条一条讲解，在项目中发现问题，在项目中解决问题，在项目中学习小程序的知识。

如果我们要自己去开发一个全新的小程序，通常来说有2种方式，第一种是，新建一个官方的示例项目，然后在它的示例项目基础目录下，把你不需要的一些文件删除掉；另一种方式是，新建一个空白的项目。

下面我们就来讲讲怎样新建一个空白项目。

在小程序的项目创建页面中，点击右下方的“+”，然后，项目目录中选择一个空的文件夹，项目名称中，有一个选项叫做“建立普通快速启动模板”，如果是建立一个空白项目的话，把前面的勾”✔“去掉，点击确定，然后我们就能看到一个空白的项目，它没有任何的项目代码。在右边栏，我们可以看到，它有一些模拟窗口，一般我们选择iPhone 6来作为我们的模拟机型。因为我没还没有写过代码，现在看到的界面是小程序给我们的默认界面。

 

我们为我们的项目来添加它的文件，你可以在小程序的开发工具里面直接添加，也可以在我们的编程APP中进行添加。先来讲讲在编程APP如vs code中怎么来添加，首先，在左边栏空白地方，点击右键，选择“新建文件”，建立一个app.json文件，在建立一个app.js文件，建立这两个文件之后，我们会发现，在小程序的开发工具中，也出现了这两个文件。那么我们来建一个页面，我们已经知道，一个页面包含了4个文件，如果在vs code中新建一个页面，我们就要自己再建立（.wxss）、（.wxml）、（.js）和（.json）这4个文件，实在是太麻烦了，所以在这里给大家一个建议，如果我们要新建一个这样的页面文件的话，最好使用小程序的开发工具来新建。

现在来讲讲小程序中，如何新建一个页面。选中“Pages”，右键”新建“，选择"Page"，输入页面的名称“classic”，然后点回车，这里我们可以看到，弹出来一个窗口，“新建Page失败”。为什么会出现这样的问题呢？这是因为app.json和app.js这两个文件是很特殊的。如果说，你新建了这2个文件，但是你没有写任何的代码的话，小程序是会报错的，我们需要在这两个空白的文件中加一点初始代码。首先这个app.json，它既然是一个json文件，那么我们就添加一个”{ }“，然后在app.js中加入”APP( )“,添加了这些之后，我们再来”Pages“下新建一个”classic“页面，添加成功后，我们会发现开发工具已经帮我们自动添加好了classic.js、classic.json、classic.wxss和classic.wxml这4个页面里面的文件。但是，如果你不是用小程序的开发工具来新建的话，在如vs code中就需要手动添加这4个文件。

此外，我们用小程序的开发工具来新建页面的话，还有一个好处。我们打开”app.json“文件，在新建之前，我们只写了一个“{ }”，而在我们新建页面后，小程序已经自动帮我们添加了”{"Pages":["page/classic"]}“，其中“page/classic”这是一个路径，这是很重要的。我们每新建一个页面，这个页面的路径都需要在app.json中注册，如果不注册，那么小程序是找不到这个页面的。所以一般我们都是用小程序的开发工具来新建页面，这样它就会自动给我们添加路径；但是如果使用第三方开发工具新建的话，路径就需要自己手动添加。

刚才我们是直接在“Pages”下新建的Page页面，其实这样是不对的，因为会有很多个Page页面，所以我们需要建立一个种目录。这时候我们需要把刚才建立的“classic”页面删除，但是在这里我们无法全选这些文件，这时候，我们就需要另一种方法：选中“classic”右键选择“在硬盘打开”，在资源管理器里面把我们的这4个文件删除掉，这样就没有了。然后在“Pages”下，选择“新建”->“目录”->命名为“classic”，然后再在“classic”下新建“classic”页面，这时候我们在app.json中可以看到，它已经自动帮我们把路径添加了进去。这里我们需要注意，新建页面它会自动添加路径，但是它不会随着我们删除页面而把路径删除，所以需要我们自己手动把它不要的路径删除。这时候显示在app.json中的”{"Pages":["page/classic/classic"]}“代表的就是在Pages下面的classic下面的classic页面，不需要再后面加如.wxml，不需要哦！这个时候在左边的手机模拟器中已经显示了一行文字，这行文字就是我们刚才建立的文件中，给出的默认文字。

本节课就讲到这里，新建一个页面，然后对它的目录结构有一个基本的了解。