"技術哥"今天給大家詳細解讀一下小程序的結構特點與其框架解析。

一、小程序的結構特點(詳細版)

a .json 后綴的 JSON 配置文件（沒什么好說的,就是普通的json文件）

b .wxml 后綴的 WXML 模板文件(類Html文件)

c .wxss 后綴的 WXSS 樣式文件（類CSS文件）

d .js 后綴的 JS 腳本邏輯文件（沒什么好說的，就是普通的js）

重點來了

app.js

代碼中定義了一個App對象，該對象包含onLaunch方法和globalData成員變量，其中onLaunch方法會在程序啟動時由框架來進行調用。在該方法中，程序通過微信提供的本地存儲接口獲取了一個logs變量，第一次獲取時會返回空，這時將變量初始化為空數(shù)組，之后在數(shù)組頭部添加一個格式化的時間字符串，最后將數(shù)組變量存儲在本地。login和getSetting方法很容易理解，會執(zhí)行獲取用戶信息的功能。代碼最后定義了 globalData成員變量，該成員包含userInfo變量，用來保存用戶信息。

app.json

app.json是對當前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現(xiàn)、網(wǎng)絡超時時間、底部 tab 等。tabBar就是我自己添加的。pages是用于描述當前小程序所有頁面路徑。window是小程序所有頁面的頂部背景顏色，文字顏色定義在這里的。

app.wxss

這個不用說肯定是定義的一個全局css文件，就略過了

project.config.json

通常大家在使用一個工具的時候，都會針對各自喜好做一些個性化配置，例如界面顏色、編譯配置等等，當你換了另外一臺電腦重新安裝工具的時候，你還要重新配置。考慮到這點，小程序開發(fā)者工具在每個項目的根目錄都會生成一個 project.config.json，你在工具上做的任何配置都會寫入到這個文件，當你重新安裝工具或者換電腦工作時，你只要載入同一個項目的代碼包，開發(fā)者工具就自動會幫你恢復到當時你開發(fā)項目時的個性化配置，其中會包括編輯器的顏色、代碼上傳時自動壓縮等等一系列選項。

WXML 模板

和 HTML 非常相似，有標簽、屬性等等構成，總結起來有兩點:

1. 標簽名字有點不一樣往往寫 HTML 的時候，經(jīng)常會用到的標簽是 <div>, <p>,<span>，開發(fā)者在寫一個頁面的時候可以根據(jù)這些基礎的標簽組合出不一樣的組件，例如日歷、彈窗等等。換個思路，既然大家都需要這些組件，為什么我們不能把這些常用的組件包裝起來，大大提高我們的開發(fā)效率。 從上邊的例子可以看到，小程序的 WXML 用的標簽是 <view>, <button>, <text> 等等，這些標簽就是小程序給開發(fā)者包裝好的基本能力，我們還提供了地圖、視頻、音頻等等組件能力，更多詳細的組件請參考API

2. 多了一些 wx:if 這樣的屬性以及 {{ }} 這樣的表達式 在網(wǎng)頁的一般開發(fā)流程中，我們通常會通過 JS 操作 DOM ，以引起界面的一些變化響應用戶的行為。例如，用戶點擊某個按鈕的時候，JS 會記錄一些狀態(tài)到 JS 變量里邊，同時通過 DOM API 操控 DOM 的屬性或者行為，進而引起界面一些變化。當項目越來越大的時候，你的代碼會充斥著非常多的界面交互邏輯和程序的各種狀態(tài)變量，顯然這不是一個很好的開發(fā)模式，因此就有了 MVVM 的開發(fā)模式(例如 React, Vue)，提倡把渲染和邏輯分離。簡單來說就是不要再讓 JS 直接操控 DOM，JS只需要管理狀態(tài)即可，然后再通過一種模板語法來描述狀態(tài)和界面結構的關系即可。

二、小程序的框架解讀

小程序的框架也是用到了這個思路，如果你需要把一個 Hello World 的字符串顯示在界面上， WXML 是這么寫 :

WXML

而JS 只需要管理狀態(tài)即可，即可以這樣寫

JS

通過 {{ }} 的語法把一個變量綁定到界面上，我們稱為數(shù)據(jù)綁定。僅僅通過數(shù)據(jù)綁定還不夠完整的描述狀態(tài)和界面的關系，還需要 if/else, for等控制能力，在小程序里邊，這些控制能力都用 wx: 開頭的屬性來表達。

JSON 是一種數(shù)據(jù)格式，并不是編程語言，在小程序中，JSON扮演的靜態(tài)配置的角色。

json心得

app.json

app.json

結果 注意到模擬器頂部 bar 的文本字段由 Wechat 變?yōu)榱薓iniProgram。 頂部bar 的wording發(fā)生了變化

navigationbar

json 語法

JSON

JSON

JSON的Key必須包裹在一個雙引號中，在實踐中，編寫 JSON 的時候，忘了給 Key 值加雙引號或者是把雙引號寫成單引號是常見錯誤。

JSON

JSON的值只能是以下幾種數(shù)據(jù)格式：

1.數(shù)字，包含浮點數(shù)和整數(shù)

2.字符串，需要包裹在雙引號中

3.Bool值，true 或者 false

4.數(shù)組，需要包裹在方括號中 []

5.對象，需要包裹在大括號中 {}

6.Null

7.其他任何格式都會觸發(fā)報錯，例如 JavaScript 中的 undefined

JSON錯誤使用JS的值

今天"技術哥"給大家介紹了小程序的結構特點與其框架的解析，大家一定不要死記硬背，重在理解，如果忘記了返回來再看一遍，這樣效率是最高的！"技術哥"接下來還會給大家?guī)砀钊敫敿毜男〕绦蚪坛?，請大家繼續(xù)關注"技術哥"，做一個持續(xù)學習者！