|
"技術(shù)哥"今天給大家詳細(xì)解讀一下小程序的結(jié)構(gòu)特點(diǎn)與其框架解析。 一、小程序的結(jié)構(gòu)特點(diǎn)(詳細(xì)版)a .json 后綴的 JSON 配置文件（沒(méi)什么好說(shuō)的,就是普通的json文件） b .wxml 后綴的 WXML 模板文件(類(lèi)Html文件) c .wxss 后綴的 WXSS 樣式文件（類(lèi)CSS文件） d .js 后綴的 JS 腳本邏輯文件（沒(méi)什么好說(shuō)的，就是普通的js） 重點(diǎn)來(lái)了 app.js 代碼中定義了一個(gè)App對(duì)象，該對(duì)象包含onLaunch方法和globalData成員變量，其中onLaunch方法會(huì)在程序啟動(dòng)時(shí)由框架來(lái)進(jìn)行調(diào)用。在該方法中，程序通過(guò)微信提供的本地存儲(chǔ)接口獲取了一個(gè)logs變量，第一次獲取時(shí)會(huì)返回空，這時(shí)將變量初始化為空數(shù)組，之后在數(shù)組頭部添加一個(gè)格式化的時(shí)間字符串，最后將數(shù)組變量存儲(chǔ)在本地。login和getSetting方法很容易理解，會(huì)執(zhí)行獲取用戶信息的功能。代碼最后定義了 globalData成員變量，該成員包含userInfo變量，用來(lái)保存用戶信息。 app.json app.json是對(duì)當(dāng)前小程序的全局配置，包括了小程序的所有頁(yè)面路徑、界面表現(xiàn)、網(wǎng)絡(luò)超時(shí)時(shí)間、底部 tab 等。tabBar就是我自己添加的。pages是用于描述當(dāng)前小程序所有頁(yè)面路徑。window是小程序所有頁(yè)面的頂部背景顏色，文字顏色定義在這里的。 app.wxss 這個(gè)不用說(shuō)肯定是定義的一個(gè)全局css文件，就略過(guò)了 project.config.json 通常大家在使用一個(gè)工具的時(shí)候，都會(huì)針對(duì)各自喜好做一些個(gè)性化配置，例如界面顏色、編譯配置等等，當(dāng)你換了另外一臺(tái)電腦重新安裝工具的時(shí)候，你還要重新配置?？紤]到這點(diǎn)，小程序開(kāi)發(fā)者工具在每個(gè)項(xiàng)目的根目錄都會(huì)生成一個(gè) project.config.json，你在工具上做的任何配置都會(huì)寫(xiě)入到這個(gè)文件，當(dāng)你重新安裝工具或者換電腦工作時(shí)，你只要載入同一個(gè)項(xiàng)目的代碼包，開(kāi)發(fā)者工具就自動(dòng)會(huì)幫你恢復(fù)到當(dāng)時(shí)你開(kāi)發(fā)項(xiàng)目時(shí)的個(gè)性化配置，其中會(huì)包括編輯器的顏色、代碼上傳時(shí)自動(dòng)壓縮等等一系列選項(xiàng)。 WXML 模板 和 HTML 非常相似，有標(biāo)簽、屬性等等構(gòu)成，總結(jié)起來(lái)有兩點(diǎn): 1. 標(biāo)簽名字有點(diǎn)不一樣往往寫(xiě) HTML 的時(shí)候，經(jīng)常會(huì)用到的標(biāo)簽是 <div>, <p>,<span>，開(kāi)發(fā)者在寫(xiě)一個(gè)頁(yè)面的時(shí)候可以根據(jù)這些基礎(chǔ)的標(biāo)簽組合出不一樣的組件，例如日歷、彈窗等等。換個(gè)思路，既然大家都需要這些組件，為什么我們不能把這些常用的組件包裝起來(lái)，大大提高我們的開(kāi)發(fā)效率。 從上邊的例子可以看到，小程序的 WXML 用的標(biāo)簽是 <view>, <button>, <text> 等等，這些標(biāo)簽就是小程序給開(kāi)發(fā)者包裝好的基本能力，我們還提供了地圖、視頻、音頻等等組件能力，更多詳細(xì)的組件請(qǐng)參考API 2. 多了一些 wx:if 這樣的屬性以及 {{ }} 這樣的表達(dá)式 在網(wǎng)頁(yè)的一般開(kāi)發(fā)流程中，我們通常會(huì)通過(guò) JS 操作 DOM ，以引起界面的一些變化響應(yīng)用戶的行為。例如，用戶點(diǎn)擊某個(gè)按鈕的時(shí)候，JS 會(huì)記錄一些狀態(tài)到 JS 變量里邊，同時(shí)通過(guò) DOM API 操控 DOM 的屬性或者行為，進(jìn)而引起界面一些變化。當(dāng)項(xiàng)目越來(lái)越大的時(shí)候，你的代碼會(huì)充斥著非常多的界面交互邏輯和程序的各種狀態(tài)變量，顯然這不是一個(gè)很好的開(kāi)發(fā)模式，因此就有了 MVVM 的開(kāi)發(fā)模式(例如 React, Vue)，提倡把渲染和邏輯分離。簡(jiǎn)單來(lái)說(shuō)就是不要再讓 JS 直接操控 DOM，JS只需要管理狀態(tài)即可，然后再通過(guò)一種模板語(yǔ)法來(lái)描述狀態(tài)和界面結(jié)構(gòu)的關(guān)系即可。 二、小程序的框架解讀小程序的框架也是用到了這個(gè)思路，如果你需要把一個(gè) Hello World 的字符串顯示在界面上， WXML 是這么寫(xiě) :  WXML 而JS 只需要管理狀態(tài)即可，即可以這樣寫(xiě)  JS 通過(guò) {{ }} 的語(yǔ)法把一個(gè)變量綁定到界面上，我們稱(chēng)為數(shù)據(jù)綁定。僅僅通過(guò)數(shù)據(jù)綁定還不夠完整的描述狀態(tài)和界面的關(guān)系，還需要 if/else, for等控制能力，在小程序里邊，這些控制能力都用 wx: 開(kāi)頭的屬性來(lái)表達(dá)。 JSON 是一種數(shù)據(jù)格式，并不是編程語(yǔ)言，在小程序中，JSON扮演的靜態(tài)配置的角色。 json心得  app.json  app.json 結(jié)果 注意到模擬器頂部 bar 的文本字段由 Wechat 變?yōu)榱薓iniProgram。 頂部bar 的wording發(fā)生了變化  navigationbar json 語(yǔ)法  JSON  JSON JSON的Key必須包裹在一個(gè)雙引號(hào)中，在實(shí)踐中，編寫(xiě) JSON 的時(shí)候，忘了給 Key 值加雙引號(hào)或者是把雙引號(hào)寫(xiě)成單引號(hào)是常見(jiàn)錯(cuò)誤。  JSON JSON的值只能是以下幾種數(shù)據(jù)格式： 1.數(shù)字，包含浮點(diǎn)數(shù)和整數(shù) 2.字符串，需要包裹在雙引號(hào)中 3.Bool值，true 或者 false 4.數(shù)組，需要包裹在方括號(hào)中 [] 5.對(duì)象，需要包裹在大括號(hào)中 {} 6.Null 7.其他任何格式都會(huì)觸發(fā)報(bào)錯(cuò)，例如 JavaScript 中的 undefined  JSON錯(cuò)誤使用JS的值 今天"技術(shù)哥"給大家介紹了小程序的結(jié)構(gòu)特點(diǎn)與其框架的解析，大家一定不要死記硬背，重在理解，如果忘記了返回來(lái)再看一遍，這樣效率是最高的！"技術(shù)哥"接下來(lái)還會(huì)給大家?guī)?lái)更深入更詳細(xì)的小程序教程，請(qǐng)大家繼續(xù)關(guān)注"技術(shù)哥"，做一個(gè)持續(xù)學(xué)習(xí)者！ |
|
|
