在這一章，我們?cè)诓皇褂迷崎_(kāi)發(fā)的情況下，會(huì)一步步開(kāi)發(fā)出一個(gè)靜態(tài)的小程序。為了學(xué)習(xí)和講解的方便，大家可以重新建一個(gè)項(xiàng)目，在創(chuàng)建項(xiàng)目時(shí)，也可以勾選“不使用云服務(wù)”。

在了解以下知識(shí)時(shí)，大家只需要結(jié)合開(kāi)發(fā)者工具的編輯器對(duì)照著介紹，一一展開(kāi)文件夾、用編輯器查看文件的源代碼，大致瀏覽一下即可。這就是實(shí)戰(zhàn)學(xué)習(xí)的方法（和看書(shū)、看視頻的學(xué)習(xí)方法不同），千萬(wàn)不要死記硬背哦，你以后用多了自然就記住啦~

1、小程序的文件結(jié)構(gòu)

在開(kāi)發(fā)者工具的編輯器里可以看到小程序源文件的根目錄下有app.js、app.json和app.wxss，這是小程序必不可少的三個(gè)主體文件，下面我們來(lái)大致了解一下小程序文件結(jié)構(gòu)（只需要大致了解就可以啦~不理解也沒(méi)有關(guān)系）。

• app.json：小程序的公共設(shè)置，可以對(duì)小程序進(jìn)行全局配置，決定頁(yè)面文件的路徑、窗口表現(xiàn)、設(shè)置多 tab 等；

• app.wxss：小程序的公共樣式表，可以配置整個(gè)小程序的文字的字體、顏色、背景，圖片的大小等樣式；

• app.js：小程序的邏輯（這個(gè)可以先放著，不用管）

• pages文件夾：這里存放著小程序的所有頁(yè)面，展開(kāi)pages文件夾就可以看到有index和logs兩個(gè)頁(yè)面文件夾；

小任務(wù)：在結(jié)合開(kāi)發(fā)者工具實(shí)戰(zhàn)了解了上面的知識(shí)之后，你明白了哪個(gè)文件夾是小程序的根目錄嗎？

2、小程序的頁(yè)面組成

在每一個(gè)頁(yè)面文件夾里都有四個(gè)文件，這四個(gè)文件的名稱(chēng)都是一樣的，它們分別為：

• json文件，和上面的app.json作用基本相同，只是app.json控制的是整個(gè)小程序的設(shè)置，而頁(yè)面的json文件只控制單個(gè)頁(yè)面的配置（因?yàn)橛袝r(shí)候全局配置就夠用了，所以頁(yè)面配置有時(shí)候是空的）；

• wxml文件，小程序的頁(yè)面結(jié)構(gòu)，文字、圖片、音樂(lè)、視頻、地圖、輪播等組件都會(huì)放在這里；

• wxss文件，小程序的頁(yè)面樣式，和app.wxss一樣是控制樣式，而頁(yè)面的wxss文件是控制單個(gè)頁(yè)面的樣式；

• js文件，這個(gè)是控制小程序頁(yè)面的邏輯（這個(gè)可以先放著，不用管）

2.1.2 小程序的全局配置

在前面我們已經(jīng)提到，app.json可以對(duì)整個(gè)小程序進(jìn)行全局配置，而配置的依據(jù)就需要我們參考技術(shù)文檔了。

技術(shù)文檔：小程序全局配置

打開(kāi)上面的小程序全局配置技術(shù)文檔，里面會(huì)有很多你看不懂的名稱(chēng)，這是非常正常的，大家也不需要記，只需要花兩三分鐘時(shí)間快速瀏覽一下即可，后面我們會(huì)教大家如何結(jié)合技術(shù)文檔來(lái)實(shí)戰(zhàn)學(xué)習(xí)。

1、json語(yǔ)法

在對(duì)小程序進(jìn)行配置之前，可以使用開(kāi)發(fā)者工具打開(kāi)app.json文件，對(duì)照著下面的json語(yǔ)法來(lái)進(jìn)行理解：

• 大括號(hào)?{}保存對(duì)象?，我們來(lái)看一下app.json，哪些地方用到了大括號(hào){}，{}里面就是對(duì)象；

