3.2 开始动手编写第一个小程序页面
掌握以上的少量知识，我们就可以开始编写小程序了，是不是很惊奇。是的，小程序就是这样一门适合实践的技术，让我们马上开始吧。
我们从零开始新建一个项目。每个项目都有一个自己的名字，比如Google的Tensor Flow（一个机器学习项目）、淘宝的Ocean Base（一个分布式数据库）、微软的Azure（云计算“蔚蓝”），还有大家写代码使用的各类框架：Flask、Spring、jQuery。我们的项目虽小，但还是要给它起个名字，就叫“Orange Can”吧。没有什么特殊的意思，纯粹是因为笔者现在想吃“桔子罐头”了。大家可以随意来给项目命名。
我们按照在2.2小节里所讲的方式，新建一个项目。仍选择【无AppID】，并且不勾选【在当前目录中创建quick start项目】这个选项，因为我们要从零开始编写一个项目，所以每个文件都将由自己亲手创建。项目创建后，会出现一个如图3-2所示的错误提示，这是因为现在的项目里还没有任何文件，由于缺少必要的文件，所以小程序会报错。之所以完全新建一个全新的项目，是为了向开发者展示这些常见的错误消息，如果大家不想经历这些错误，那么可以在官方提供的quick start项目上修改。
图3-2 新建一个空白的项目，小程序会提示错误
错误信息提示我们缺少app.json文件。我们首先把3.1小节中所提到的3个应用程序文件app.json、app.js和app.wxss文件新建在项目的根目录下。这时候，小程序依然会提示错误信息，可以先忽略掉这些错误信息。
我们继续在项目根目录下新建一个pages文件夹，并在pages文件夹下新建一个名为welcome的文件夹，接着再在welcome文件夹下新建4个页面文件：welcome.js、welcome.wxml、welcome.wxss和welcome.json。新建后的文件目录结构如图3-3所示。
图3-3 新建Welcome页面后的项目文件结构
完成以上操作后，第一个页面“welcome”所需要的全部文件就新建完毕了。这时候开发工具可能依然提示有错误，继续忽略它。
我们现在要做的事情是让welcome页面能够成功地显示出来。打开/pages/welcome/现welcome.wxml文件，在文件内敲入一行文字：“Welcome，桔子罐头”。如何让这段文本成功地显示在小程序中呢？
要显示welcome这个页面，必须让小程序的MINA框架知道这个页面的“存在”以及这个页面的具体位置（文件路径）。所以，我们需要在某个应用程序级别配置文件中注册这个welcome页面。那么哪个文件是用来做应用程序级别的配置的呢？回顾上一小节中所讲的内容就应该知道，app.json文件就是小程序提供给我们的全局配置文件。
那么，我们来学习一下如何在app.json中注册welcome页面。在app.json中加入如下代码：
上面这段代码将welcome页面注册到了小程序中。代码是一个典型的json对象。这个对象的第一个属性pages接受一个数组，数组的每一项是一个字符串，用来指定我们的小程序将由哪些页面组成。每一项由对应页面的【路径+文件名】组成。比如上面这段代码中的pages/welcome/welcome，就指定了welcome页面的页面路径。
注意，页面路径前面不要加“/”。形如“/pages/welcome/welcome”这样的路径是错误的。如果加入了“/”，小程序会提示错误：无法找到welcome页面。
这里要特别强调，路径最后一段welcome，不需要指定具体的文件扩展名，无须写成pages/welcome/welcome.wxml。MINA框架将会自动去寻找页面路径，并将页面的.json、.js、.wxml和.wxss这4个文件进行整合。
如果有多个页面，需要将每个页面的路径加入到pages这个数组下，否则小程序不会加载这些页面。下面代码是Orange Can项目后期的pages注册情况。
页面的添加或者删除都需要在pages数组下面增减对应的页面路径，否则小程序会报错。当然现在只有一个welcome页面，那么pages下面先加入一个页面就可以了。随着Orange Can项目的不断开发，我们将在pages下面加入越来越多的页面路径。
现在，我们的小程序可能还会出现如图3-4所示的错误。
图3-4 未正确调用Page()的错误提示
出现这个错误的主要原因是，welcome.js文件是一个空文件，这是小程序所不允许的。即使我们的welcome页面中没有任何JavaScript代码，依然需要在welcome.js中主动调用一下Page()方法。我们在welcome.js文件中加入以下代码：
关于Page方法的用法，我们将在编写welcome.js页面的JavaScript代码时具体讲解，现在只需要知道页面的js文件是不可以完全为空白的，否则小程序会报错。
这个时候，我们的“Welcome，桔子罐头”这段文本还是没有在小程序中正确显示。那么试着在welcome.json中加入如下代码：
是的，正如welcome.js文件不能为空一样，welcome.json文件同样不可以为空，即使你目前不想在.json文件中配置任何属性，也需要加入一个空的{}，以保证小程序能正确执行。
当我们完成以上所有的操作后，Ctrl+S保存一下项目。此时，我们的小程序应该不会再报错了，同时在模拟器中也应该能够正确地显示出“Welcome，桔子罐头”这段文本。这说明welcome页面已经被MINA框架正确地加载和运行了。
我们每次创建一个新页面时，都需要手动地新建一个目录+4个文件，这是相当麻烦的事儿。这里告诉大家一个一次创建4个页面文件的小技巧（官方文档里没有提到过，开发工具也没有显示的标识）。如果app.json文件下pages数组里的页面路径，指向的是一个不存在的文件，那么MINA框架会自动创建这个页面的4个文件。我们可以试一下，在app.json文件的pages数组里添加一项“pages/orange/orange”，然后保存项目，会发生什么呢？
通过这样的方式新建的页面文件将自动补全每个页面文件里必须的基本代码，不会出现错误。本小节讲解手动创建文件的例子，是为了向开发者展示一些常见的错误提示并解释错误的原因。后续页面文件的创建将采取这种比较方便的方式。