目錄
- 瞭解小程序的開發框架
- WXML的語法
一、小程序的開發框架
- WXML: 描述頁面的內容
- WXSS: 描述頁面的樣式
- JavaScript: 控制頁面交互邏輯和數據通信
- WXS: 它是對WXML能力的增強的一種腳本語言，可以將我們請求到的數據，進行filter（過濾）,和計算處理，幫WXML快速構建出頁面的內容結構。
二、WXML的語法
開始標籤和結束標籤包裹着我們的內容（簡單的文本，其他的WXML文本語句），我們也可以在開始標籤裏面傳入一些屬性，來控制我們這個標籤組件。
例子：注意標籤必須是嚴格閉合的，屬性大小寫敏感
定義view標籤，並且裏面包裹hello world 文本，以及一個view子標籤。在view標籤裏面，傳入了class, data-name屬性，形式是key-value 形式。
三、WXML的語言特性 - 數據綁定
小程序通過數據綁定達到動態數據更新。
頁面的js文件Page的data對象可以讓我們進行數據的傳入到wxml。
在.wxml文件中 ，我們使用 {{變量名}} - Mustache 的語法來實現對數據接收綁定。
例如：
我們先在index.js文件內的data對象裏面，定義了一個message的數據屬性。
然後在index.wxml文件內,通過變量 + {{}}的形式，將message綁定起來。 wxml數據綁定有很多種，這裏用最簡單的方式。 {{message}} 可以認爲是綁定的text文本里面的值。 <標籤>標籤值（內容）</標籤>
這裏可以綁定文本內容，是否可以綁定它的一個屬性，給他的屬性賦值呢？
例如：注意：這裏所有的組件和屬性都要是小寫
index.js 文件中，在data對象裏面定義了theName爲jack的數據屬性。
index.wxml文件內通過text標籤傳入這樣一個屬性名，data-name
就是text綁定的的屬性，將我們綁定的theName變量值傳入進去。結果是把綁定的屬性的數據，在控制檯的Wxml 一欄可以查看渲染出來的值。
四、WXML的語言特性 - 運算符綁定
先看一個例子：通過傳入的屬性值的變化，控制標籤文本的變化，如這裏的顯示或隱藏。
在index.wxml裏 ,view標籤有個hidden屬性，現在我們想顯示或影藏對應標籤的內容Hidden。
在index.js文件裏 Page的data對象中，定義了flag爲false 的數據屬性值。
在index.wxml 裏 view標籤裏面進行屬性hidden 的flag值的判斷。
這裏通過三目運算符，最終確定，這個hidden屬性的值。 如果我們傳入的flag標籤爲true,就隱藏這樣的一個內容，否則就顯示文本內容。這裏傳入false即 當前標籤文本不進行隱藏 ，所以小程序顯示了view標籤的文本內容Hidden。
- 其他綁定：字符串運算綁定，組合式綁定，擴展運算符綁定等。
- 傳入屬性控制標籤組件，小程序標籤裏面都有6種共同的屬性。
如下圖：
部分屬性的介紹
-
class :通過定義一個className,然後在wxss 中定義標籤對應的樣式類
-
style:內聯樣式-可以在標籤上寫入一個我們想要的樣式屬性。和class的區別在於style可以動態的設置樣式屬性，而wxss裏面定義的樣式類，只能傳入一些靜態的屬性。
-
data: 自定義屬性，可以將頁面上的數據信息，通過data屬性傳給我們的邏輯層wxml。當我們在組件上綁定的一些事件觸發的時候，可以通過事件回調函數，來獲取到data屬性傳入的數據。
-
blind/catch :綁定組件的默認事件。通過綁定事件的一個回調函數來進行一些操作。
五、WXML的語言特性 - 條件渲染之列表渲染特性
例如：做類似商品展示列表
在index.js 文件中，在data對象裏面定義了一個items數組數據屬性，然後裏面定義了各個商品名稱。
然後在index.wxml 文件內的block 標籤，通過wx:for屬性傳入了這個數組。
注意這裏block標籤不是一個組件，只是一個包裝元素，我們在頁面渲染的時候會看到這個標籤是不會被渲染出來。
需要了解2個變量:
item 變量 ：數組中的當前元素，也可以通過wx:for-item 這個屬性，指定我們想要的一個變量名
index變量 ：當前元素在我們數組裏面的下表，我們也可以通過wx-for- index屬性，去設置我們想要的變量名
wx:for ：傳入數組數據
block標籤：用於做這種列表
wx:key屬性：這個key代表項目中的唯一標識符，如果列表是個靜態列表，或並不想維護這個列表的一個狀態，可以忽略這個屬性的設置。
如果我們想當列表數據發生改變，重新觸發頁面渲染的時候，列表中項目他能保持自身的一個狀態。
如在input組件裏面，輸入我們一個想要的內容後，我們在頁面渲染的時候，我們不希望input組件裏面的內容發生改變，這個時候我們就需要用到wx:key這個屬性了。這個屬性會在頁面重新渲染的時候，確保帶有key的組件他會重新排序，而不是重新的渲染，從而提高我們頁面的渲染效率。這裏的index,當成了我們key的一個標識符，但其實我們一般不推薦，應該使用列表元素，某個具有唯一值的屬性來標識唯一性。
六、WXML的語言特性 - 條件渲染
例如：
index.wxml
綁定了一個condition 變量，語句意思： 當傳入的condition變量值是1的時候，喫餃子， 值爲 2喫米飯， 其他是吃麪食。
這個條件渲染，通過3種屬性控制，1. wx:if 2. wx:elif 3. wx:else
index.js
在data對象裏面，定義了condition 變量，變量值是生成一個1到3的隨機整數。
Math.random() 生成0到1的浮點隨機數
Math.floor() 對浮點數進行處理來返回整數
wx:if 和hidden 都可以控制元素的顯示或隱藏，他們的區別是啥呢？
- wx:if ：條件在切換時，框架會有一個局部渲染過程，會有更高的消耗。
- hidden：始終都會渲染，有更高的初始化渲染消耗。
- 如果界面在頻繁的進行顯示影藏的效果用hidden 更好
七、WXML的語言特性 - 模板特性
可以在該特性中定義自己的代碼片段，然後在不同的地方調用或引入，用template 標籤來表示模板。
例如：
在template裏面我們定義了一個代碼片段，name屬性是作爲template的名稱，在外面我們可以直接使用我們所定義的 模板。 通過is屬性去使用的。通過is去聲明需要的是哪個模板，is屬性也可以進行動態的數據綁定，使用模板的時候，我們需要傳入我們想要的數據，data屬性確保我們可以向模板傳入數據信息，注意模板擁有自己的作用域，只能通過data屬性傳入。
index.js
我們在data對象裏面定義了item對象，這個對象包含了name, phone, address.
index.wxml
定義了tempitem的模板，在模板裏面我們綁定了收件人， 聯繫方式， 地址，通過在外部聲明（is）引用這個模板，通過(data)擴展運算符把定義的item對象傳給這個模板。
WXML裏面可以通過模板供我們多處調用，從而減少代碼量
WXML裏面提供了文件引用方式：include, import
例1：
import 只能引用我們定義的模板文件裏面的模板模塊。通過src屬性引入了模板文件的路徑，然後通過聲明template標籤的is屬性來聲明我們使用的是哪個模板名稱，然後在外部模板文件內，定義了兩個標籤：template name標籤 和view標籤。只用到了template name 的內容。
作用域：只能引用目標文件他所定義的template模板，如果目標文件裏面嵌套了其他文件的template模板，是不會被引用到。
例2：
index.wxml
引入了a.wxml的模板
a.wxml
在這裏面引入了b.wxml模板,同時定義了a.wxml文件內自己的模板內容，在b.wxml文件內 定義了b的模板內容，內容是 this is b.wxml。
最後結果是隻顯示了 this is a.wxml。也就是a.wxml 文件裏面的模板內容，所以因爲import 有個作用域的原因避免了引入的死循環問題：a -b -a
注意：在使用import引入外部的模板，除了用is,還需要用import 導入外部文件,同時這個需要導入的外部文件必須在同一個文件夾下，否則無效
include 是把目標文件內除了模板代碼塊外的所有代碼都引入，相當於把所有的代碼拷貝include的位置這裏
例如：
index.wxml
引入了a.wxml文件的目標文件這裏通過src屬性引入。src屬性值可以是絕對路徑或相對路徑，然後引入了a.wxml 文件內的模板內容塊 a。
a.wxml 文件內聲明瞭template 這樣的模板內容塊，name屬性是a,在template 標籤下，寫了view標籤，view標籤內是一個helloworld 文本，並不在template標籤內。看結果值有helloworld 並沒有把this is … 渲染出來,他按照正常的先後順序加載視圖。這裏就暫時了import 和include 兩種引入的區別