教程三:新建一个小程序页面

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

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

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

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

新建页面

1-1-3.jpg1-1-4.jpg1-1-5.jpg1-1-8.jpg


我们为我们的项目来添加它的文件,你可以在小程序的开发工具里面直接添加,也可以在我们的编程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,不需要哦!这个时候在左边的手机模拟器中已经显示了一行文字,这行文字就是我们刚才建立的文件中,给出的默认文字。

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


版权保护: 本文由 清云小程序 原创,转载请保留链接: http://www.0575yun.com/articledetail/id/60.html