開(kāi)始動(dòng)手編寫(xiě)第一個(gè)小程序頁(yè)面

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

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

新建一個(gè)項(xiàng)目。仍選擇【無(wú)AppID】，并且不勾選【在當(dāng)前目錄中創(chuàng)建quick start項(xiàng)目】這個(gè)選項(xiàng)，因?yàn)槲覀円獜牧汩_(kāi)始編寫(xiě)一個(gè)項(xiàng)目，所以每個(gè)文件都將由自己親手創(chuàng)建。項(xiàng)目創(chuàng)建后，會(huì)出現(xiàn)一個(gè)如圖3-2所示的錯(cuò)誤提示，這是因?yàn)楝F(xiàn)在的項(xiàng)目里還沒(méi)有任何文件，由于缺少必要的文件，所以小程序會(huì)報(bào)錯(cuò)。之所以完全新建一個(gè)全新的項(xiàng)目，是為了向開(kāi)發(fā)者展示這些常見(jiàn)的錯(cuò)誤消息，如果大家不想經(jīng)歷這些錯(cuò)誤，那么可以在官方提供的quick start項(xiàng)目上修改。

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

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

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

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

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

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

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

注意，頁(yè)面路徑前面不要加“/”。形如“/pages/welcome/welcome”這樣的路徑是錯(cuò)誤的。如果加入了“/”，小程序會(huì)提示錯(cuò)誤：無(wú)法找到welcome頁(yè)面。

這里要特別強(qiáng)調(diào)，路徑最后一段welcome，不需要指定具體的文件擴(kuò)展名，無(wú)須寫(xiě)成pages/welcome/welcome.wxml。MINA框架將會(huì)自動(dòng)去尋找頁(yè)面路徑，并將頁(yè)面的.json、.js、.wxml和.wxss這4個(gè)文件進(jìn)行整合。

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

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

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

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

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

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

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

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

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