• 中括號(hào)?[]保存數(shù)組?，我們可以看到中括號(hào)[]里有“pages/index/index”等（這是小程序頁(yè)面的路徑），那這些頁(yè)面路徑就是數(shù)組啦；數(shù)組里的值都是平級(jí)的關(guān)系；

• 各個(gè)數(shù)據(jù)之間由?英文字符逗號(hào),?隔開(kāi)，注意這里的數(shù)據(jù)包括對(duì)象、數(shù)據(jù)、單條屬性與值，大家可以結(jié)合app.json?仔細(xì)比對(duì)逗號(hào),出現(xiàn)的位置?，平級(jí)數(shù)據(jù)的最后一條數(shù)據(jù)不要加逗號(hào),，也就是只有數(shù)據(jù)之間才有逗號(hào)。

• 字段名稱(chēng)（屬性名）與值之間用**冒號(hào):**隔開(kāi)，字段名稱(chēng)在前，字段的取值在后；

• 字段名稱(chēng)用?雙引號(hào)””?給包著；

注意，這里所有的標(biāo)點(diǎn)符號(hào)都需要是英文狀態(tài)下的，也就是我們經(jīng)常聽(tīng)說(shuō)的全角半角里的半角狀態(tài)，不然會(huì)報(bào)錯(cuò)哦。很多之前沒(méi)有接觸過(guò)編程的童鞋經(jīng)常會(huì)犯這樣的錯(cuò)誤，一定要多多注意！?當(dāng)我們要輸入編程里的標(biāo)點(diǎn)符號(hào)時(shí)，一定要先確認(rèn)一下，你的輸入法是漢語(yǔ)形態(tài)，還是字母形態(tài)，如果輸?shù)氖菨h字形態(tài)，一定要切換哦~

2、設(shè)置小程序窗口表現(xiàn)

使用開(kāi)發(fā)者工具打開(kāi)app.json文件，可以看到如下代碼里有一個(gè)window的字段名（如前面所說(shuō)，字段名要用雙引號(hào)””包著），它的值是一個(gè)對(duì)象（如前面所說(shuō)，{}大括號(hào)里的就是對(duì)象），可見(jiàn)對(duì)象可以是一組數(shù)據(jù)的集合，這個(gè)集合里包含著幾條數(shù)據(jù)。

"window": { ?"backgroundTextStyle": "light", ?"navigationBarBackgroundColor": "#fff", ?"navigationBarTitleText": "WeChat", ?"navigationBarTextStyle": "black"},

這些就是window配置項(xiàng)，可用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色。

小任務(wù)：打開(kāi)小程序全局配置查看backgroundTextStyle、navigationBarBackgroundColor、navigationBarTitleText、navigationBarTextStyle的配置描述（大致了解即可）。

使用開(kāi)發(fā)者工具的編輯器將以上屬性的值改成如下代碼（這里的backgroundTextStyle只有在設(shè)置了下拉刷新樣式時(shí)才會(huì)比較明顯，以后會(huì)介紹）

"window": { ?"backgroundTextStyle": "dark", ? ?"navigationBarBackgroundColor": "#1772cb", ?"navigationBarTitleText": "云開(kāi)發(fā)技術(shù)訓(xùn)練營(yíng)", ?"navigationBarTextStyle": "white" ?},

添加完成之后記得保存代碼哦，文件修改沒(méi)有保存會(huì)在標(biāo)簽頁(yè)有一個(gè)小的綠點(diǎn)?？梢允褂每旖萱I（同時(shí)按）Ctrl和S來(lái)保存（Mac電腦為Command和S）。

然后點(diǎn)擊開(kāi)發(fā)者工具的編譯圖標(biāo)，就能看到更新之后的效果啦，也可以點(diǎn)擊預(yù)覽，使用手機(jī)微信掃描生成的二維碼查看實(shí)際效果。

小任務(wù)：?navigationBarBackgroundColor值是 #F8F8F8， #1772cb，這是十六進(jìn)制顏色值，它是一個(gè)非常基礎(chǔ)而且用途范圍極廣的計(jì)算機(jī)概念，大家可以搜索了解一下：1、如何使用電腦版微信、QQ的截圖工具取色（取色顏色會(huì)有一點(diǎn)偏差）；2、RGB顏色與十六進(jìn)制顏色如何轉(zhuǎn)換；

