這篇文章主要為大家展示了“微信小程序中目錄結(jié)構(gòu)的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“微信小程序中目錄結(jié)構(gòu)的示例分析”這篇文章吧。
創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)由有經(jīng)驗(yàn)的網(wǎng)站設(shè)計(jì)師、開(kāi)發(fā)人員和項(xiàng)目經(jīng)理組成的專(zhuān)業(yè)建站團(tuán)隊(duì)，負(fù)責(zé)網(wǎng)站視覺(jué)設(shè)計(jì)、用戶體驗(yàn)優(yōu)化、交互設(shè)計(jì)和前端開(kāi)發(fā)等方面的工作，以確保網(wǎng)站外觀精美、成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站易于使用并且具有良好的響應(yīng)性。
前言
在開(kāi)發(fā)小程序之前，我們首先需要對(duì)其目錄結(jié)構(gòu)進(jìn)行了解，以便于提升開(kāi)發(fā)效率。
我們使用微信開(kāi)發(fā)者工具構(gòu)建一個(gè)小程序項(xiàng)目，我們可以看到目錄下生成了件。
① 以.json為后綴的JSON配置文件；
② 以.wxml為后綴的WXML模板文件，其可以看做是一個(gè)簡(jiǎn)潔的HTML頁(yè)面，略有不同的則是文件后綴以及其中的部分標(biāo)簽不同；
③ 以.wxss為后綴的WXSS樣式文件，也可以看做一個(gè)CSS樣式文件；
④ 以.js為后綴的JS腳本文件。
在上圖的示例中，我們可以看到根目錄下有JS、JSON、WXSS類(lèi)型文件，這是作為全局配置；而pages/index目錄下的四類(lèi)文件是對(duì)具體的頁(yè)面進(jìn)行詳細(xì)設(shè)置。
由此可以看出這四類(lèi)文件在小程序中負(fù)責(zé)不同的功能，它們?cè)诓煌哪夸浵掳缪莶煌慕巧?。接下?lái)，我們將詳細(xì)說(shuō)明四類(lèi)文件的作用。
1JSON配置
在小程序中，JSON是一種數(shù)據(jù)格式，其并不是編程語(yǔ)言，它用于配置靜態(tài)的屬性。我們可以看到在根目錄下有app.json、project.config.json、以及sitemap.json，在pages/index下有index.json。前三種是對(duì)整個(gè)小程序的全局配置，而后一種是對(duì)具體頁(yè)面的配置。接下來(lái)，我們對(duì)其做詳細(xì)說(shuō)明。
①、app.json配置文件
其作為當(dāng)前小程序的全局配置，包括配置頁(yè)面路徑列表、全局默認(rèn)窗口表現(xiàn)、網(wǎng)絡(luò)超時(shí)時(shí)間、底部tab欄、小程序接口權(quán)限相關(guān)設(shè)置等。
注：在json文件中是不能加注釋的，此處只為了解釋?zhuān)虼嗽谑褂眠^(guò)程中切勿加注釋?zhuān)渌嚓P(guān)屬性查看官方文檔。
重慶分公司
重慶分公司
{
/**
* 頁(yè)面路徑列表
* 用于指定小程序由那些頁(yè)面組成，每一項(xiàng)都對(duì)應(yīng)一個(gè)頁(yè)面的路徑。
* 數(shù)組列表中的第一項(xiàng)代表小程序的首頁(yè)。
*/
"pages": [
"pages/index/index"
],
/**
* 全局默認(rèn)窗口表現(xiàn)
* 用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景顏色
*/
"window": {
"navigationBarBackgroundColor": "#fff",//導(dǎo)航欄背景顏色
"navigationBarTitleText": "MiniProgrameDemo",//導(dǎo)航欄標(biāo)題文字內(nèi)容
"navigationBarTextStyle": "black"http://導(dǎo)航欄標(biāo)題顏色，僅支持black/white
},
//底部tab欄
"tabBar": {
"list": [//tab的列表，最少2個(gè)，最多5個(gè)
{
"pagePath": "pages/index/index",//頁(yè)面路徑
"text": "首頁(yè)"http://tab上按鈕文字
},
{
"pagePath": "pages/index/index",
"text": "第二個(gè)首頁(yè)"
}
]
},
//配置小程序及其頁(yè)面是否允許被微信索引，若沒(méi)有該配置，則默認(rèn)所有頁(yè)面都允許被索引
"sitemapLocation": "sitemap.json"
}②、project.config.json工具配置
通常我們?cè)谑褂酶黝?lèi)開(kāi)發(fā)工具時(shí)，都會(huì)根據(jù)自己的喜好做一些簡(jiǎn)單的配置，如界面配置成護(hù)眼模式等。但我們更換電腦后，需要重新配置或?qū)胍郧暗呐渲梦募?a target="_blank">小程序開(kāi)發(fā)者工具使用project.config.json來(lái)統(tǒng)一管理，我們?cè)诓煌碾娔X上導(dǎo)入同一個(gè)項(xiàng)目的代碼包后，不需要再進(jìn)行配置。
一般我們會(huì)對(duì)項(xiàng)目設(shè)置（setting）中的是否啟用es6轉(zhuǎn)es5（es6）、上傳代碼時(shí)樣式是否自動(dòng)補(bǔ)全（postcss）、是否檢查安全域名和TLS版本（URLCheck）等來(lái)進(jìn)行配置。
注：我們可以通過(guò)開(kāi)發(fā)者工具右上角的【詳情】按鈕來(lái)快速配置。
③、sitemap配置
小程序提供了配置小程序及其頁(yè)面是否允許被微信索引的功能，我們可以通過(guò)配置一些索引規(guī)則來(lái)約束頁(yè)面是否能被索引，使其不能被微信索引。若沒(méi)有配置該項(xiàng)，則默認(rèn)所有頁(yè)面都允許被索引。
注：其他相關(guān)配置信息請(qǐng)參照官方文檔設(shè)置。
{
"rules": [{//索引規(guī)則列表
"action": "allow",//頁(yè)面是否能被索引，取值僅限allow、disallow
"page": "*"http://*表示所有頁(yè)面，不能作為通配符使用
}]
}④、index.json頁(yè)面配置
如果我們想設(shè)置具體的某個(gè)頁(yè)面的屬性，則可以在相應(yīng)頁(yè)面的JSON文件中自定義配置。
{
"navigationBarBackgroundColor": "#FF5500",//導(dǎo)航欄背景顏色
"navigationBarTextStyle": "white",//導(dǎo)航欄標(biāo)題顏色，僅支持black/white
"navigationBarTitleText": "首頁(yè)",//導(dǎo)航欄標(biāo)題文字內(nèi)容
"backgroundTextStyle": "dark", //下拉loading樣式，僅支持dark/white
"enablePullDownRefresh": true,//是否啟用下拉刷新
"onReachBottomDistance": 50,//頁(yè)面上拉觸底事件觸發(fā)時(shí)距離頁(yè)面底部距離
"usingComponents": {}//頁(yè)面自定義組件配置
}2WXML模板
我們?cè)陂_(kāi)發(fā)web頁(yè)面時(shí)，使用HTML+CSS+JS這樣的組合來(lái)構(gòu)建展示給用戶的頁(yè)面，其中HTML是用來(lái)描述當(dāng)前頁(yè)面的結(jié)構(gòu)，CSS是用來(lái)描述頁(yè)面的樣式，JS通常處理頁(yè)面與用戶之間的交互。
而小程序開(kāi)發(fā)中，其自己的一套書(shū)寫(xiě)規(guī)范，但與web頁(yè)面也有相似之處，如WXML在其中就充當(dāng)了HTML的角色。和HTML非常相似，WXML也是由標(biāo)簽、屬性等構(gòu)成，但也存在著眾多不一樣的地方：
標(biāo)簽名不一樣，在HTML中我們經(jīng)常會(huì)使用div、p、span等來(lái)組合出不同的效果。而在小程序中，我們會(huì)使用view、button、text等標(biāo)簽，同時(shí)小程序頁(yè)提供了地圖、視頻、音頻等組件供開(kāi)發(fā)者使用。
多了一些wx:if這樣的屬性以及表達(dá)式，在web頁(yè)面開(kāi)發(fā)中，我們通過(guò)使用JS來(lái)控制DOM，以及響應(yīng)用戶操作。而小程序通過(guò){{}}的語(yǔ)法將數(shù)據(jù)綁定到界面，同時(shí)也可以通過(guò)wx:開(kāi)頭的屬性來(lái)控制數(shù)據(jù)的顯示。
