今天開始我們一起學習小程序的WXML微信標記語言和視覺組件，我們先來了解下必須瞭解的定義：
概念解釋
小程序分為視圖層和邏輯層，視圖層使我們在手機上打開小程序時呈現的界面外觀樣式等，直接可見的物體都屬於視圖層。邏輯層是用來與視圖層產生交互，比如用戶按下按鈕小程序做出相應的反應，中間的邏輯及數據傳輸處理都在邏輯層進行，用戶看不到這些處理過程。
在一個小程序中視圖層由兩個文件，他們是.WXML和.WXSS。WXML文件負責頁面結構描述，是基於XML語言規範創建的微信描述語言。WXSS文件負責組件的視覺樣式描述，基於CSS語言規範創建的微信樣式語言。
視覺組件
小程序中的視覺組件在HTML文件中以標籤的形式存在的，標籤是WXML語言的最基本的視覺單位。
組件一般都自帶一些功能，並且採用與微信風格一致的樣式。一個標籤有開始和結束標籤組成一個完整的標籤，其屬性必須在兩個標籤中間定義及使用。如我們之前例子的主頁的按鈕，看下圖。
例子中的按鈕及按鈕定義
再比如<text>我是一個文字標籤/<text>這就是一個最簡單的標籤組件，兩個相同的標籤包裹內容，不同的是結尾標籤以/開頭。需要注意的是所有的標籤組件名和屬性都是小寫的。下面我截取了官方的組件屬性說明，因為這是最官方的。
組件屬性
公共屬性
每一種組件都有自己特殊的屬性，這個大家就自己查下官方API很容易理解，或者你什麼時候用到什麼組件去查下這樣非常容易加深理解及記憶。
數據綁定到組件上
簡單說：數據綁定是視覺層與邏輯層進行數據通訊的方法。
使用（{{data}}）的方式綁定數據，這種方式可以用於內容、組件屬性、控制屬性、關鍵字的綁定。
1.文本內容綁定（上節有示例這裡不重複，不明白翻上節課）
2.組件屬性綁定
index.wxml<view> /<view> //組件的屬性放在雙引號內這個需要注意index.jsPage({ data: { id: 0 }}) 經過以上的操作view的id屬性就綁定到了index.js
3.控制屬性的綁定：
index.wxml
<view> /<view> //組件的屬性放在雙引號內這個需要注意
index.js
Page({
data: {
condition: true
}
})
4.關鍵字綁定
index.wxml
<checkbox>
about.wxml文件
/<checkbox>然後在about.js下加入一個數組，就是選框組件的值：
about.js
結果如下：
出現一個多選框通過屬性的綁定就可以操作段選框
上面只是演示並沒有對數據進行後續處理。
今天先說這麼多，因為最近頭條可能與TX矛盾這類文章審核較慢所以可能不會及時更新但是一旦好轉小編立即奉上，畢竟自己辛苦寫出來是希望更多人看到。以後計劃不在採用這種一步一步的方式繼續，改為實例講解，因為知識點太散不集中講解需要週期太長，儘量在最短的時間給大家帶來更多的知識點。謝謝你們的支持，請持續關注小編！
閱讀更多 烽火資訊臺 的文章