2.1.3 新建小程序頁(yè)面

新建頁(yè)面的方法有兩種，一種是使用開(kāi)發(fā)者工具在pages文件夾下新建；還有一種是通過(guò)app.json的pages配置項(xiàng)來(lái)新建，我們先來(lái)看第2種方法。

1、通過(guò)app.json新建頁(yè)面

pages配置項(xiàng)是設(shè)置頁(yè)面的路徑，也就是我們?cè)谛〕绦蚶飳?xiě)的每一個(gè)頁(yè)面都需要填寫(xiě)在這里。使用開(kāi)發(fā)者工具打開(kāi)app.json文件，在pages配置項(xiàng)里新建一個(gè)home頁(yè)面（頁(yè)面名稱(chēng)可以是任意英文名），代碼如下：

"pages/home/home","pages/index/index","pages/logs/logs"

大家寫(xiě)的時(shí)候可以回顧一下json語(yǔ)法，每個(gè)頁(yè)面后都記得要用逗號(hào),隔開(kāi)，如果你的文件代碼寫(xiě)錯(cuò)了，開(kāi)發(fā)者工具會(huì)報(bào)錯(cuò)。

在模擬器就能看到我們新建的這個(gè)首頁(yè)了，會(huì)顯示如下內(nèi)容：

pages/home/home.wxml

大家再來(lái)看看小程序的文件夾結(jié)構(gòu)，是不是在pages文件夾下面多了一個(gè)home的文件夾？而且這個(gè)文件夾還自動(dòng)新建了四個(gè)頁(yè)面文件。

我們刪掉文件目錄下的index和logs文件夾，然后把a(bǔ)pp.json的pages配置項(xiàng)修改為：

"pages": [ ?"pages/home/home", ?"pages/list/list", ?"pages/partner/partner", ?"pages/more/more"],

也就是我們刪掉了index和logs頁(yè)面配置項(xiàng)的同時(shí)，又新增了三個(gè)頁(yè)面(list、partner、more，這三個(gè)頁(yè)面名稱(chēng)大家可以根據(jù)自己需要來(lái)命名)。

小任務(wù)：?這些新建的頁(yè)面文件都在電腦上的什么呢？比如在開(kāi)發(fā)者工具右鍵點(diǎn)擊home文件夾或者h(yuǎn)ome.wxml，選擇“在硬盤(pán)打開(kāi)”就可以看到該文件在我們電腦的文件夾里什么的位置啦

2、小程序的首頁(yè)

在pages配置項(xiàng)的技術(shù)文檔里有這樣一句：“數(shù)組的第一項(xiàng)代表小程序的初始頁(yè)面”，是什么意思呢？

技術(shù)文檔：pages配置項(xiàng)

使用開(kāi)發(fā)者工具打開(kāi)app.json，把之前建好的”pages/list/list”剪切粘貼到”pages/home/home”的前面，也就是把list頁(yè)面放到了數(shù)組的第一項(xiàng)，再來(lái)模擬器里看一下小程序的變化。原來(lái)pages配置項(xiàng)的第一項(xiàng)就是小程序的首頁(yè)啦。

小任務(wù)：?現(xiàn)在我們來(lái)使用新建頁(yè)面的第1種方法，使用開(kāi)發(fā)者工具在pages文件夾下新建頁(yè)面。首先選中pages文件夾，然后點(diǎn)擊上方的**+**號(hào)或鼠標(biāo)右鍵，新建目錄，然后輸入目錄名為post，然后再選中post文件夾，新建頁(yè)面，頁(yè)面名也為post，新建之后看看pages配置項(xiàng)的變化。

2.1.4 了解配置項(xiàng)的書(shū)寫(xiě)方式

在前面我們已經(jīng)了解了window配置項(xiàng)、pages配置項(xiàng)，在技術(shù)文檔小程序全局配置了解到window、pages這些都是全局配置項(xiàng)的屬性，全局配置項(xiàng)的屬性還有tabBar、networkTimeout、usingComponents、permission等，大家可以在技術(shù)文檔里了解每個(gè)屬性的描述，大致了解他們的功能。

這里我們來(lái)宏觀了解一下配置項(xiàng)的書(shū)寫(xiě)語(yǔ)法，大家可以結(jié)合下面這段代碼來(lái)理解app.json的寫(xiě)法，免得配置錯(cuò)誤：

