這篇文章給大家分享的是有關(guān)微信小程序開發(fā)之小程序架構(gòu)的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出和碩免費(fèi)做網(wǎng)站回饋大家。

一、小程序架構(gòu)

每個(gè)小程序的結(jié)構(gòu)都是由兩個(gè)主要部分構(gòu)成：主體部分 + 各個(gè)頁面。

類似于許多框架，主體部分主要用于核心的配置，各個(gè)頁面主要用于不同業(yè)務(wù)場(chǎng)景。

1.1，主體部分主要由3個(gè)文件構(gòu)成

1）app.js：小程序邏輯，初始化APP

2）app.json ：小程序配置，比如導(dǎo)航、窗口、頁面http請(qǐng)求跳轉(zhuǎn)等

3）app.wxss：公共樣式配置

主體配置完成之后，就是對(duì)應(yīng)的業(yè)務(wù)開發(fā)了，也就是開發(fā)者最常操作的頁面。小程序頁面設(shè)計(jì)基本上也是遵循 MVC 結(jié)構(gòu)進(jìn)行構(gòu)建。

MVC全名是Model View Controller，是模型(model)－視圖(view)－控制器(controller)的縮寫，一種軟件設(shè)計(jì)典范，
用一種業(yè)務(wù)邏輯、數(shù)據(jù)、界面顯示分離的方法組織代碼，將業(yè)務(wù)邏輯聚集到一個(gè)部件里面，
在改進(jìn)和個(gè)性化定制界面及用戶交互的同時(shí)，不需要重新編寫業(yè)務(wù)邏輯。MVC被獨(dú)特的發(fā)展起來用于映射傳統(tǒng)的輸入、
處理和輸出功能在一個(gè)邏輯的圖形化用戶界面的結(jié)構(gòu)中。

1.2，頁面由4個(gè)文件構(gòu)成

1）js：頁面邏輯，相當(dāng)于控制層（C）；也包括部分的數(shù)據(jù)（M）

2）wxml：頁面結(jié)構(gòu)展示，相當(dāng)于視圖層（V）

3）wxss：頁面樣式表，純前端，用于輔助wxml展示

4）json：頁面配置，配置一些頁面展示的數(shù)據(jù)，充當(dāng)部分的模型（M）

如圖

代碼結(jié)構(gòu)參考

二、配置 app.json

簡(jiǎn)單介紹核心架構(gòu)配置，詳細(xì)內(nèi)容請(qǐng)參考小程序開發(fā)文檔。

app.json

全局配置頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。

pages
接受一個(gè)數(shù)組，每一項(xiàng)都是字符串，來指定小程序由哪些頁面組成

window
用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色。

tabBar

通過 tabBar 配置項(xiàng)指定 tab 欄的表現(xiàn)，以及 tab 切換時(shí)顯示的對(duì)應(yīng)頁面。

tabBar 配置數(shù)組，只能配置最少2個(gè)、最多5個(gè) tab，tab 按數(shù)組的順序排序。

networkTimeout
可以設(shè)置各種網(wǎng)絡(luò)請(qǐng)求的超時(shí)時(shí)間。

debug

true/false

可以在開發(fā)者工具中開啟 debug 模式，在開發(fā)者工具的控制臺(tái)面板，調(diào)試信息以 info 的形式給出，其信息有Page的注冊(cè)，頁面路由，數(shù)據(jù)更新，事件觸發(fā) 。 可以幫助開發(fā)者快速定位一些常見的問題。

page.json
每一個(gè)小程序頁面也可以使用.json文件來對(duì)本頁面的窗口表現(xiàn)進(jìn)行配置。 頁面的配置比app.json全局配置簡(jiǎn)單得多，只是設(shè)置 app.json 中的 window 配置項(xiàng)的內(nèi)容，頁面中配置項(xiàng)會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)。

感謝各位的閱讀！關(guān)于“微信小程序開發(fā)之小程序架構(gòu)的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！