小程式構成

在上一章中，我們通過開發者工具快速建立了乙個 quickstart 專案。你可以留意到這個專案裡邊生成了不同型別的檔案:

.json 字尾的 json 配置檔案

.wxml 字尾的 wxml 模板檔案

.wxss 字尾的 wxss 樣式檔案

.js 字尾的 js 指令碼邏輯檔案

接下來我們分別看看這4種檔案的作用。

我們簡單說一下這個配置各個項的含義:

window欄位 —— 小程式所有頁面的頂部背景顏色，文字顏色定義在這裡的。

工具配置 project.config.json

通常大家在使用乙個工具的時候，都會針對各自喜好做一些個性化配置，例如介面顏色、編譯配置等等，當你換了另外一台電腦重新安裝工具的時候，你還要重新配置。

考慮到這點，小程式開發者工具在每個專案的根目錄都會生成乙個 project.config.json，你在工具上做的任何配置都會寫入到這個檔案，當你重新安裝工具或者換電腦工作時，你只要載入同乙個專案的**包，開發者工具就自動會幫你恢復到當時你開發專案時的個性化配置，其中會包括編輯器的顏色、**上傳時自動壓縮等等一系列選項。

頁面配置 page.json

這裡的 page.json 其實用來表示 pages/logs 目錄下的 logs.json 這類和小程式頁面相關的配置。

從事過網頁程式設計的人知道，網頁程式設計採用的是 html + css + js 這樣的組合，其中 html 是用來描述當前這個頁面的結構，css 用來描述頁面的樣子，js 通常是用來處理這個頁面和使用者的互動。

同樣道理，在小程式中也有同樣的角色，其中 wxml 充當的就是類似 html 的角色。開啟 pages/index/index.wxml，你會看到以下的內容:

獲取頭像暱稱 }  
}

和 html 非常相似，有標籤、屬性等等構成。但是也有很多不一樣的地方，我們來一一闡述一下：

多了一些 wx:if 這樣的屬性以及 } 這樣的表示式在網頁的一般開發流程中，我們通常會通過 js 操作 dom (對應 html 的描述產生的樹)，以引起介面的一些變化響應使用者的行為。例如，使用者點選某個按鈕的時候，js 會記錄一些狀態到 js 變數裡邊，同時通過 dom api 操控 dom 的屬性或者行為，進而引起介面一些變化。當專案越來越大的時候，你的**會充斥著非常多的介面互動邏輯和程式的各種狀態變數，顯然這不是乙個很好的開發模式，因此就有了 mvvm 的開發模式(例如 react, vue)，提倡把渲染和邏輯分離。簡單來說就是不要再讓 js 直接操控 dom，js只需要管理狀態即可，然後再通過一種模板語法來描述狀態和介面結構的關係即可。小程式的框架也是用到了這個思路，如果你需要把乙個 hello world 的字串顯示在介面上。 wxml 是這麼寫 :

js 只需要管理狀態即可:

this.setdata()

wxss 具有 css 大部分的特性，小程式在 wxss 也做了一些擴充和修改。

新增了尺寸單位。在寫 css 樣式時，開發者需要考慮到手機裝置的螢幕會有不同的寬度和裝置畫素比，採用一些技巧來換算一些畫素單位。wxss 在底層支援新的尺寸單位 rpx ，開發者可以免去換算的煩惱，只要交給小程式底層來換算即可，由於換算採用的浮點數運算，所以運算結果會和預期結果有一點點偏差。

此外 wxss 僅支援部分 css 選擇器

}
點選我

點選 button 按鈕的時候，我們希望把介面上 msg 顯示成 "hello world"，於是我們在 button 上宣告乙個屬性: bindtap ，在 js 檔案裡邊宣告了 clickme 方法來響應這次點選操作：

page()
}})

通過這個章節，你了解了小程式涉及到的檔案型別以及對應的角色，在下個章節中，我們把這一章所涉及到的檔案通過「小程式的框架」給「串」起來，讓他們都工作起來。

小程式構成

Python程式的構成

Android 應用程式構成

C語言，程式的構成

小程式構成

Python程式的構成

Android 應用程式構成

C語言，程式的構成

相關推薦