• 每個(gè)配置項(xiàng)比如pages、window都用**引號(hào)””**包住，**冒號(hào):**后面是配置項(xiàng)的屬性與值；

• 每個(gè)配置項(xiàng)之間用逗號(hào),隔開(kāi)，最后一項(xiàng)沒(méi)有逗號(hào)，配置項(xiàng)是平級(jí)關(guān)系，不要把tabBar配置項(xiàng)寫(xiě)到window配置項(xiàng)里面了；

• 配置項(xiàng)里面的數(shù)組或?qū)ο蟮淖詈笠豁?xiàng)也沒(méi)有逗號(hào)

• 書(shū)寫(xiě)時(shí)注意縮進(jìn)，大括號(hào){}、中括號(hào)[]都是成對(duì)書(shū)寫(xiě)，即使是嵌套時(shí)也不能有遺漏}或]；

{ ?"pages": [ ? ?"pages/home/home", ? ?"pages/list/list", ? ?"pages/partner/partner", ? ?"pages/more/more" ?], ?"window": { ? ?"navigationBarTitleText": "云開(kāi)發(fā)技術(shù)訓(xùn)練營(yíng)" ?}, ?"tabBar": { ? ?"color": "#7A7E83", ? ?"selectedColor": "#13227a", ? ?"backgroundColor": "#ffffff", ? ?"list": [{ ? ? ? ?"pagePath": "pages/home/home", ? ? ? ?"text": "首頁(yè)" ? ? ?}, ? ? ?{ ? ? ? ?"pagePath": "pages/list/list", ? ? ? ?"text": "活動(dòng)" ? ? ?}, ? ? ?{ ? ? ? ?"pagePath": "pages/partner/partner", ? ? ? ?"text": "伙伴" ? ? ?}, ? ? ?{ ? ? ? ?"pagePath": "pages/more/more", ? ? ? ?"text": "更多" ? ? ?}] ?}, ?"networkTimeout": { ? ?"request": 10000, ? ?"downloadFile": 10000 ?}, ?"debug": true, ?"navigateToMiniProgramAppIdList": [ ? ?"wxe5f52902cf4de896" ?]}

2.1.5 配置tabBar配置項(xiàng)

在很多App的底部都有一個(gè)帶有小圖標(biāo)的切換tab，比如手機(jī)微信App底部就有微信、通訊錄、發(fā)現(xiàn)、我四個(gè)tab，這個(gè)小圖標(biāo)就是icon，整個(gè)呢就是tabBar，小程序也可以有，需要我們?cè)赼pp.json里配置tabBar配置項(xiàng)。

1、icon下載

在官方技術(shù)文檔里我們了解到icon 大小限制為40kb，建議尺寸為81px * 81px（大一點(diǎn)是可以的），不懂設(shè)計(jì)icon的童鞋可以去矢量圖標(biāo)庫(kù)去下載。（注意下載的格式要是png哦）

icon資源：iconfont阿里巴巴矢量圖標(biāo)庫(kù)

大家可以留意下手機(jī)微信的tabBar的每一個(gè)icon其實(shí)是一組兩個(gè)，也就是選中時(shí)的狀態(tài)和沒(méi)有選中時(shí)的狀態(tài)，他們的顏色也是不一樣的，而在iconfont里大家除了選擇圖標(biāo)還可以選擇不同的顏色來(lái)下載哦。比如我們要讓tabBar有四個(gè)切換tab，那么我們就需要下載4個(gè)icon的兩種配色共8張圖片。

使用開(kāi)發(fā)者工具在模板小程序的根目錄下新建一個(gè)image的文件夾，把命名好的icon都放在里面，這個(gè)時(shí)候你的文件夾結(jié)構(gòu)如下：

小程序的根目錄 ? ? ? ? ├── image ? │ ? ├── icon-tab1.png │ ? ├── icon-tab1-active.png ├── pages ├── utils ├── app.js ├── app.json ├── app.wxss ├── project.config.json ├── sitemap.json

