開始動手編寫第一個小程序頁面

掌握以上的少量知識，我們就可以開始編寫小程序了，是不是很驚奇。是的，小程序就是這樣一門適合實踐的技術(shù)，讓我們馬上開始吧。

我們從零開始新建一個項目。每個項目都有一個自己的名字，比如Google的Tensor Flow（一個機器學(xué)習(xí)項目）、淘寶的Ocean Base（一個分布式數(shù)據(jù)庫）、微軟的Azure（云計算“蔚藍”），還有大家寫代碼使用的各類框架：Flask、Spring、jQuery。我們的項目雖小，但還是要給它起個名字，就叫“Orange Can”吧。沒有什么特殊的意思，純粹是因為筆者現(xiàn)在想吃“桔子罐頭”了。大家可以隨意來給項目命名。

新建一個項目。仍選擇【無AppID】，并且不勾選【在當(dāng)前目錄中創(chuàng)建quick start項目】這個選項，因為我們要從零開始編寫一個項目，所以每個文件都將由自己親手創(chuàng)建。項目創(chuàng)建后，會出現(xiàn)一個如圖3-2所示的錯誤提示，這是因為現(xiàn)在的項目里還沒有任何文件，由于缺少必要的文件，所以小程序會報錯。之所以完全新建一個全新的項目，是為了向開發(fā)者展示這些常見的錯誤消息，如果大家不想經(jīng)歷這些錯誤，那么可以在官方提供的quick start項目上修改。

錯誤信息提示我們?nèi)鄙?/span>app.json文件。我們首先把3.1小節(jié)中所提到的3個應(yīng)用程序文件app.json、app.js和app.wxss文件新建在項目的根目錄下。這時候，小程序依然會提示錯誤信息，可以先忽略掉這些錯誤信息。

我們繼續(xù)在項目根目錄下新建一個pages文件夾，并在pages文件夾下新建一個名為welcome的文件夾，接著再在welcome文件夾下新建4個頁面文件：welcome.js、welcome.wxml、welcome.wxss和welcome.json。

完成以上操作后，第一個頁面“welcome”所需要的全部文件就新建完畢了。這時候開發(fā)工具可能依然提示有錯誤，繼續(xù)忽略它。

我們現(xiàn)在要做的事情是讓welcome頁面能夠成功地顯示出來。打開/pages/welcome/現(xiàn)welcome.wxml文件，在文件內(nèi)敲入一行文字：“Welcome，桔子罐頭”。如何讓這段文本成功地顯示在小程序中呢？

要顯示welcome這個頁面，必須讓小程序的MINA框架知道這個頁面的“存在”以及這個頁面的具體位置（文件路徑）。所以，我們需要在某個應(yīng)用程序級別配置文件中注冊這個welcome頁面。那么哪個文件是用來做應(yīng)用程序級別的配置的呢？回顧上一小節(jié)中所講的內(nèi)容就應(yīng)該知道，app.json文件就是小程序提供給我們的全局配置文件。

那么，我們來學(xué)習(xí)一下如何在app.json中注冊welcome頁面。在app.json中加入如下代碼：

上面這段代碼將welcome頁面注冊到了小程序中。代碼是一個典型的json對象。這個對象的第一個屬性pages接受一個數(shù)組，數(shù)組的每一項是一個字符串，用來指定我們的小程序?qū)⒂赡男╉撁娼M成。每一項由對應(yīng)頁面的【路徑+文件名】組成。比如上面這段代碼中的pages/welcome/welcome，就指定了welcome頁面的頁面路徑。

注意，頁面路徑前面不要加“/”。形如“/pages/welcome/welcome”這樣的路徑是錯誤的。如果加入了“/”，小程序會提示錯誤：無法找到welcome頁面。

這里要特別強調(diào)，路徑最后一段welcome，不需要指定具體的文件擴展名，無須寫成pages/welcome/welcome.wxml。MINA框架將會自動去尋找頁面路徑，并將頁面的.json、.js、.wxml和.wxss這4個文件進行整合。

如果有多個頁面，需要將每個頁面的路徑加入到pages這個數(shù)組下，否則小程序不會加載這些頁面。下面代碼是Orange Can項目后期的pages注冊情況。

頁面的添加或者刪除都需要在pages數(shù)組下面增減對應(yīng)的頁面路徑，否則小程序會報錯。當(dāng)然現(xiàn)在只有一個welcome頁面，那么pages下面先加入一個頁面就可以了。隨著Orange Can項目的不斷開發(fā)，我們將在pages下面加入越來越多的頁面路徑。

出現(xiàn)這個錯誤的主要原因是，welcome.js文件是一個空文件，這是小程序所不允許的。即使我們的welcome頁面中沒有任何JavaScript代碼，依然需要在welcome.js中主動調(diào)用一下Page()方法。我們在welcome.js文件中加入以下代碼：

關(guān)于Page方法的用法，我們將在編寫welcome.js頁面的JavaScript代碼時具體講解，現(xiàn)在只需要知道頁面的js文件是不可以完全為空白的，否則小程序會報錯。

這個時候，我們的“Welcome，桔子罐頭”這段文本還是沒有在小程序中正確顯示。那么試著在welcome.json中加入如下代碼：

是的，正如welcome.js文件不能為空一樣，welcome.json文件同樣不可以為空，即使你目前不想在.json文件中配置任何屬性，也需要加入一個空的{}，以保證小程序能正確執(zhí)行。

當(dāng)我們完成以上所有的操作后，Ctrl+S保存一下項目。此時，我們的小程序應(yīng)該不會再報錯了，同時在模擬器中也應(yīng)該能夠正確地顯示出“Welcome，桔子罐頭”這段文本。這說明welcome頁面已經(jīng)被MINA框架正確地加載和運行了。

我們每次創(chuàng)建一個新頁面時，都需要手動地新建一個目錄+4個文件，這是相當(dāng)麻煩的事兒。這里告訴大家一個一次創(chuàng)建4個頁面文件的小技巧（官方文檔里沒有提到過，開發(fā)工具也沒有顯示的標(biāo)識）。如果app.json文件下pages數(shù)組里的頁面路徑，指向的是一個不存在的文件，那么MINA框架會自動創(chuàng)建這個頁面的4個文件。我們可以試一下，在app.json文件的pages數(shù)組里添加一項“pages/orange/orange”，然后保存項目，會發(fā)生什么呢？

通過這樣的方式新建的頁面文件將自動補全每個頁面文件里必須的基本代碼，不會出現(xiàn)錯誤。本小節(jié)講解手動創(chuàng)建文件的例子，是為了向開發(fā)者展示一些常見的錯誤提示并解釋錯誤的原因。后續(xù)頁面文件的創(chuàng)建將采取這種比較方便的方式。