前言

小程序框架的?標(biāo)是通過盡可能簡單、?效的?式讓開發(fā)者可以在微信中開發(fā)具有原?APP體驗的服務(wù)。

?程序框架提供了??的視圖層描述語? WXML 和 WXSS ，以及 JavaScript ，并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，讓開發(fā)者能夠?qū)Ｗ⒂跀?shù)據(jù)與邏輯。

1、小程序文件結(jié)構(gòu)和傳統(tǒng)web對比

	傳統(tǒng)web	微信小程序
項目骨架、結(jié)構(gòu)	HTML	WXML
頁面樣式	CSS	WXSS
項目邏輯	Javascript	Javascript
配置	無	JSON

1. 通過以上對?得出傳統(tǒng)web是三層結(jié)構(gòu)。?微信?程序是四層結(jié)構(gòu)，多了?層配置.json

2. 當(dāng)這幾個文件在同一級目錄下且命名相同(后綴不同),可以互相引用卻不用導(dǎo)入

2、基本的項目目錄

Ⅰ-項目目錄解釋

1. 項目目錄圖解:

2. 以app開頭的文件是應(yīng)用程序級別的文件,更改一處全局生效。而頁面pages的配置優(yōu)先級高于全局配置(就近原則)
3. 小程序是允許你修改文件目錄名的

3、小程序配置文件

?個?程序應(yīng)?程序會包括最基本的兩種配置?件。?種是全局的app.json 和 ????的page.json

Ⅰ-全局配置app.json

1. app.json 是當(dāng)前?程序的全局配置，包括了?程序的所有??路徑、界?表現(xiàn)、?絡(luò)超時時間、底部tab等。普通快速啟動項??邊的 app.json 配置

2. 代碼

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
 ],
 "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
 }
}

3. 字段的含義

1）pages 字段??于描述當(dāng)前?程序所有??路徑，這是為了讓微信客?端知道當(dāng)前你的?程序??定義在哪個?錄。

? 默認(rèn)顯示此字段中的第一項

? 2）window 字段?定義?程序所有??的頂部背景顏?，?字顏?定義等。

? 3）完整的配置信息請參考 app.json配置

4. tabBar-底部 tab 欄的表現(xiàn):
   

更多配置詳細(xì)請看app配置文檔

Ⅱ-頁面配置page.json

1. 這?的 page.json 其實?來表????錄下的 page.json 這類和?程序??相關(guān)的配置。 開發(fā)者可以獨?定義每個??的?些屬性，如頂部顏?、是否允許下拉刷新等等。 ??的配置只能設(shè)置 app.json 中部分 window 配置項的內(nèi)容，??中配置項會覆蓋 app.json 的 window 中相同的配置項。

2. 常用配置屬性列舉:

屬性	類型	默認(rèn)值	描述
navigationBarBackgroundColor	HexColor	#000000	導(dǎo)航欄背景顏?，如 #000000
navigationBarTextStyle	String	white	導(dǎo)航欄標(biāo)題顏?，僅?持 black / white
navigationBarTitleText	String		導(dǎo)航欄標(biāo)題?字內(nèi)容
backgroundColor	HexColor	#ffffff	窗?的背景?
backgroundTextStyle	String	dark	下拉loading的樣式，僅?持 dark / light
enablePullDownRefresh	Boolean	false	是否全局開啟下拉刷新。 詳? Page.onPullDownRefresh
onReachBottomDistance	Number	50	??上拉觸底事件觸發(fā)時距??底部距離，單位為px。 詳? Page.onReachBottom
disableScroll	Boolean	false	設(shè)置為 true 則??整體不能上下滾動；只在??配置中有效，?法在 app.json 中設(shè)置該項

Ⅲ-sitemap 配置(了解即可)

?程序根?錄下的 sitemap.json ?件?于配置?程序及其??是否允許被微信索引。主要服務(wù)于搜索

4、小程序框架接口

Ⅰ-App(Object object)

1. 注冊小程序。接受一個 Object 參數(shù)，其指定小程序的生命周期回調(diào)等。

2. App() 必須在 app.js 中調(diào)用，必須調(diào)用且只能調(diào)用一次。不然會出現(xiàn)無法預(yù)期的后果

3. 相應(yīng)的app()參數(shù)在下方的小程序生命周期中有指出

AppObject getApp(Object object)

1. 獲取到小程序全局唯一的 App 實例。

2. 代碼示例

// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global dat
//或者
const {GbaseUrl} =getApp()  //GbaseUrl是自己在app.js定義的全局變量

3. Object object

屬性	類型	默認(rèn)值	必填	說明	最低版本
allowDefault	boolean	false	否	在 App 未定義時返回默認(rèn)實現(xiàn)。當(dāng)App被調(diào)用時，默認(rèn)實現(xiàn)中定義的屬性會被覆蓋合并到App中。一般用于獨立分包	2.2.4

4. 注意

• 不要在定義于 App() 內(nèi)的函數(shù)中，或調(diào)用 App 前調(diào)用 getApp() 。使用 this 就可以拿到 app 實例。
• 通過 getApp() 獲取實例之后，不要私自調(diào)用生命周期函數(shù)

文章來源地址http://www.zghlxwxcb.cn/news/detail-487788.html

到了這里，關(guān)于【微信小程序丨第二篇】小程序的基本目錄結(jié)構(gòu)與文件作用剖析的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！