icon的配色最好是一明一暗，而且與你的小程序的整體顏色風(fēng)格保持一致，這樣切換起來(lái)才不會(huì)突兀；選擇的這4個(gè)icon的風(fēng)格最好一致，不然tabBar就不會(huì)好看啦。icon的名稱(chēng)最好也一致，比如home對(duì)應(yīng)的icon可以為home.icon和home-active.icon。

注意：圖片的名稱(chēng)必須是英文，不要用中文。頁(yè)面也好、文件也好、文件夾的名稱(chēng)也好，都要使用英文，里面的標(biāo)點(diǎn)符號(hào)也必須是英文字符。

2、配置tabBar配置項(xiàng)

通過(guò)tabBar配置項(xiàng)，可以設(shè)置tabBar的默認(rèn)字體顏色、選中過(guò)的字體顏色、背景色等。

技術(shù)文檔：tabBar配置項(xiàng)

通過(guò)技術(shù)文檔，我們先大致了解color、selectedColor、backgroundColor的意思。然后使用開(kāi)發(fā)者工具打開(kāi)app.json在window配置項(xiàng)后面新建一個(gè)tabBar配置項(xiàng)，代碼如下：

"tabBar": { ?"color": "#7A7E83", ?"selectedColor": "#13227a", ?"backgroundColor": "#ffffff", ?"list": [ ? ?{ ? ? ?"pagePath": "pages/home/home", ? ? ?"iconPath": "image/icon-tab1.png", ? ? ?"selectedIconPath": "image/icon-tab1-active.png", ? ? ?"text": "首頁(yè)" ? ?}, ? ?{ ? ? ?"pagePath": "pages/list/list", ? ? ?"iconPath": "image/icon-tab2.png", ? ? ?"selectedIconPath": "image/icon-tab2-active.png", ? ? ?"text": "活動(dòng)" ? ?}, ? ?{ ? ? ?"pagePath": "pages/partner/partner", ? ? ?"iconPath": "image/icon-tab3.png", ? ? ?"selectedIconPath": "image/icon-tab3-active.png", ? ? ?"text": "伙伴" ? ?}, ? ?{ ? ? ?"pagePath": "pages/more/more", ? ? ?"iconPath": "image/icon-tab4.png", ? ? ?"selectedIconPath": "image/icon-tab4-active.png", ? ? ?"text": "更多" ? ?} ?]}

這里有一個(gè)比較重要的屬性就是list，它是一個(gè)數(shù)組，決定了tabBar上面的文字、icon、以及點(diǎn)擊之后的跳轉(zhuǎn)鏈接。

• pagePath必須為我們?cè)趐ages配置項(xiàng)里建好的頁(yè)面

• text是tab按鈕上的文字

• iconPath、selectedIconPath分別為沒(méi)有選中時(shí)的圖片路徑和選中時(shí)的圖片路徑。

小任務(wù)：?你知道應(yīng)該如何制作一個(gè)底部沒(méi)有tabBar的小程序嗎？要讓tabBar沒(méi)有icon，應(yīng)該如何配置？給tabBar添加一個(gè)position屬性，值為top，小程序在界面上會(huì)有什么變化？再給小程序新增幾個(gè)頁(yè)面（不添加到tabBar上），我們應(yīng)該如何在模擬器看到頁(yè)面的內(nèi)容？

2.1.6 小程序的頁(yè)面配置

使用打開(kāi)一個(gè)頁(yè)面的頁(yè)面json文件，比如home的home.json，在json里面新建一些配置信息，如下所示。

技術(shù)文檔：小程序頁(yè)面配置

{ ?"usingComponents": {}, ?"navigationBarBackgroundColor": "#ce5a4c", ?"navigationBarTextStyle": "white", ?"navigationBarTitleText": "小程序頁(yè)面", ?"backgroundColor": "#eeeeee", ?"backgroundTextStyle": "light"}

配置的屬性與值的含義我們可以結(jié)合實(shí)際的效果以及技術(shù)文檔來(lái)了解。

小任務(wù)：?了解一下給小程序的頁(yè)面配置前和配置后，頁(yè)面哪些地方變動(dòng)了？你是否對(duì)技術(shù)文檔里“頁(yè)面中配置項(xiàng)在當(dāng)前頁(yè)面會(huì)覆蓋? app.json?的? window?中相同的配置項(xiàng)?！庇辛艘欢ǖ恼J(rèn)識(shí)？