WXML

WXML（WeiXin Markup Language）是微信的一套標籤語言，結合基礎組件、事件系統，可以構建出頁面的結構。

（小安娜：好像很厲害的樣子，那基礎組件、事件系統是什麼？感覺更厲害，因爲必須結合它們。），基礎組件類似HTML中的標籤，事件系統是JavaScript中的事件，可處理邏輯反應到界面上；wxml只是一個文件格式，如果沒有組件和事件它沒任何用處，又如果把組件、事件寫在txt文檔裏面也沒任何用處，所以沒有誰更厲害，相輔相成的關係。（小安娜：嗦嘎，就好像ap、ad、adc的關係，一起才最強）

用以下一些簡單的例子來看看 WXML 具有什麼能力：

數據綁定

WXML 中的動態數據均來自對應* Page 的 data 對象*。

簡單綁定

數據綁定使用 Mustache 語法（雙大括號）將變量包起來，可以作用於以下：

（小安娜：等等，有沒有點誠意，Mustache是什麼都不知道！），Mustache是基於JavaScript實現的模板解析引擎，等等…總之它非常方便和好用。（小安娜：我去，你自己也不知道是什麼吧）

內容

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello MINA!'
  }
})

顯示結果：

（小安娜：<view>代表什麼意思，記得HTML中沒這樣的標籤啊？），這就是基礎組件，view組件代表視圖容器，可以理解成HTML中的DIV標籤。

組件屬性（需要在雙引號之內）

<view id="item-{{id}}">id="item-{{id}}"</view>

Page({
  data: {
    id: 0
  }
})

顯示結果：

控制屬性（需要在雙引號之內）

<view wx:if="{{condition}}">你看得見我嗎？</view>

Page({
  data: {
    condition: true
  }
})

顯示結果：

（小安娜：我剛剛試了，condition改成false就看不見我了！），是的，改成false就表示條件爲假，view組件裏面的內容就不會顯示了。（小安娜：哦明白了，雖然我不想看見你，爲了學好小程序還是改成true吧）

關鍵字（需要在雙引號之內）

true：boolean 類型的 true，代表真值。

false： boolean 類型的 false，代表假值。

<checkbox checked="{{false}}" />默認沒選中

特別注意：不要直接寫 checked="false"，這時候"false"是一個字符串，（JavaScript中非0爲真、非空位真）轉成boolean類型後代表真值。

（小安娜：那這個checkbox是不是和HTML的複選框一樣？），沒錯啦，但checkbox組件更團結，更多是以組的概念存在，例如我們都會用checkbox-group包括起所有同類型的checkbox組件，後面用到自然會明白了。（小安娜：啊啊抓狂了，又多了個checkbox-group，感覺沒耐心學了），可別這樣想，基礎都是乏味的，可是帶你飛之前要先帶你走，下篇文章我們做案例就會感覺很有意思了。（小安娜：知道啦，那我可以直接看下一篇不^_^），繼續…

所以顯示結果：

運算

可以在 {{}} 內進行簡單的運算，支持的有如下幾種方式：

三元運算

三元運算是：條件 ? 結果1 : 結果2；條件爲ture時結果1否則結果2。

<view hidden="{{flag ? true : false}}"> 看得見嗎？ </view>

（小安娜：flag我找了好久沒見你定義啊，你確定不會報錯？），不會的，這種變量即爲空變量，（還記得前面提到過非空爲真）flag轉成 boolean類型後代表false，也就是表達式最終是這樣的：hidden="{{false}}"，明白了嗎？（小安娜：阿拉搜，繼續啦）

顯示結果：

算數運算

<view> {{a + b}} + {{c}} + d </view>

Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

這次就先不說結果了，小安娜，你來猜猜看結果是什麼？（小安娜：恩~，a=1，b=2，a+b就等於3，c=3，咦~，d沒定義啊？），結果其實是：3 + 3 + d，d不是沒定義，而它本來就是一個文字d，不參與任何計算。（小安娜：我這麼認真回答，你居然這樣坑我！！！）

顯示結果：

字符串運算

<view>{{"hello " + name}}</view>

Page({
  data:{
    name: 'MINA2'
  }
})

顯示結果：

數據路徑運算

如果data對象中包含了子對象，例如：

Page({
  data: {
    object: {
      key: 'Hello '
    },
    array: ['MINA3']
  }
})

可以這樣訪問：

<view>{{object.key}} {{array[0]}}</view>

顯示結果：

這個應該沒問題吧？（小安娜：沒問題，就是點操作嘛，一個是JSON對象操作，一個是數組操作），OK繼續。

組合

也可以在 Mustache 內直接進行組合，構成新的對象或者數組。

數組

<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>

Page({
  data: {
    zero: 0
  }
})

（小安娜：等等，這裏我看了很久還是理解不了，再細講解下），好，首先我們在data對象中定義zero變量並賦值爲0，然後使用view組件的wx:for屬性表示重複顯示這個組件，wx:for屬性的值是一個重新構造的數組，數組中第一個元素（也就是下標爲0）的值來自於data中的zero對象，所以最終是用數組爲[0, 1, 2, 3, 4]重複渲染組件。（小安娜：哦哦，完~全明白了）

顯示結果：

條件渲染

wx:if

wx:if我們之前已經用過了，用來判斷是否渲染該組件：

<view wx:if="{{condition}}">你看得見我嗎？</view>

也可以用 wx:elif 和 wx:else 來添加其他判斷：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

Page({
  data: {
    length: 10
  }
})

界面顯示結果：1

block wx:if

因爲 wx:if 是一個控制屬性，需要將它添加到一個標籤上。但是如果我們想一次性判斷多個組件，我們可以使用 <block/> 標籤將多個組件包裝起來，並在block標籤上用wx:if控制屬性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

這裏的{{true}}是一個boolean類型的值，所以最後view1、view2都會顯示。

（小安娜：我記得你說view可以看成div，那block呢，HTML中沒這種控制標籤？），沒錯啦，<block/> 並不是一個組件，它僅是一個包裝元素，不會在頁面中做任何渲染顯示，只接受控制屬性。（小安娜：明白了，block就好像文件夾，不佔用空間，可設置文件夾顯示和隱藏）

列表渲染

wx:for

在組件上使用 wx:for 控制屬性綁定一個數組數據重複渲染該組件。

默認的當前項下標變量名爲： index，數組當前項的變量名爲：item：（小安娜：不默認是什麼樣啊？）

<view wx:for="{{array}}">
  {{index}}：{{item.message}}
</view>

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

顯示結果：

不使用默認可以使用 wx:for-item 可以指定當前元素的變量名，使用 wx:for-index 可以指定當前下標的變量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

輸出結果一樣。

block wx:for

類似block wx:if，也可以將wx:for用在 <block/>標籤上，重複渲染多組件塊。例如：

<block wx:for="{{['a', 'b', 'c']}}">
  <view> {{index}}：{{item}}</view>
</block>

顯示結果：

wx:key（可以選擇跳過，但，是很重要的重點）

（小安娜：突然有種想打你的衝動，又是重點又可以跳過，下課操場見！！！），冷靜、冷靜，官方文檔我看到這時，也是沒理解這是什麼意思，後來就跳過這段了，但是也完成了B站的首頁，（小安娜：哈~，原來是自己傻看不懂，別把我們的智商和你比好吧！），當寫到這時再去多看了一遍（小安娜：絕對不止一遍），把官方例子運行調試之後，才發現微信官方設計wx:key的用意，而且是很重要的重點。

如果列表中的項目位置會改變或者有新的項目添加到列表中，爲了項目保持自己的屬性和狀態（如 <input/> 的輸入內容，<switch/> 的選中狀態），需要使用wx:key來指定列表中項目的唯一的標識符。

wx:key的值以兩種形式提供：

字符串；代表在for循環的array中item的某個屬性，該屬性的值是列表中唯一的字符串或數字，並且不能動態改變。
保留關鍵字；*this 代表在for循環中的item本身，這種需要item本身是唯一的字符串或者數字。

是不是完全理解不了什麼意思？（小安娜：我覺得這不是重點，重點是案例你還沒講）

案例1：wx:key的值是字符串

<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> 改變順序 </button>
<button bindtap="addToFront"> 添加到前面 </button>

（小安娜：bindtap是什麼意思呢？），這個是用來綁定事件的，bindtap是當用戶點擊的時候會執行相對於的函數，這個馬上會在事件中詳細講解。

Page({
  data: {
    objectArray: [
      {id: 5, unique: 'unique_5'},
      {id: 4, unique: 'unique_4'},
      {id: 3, unique: 'unique_3'},
      {id: 2, unique: 'unique_2'},
      {id: 1, unique: 'unique_1'},
      {id: 0, unique: 'unique_0'},
    ]
  },
  // 隨機改變列表項目順序
  switch: function(e) {
    const length = this.data.objectArray.length
    for (let i = 0; i < length; ++i) {
      const x = Math.floor(Math.random() * length)
      const y = Math.floor(Math.random() * length)
      const temp = this.data.objectArray[x]
      this.data.objectArray[x] = this.data.objectArray[y]
      this.data.objectArray[y] = temp
    }
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  // 添加項目到最前面
  addToFront: function(e) {
    const length = this.data.objectArray.length
    this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)
    this.setData({
      objectArray: this.data.objectArray
    })
  }
})

（小安娜：天了嚕，一大波代碼來襲，看不懂了啦），所有函數真可以不用看懂內部實現，只需知道幹什麼用就行（內心的傑爾夫君：其實我知道只有她看不懂，大家照顧照顧她，假裝看不懂）（小安娜：阿丘~誰在說我壞話！）。

顯示結果（①：初始化狀態；②：打開項目2的開關；③：改變順序後項目2依然是打開狀態；④：在最前面添加項目6，項目2依然是打開狀態），這就是wx:key的作用，它會利用一個唯一值保留該項狀態：

案例2：wx:key的值是*this

<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront">添加到前面</button>

Page({
  data: {
    numberArray: [1, 2, 3, 4]
  },
  // 添加項目到前面
  addNumberToFront: function(e){
    this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)
    this.setData({
      numberArray: this.data.numberArray
    })
  }
})

顯示結果：

模板

WXML提供模板（template），可以在模板中定義代碼片段，然後在不同的地方調用。

使用模板

使用name屬性作爲模板的名字。然後在<template/>內定義代碼片段。
使用 is 屬性，聲明需要的使用的模板，然後將模板所需要的 data 傳入。

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>
<!-- 這裏代表把item對象傳入模板 -->
<template is="msgItem" data="{{...item}}"/>

Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

顯示結果：

is 屬性可以使用 Mustache 語法來做邏輯判斷，例如以下根據條件來選擇使用模板：

<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
    <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

顯示結果：

恩~\~，這裏有什麼問題嗎？（小安娜：恩~\~就是呢，不知道模板可以用在什麼地方？），當你網站很多地方都用到同一種結構的時候就可以用了，例如我們要做的B站首頁：

（小安娜：↓↓↓藍色區域第二張圖，不謝）

可以看出綠、紅、藍色區域的結構都一樣，改變的只是內容，這樣的結構就很適合用模板實現。（小安娜：那其他頁面也有這種結構呢？例如B站的直播頁也有這種結構，順便問一下爲什麼綠色在最前面XD），像這種需求我們就需要創建單獨的模板文件，在需要的地方導入模板文件就行，接下來就細講這個。

導入模板

WXML 提供兩種文件引用方式import和include。

帶作用域的import

import可以導入指定文件的template，例如在item.wxml中定義了一個叫item的template：

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

在 index.wxml 中引用了 item.wxml，就可以使用item模板：

<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

data="{{text: 'forbar'}}"表示構造一個對象傳入item.wxml中item模板。

（小安娜：顯示結果是：forbar，對吧？），沒錯啦，厲害了我的小姐姐；還有就是import有一級作用域的概念，例如：C import B，B import A，在C中可以使用B定義的template，在B中可以使用A定義的template，但是C不能使用A定義的template。

<!-- a.wxml -->
<template name="A">
  <text> A template </text>
</template>

<!-- b.wxml -->
<import src="a.wxml"/>
<template name="B">
  <text> B template </text>
</template>

<!-- index.wxml -->
<import src="b.wxml"/>
<template is="A"/>  <!-- Error! Can not use template when not import A. -->
<template is="B"/>

顯示結果：B template；程序這樣寫編譯會通過，但會在控制檯（Console）報運行時警告（Runtime warn），還請注意。（小安娜：這麼大個坑，那不是debug時很難找出問題？），是啊，的確很難避免，很容易出錯而且找不到問題所在，但顯示結果又不對，所以我們開發的時候要多注意調試控制檯（Console）輸出的錯誤和異常信息。（小安娜：開發果然是個細心活，同志們一起加油啦）。

頭部和底部的include

include可以將目標文件除了<template/>的整個代碼引入，相當於是拷貝到<include />的位置，比較常用於程序的頭部（header）和底部（footer），例如：

<!-- header.wxml -->
<view>{{header}}</view>

<!-- footer.wxml -->
<view>{{footer}}</view>

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

等同於 === ：

<!-- index.wxml -->
<view>{{header}}</view>
<view> body </view>
<view>{{footer}}</view>

// index.js
Page({
  data: {
    header: "header",
    footer: "footer"
  }
})

顯示結果：

（小安娜：發現了，它可以直接使用index.js的數據），沒錯，所以這種更適合頭部和底部數據不會隨着頁面不同而改變，而import更適合定義內容中模板，因爲每個頁面的數據結構體是會不一樣的，例如首頁的數據結構可能是：{channels:[music:[],dance:[],live:[]]}，而在直播頁面中的數據結構可能是：{lives:[]}，2個頁面數據結構不同，這時候可以用import把數據重新構造傳入給模板。（小安娜：懵懵懂懂好像明白了），沒關係，後面我們實戰時就會徹底明白了。（小安娜：期待期待~）

事件

事件是視圖層（wxml）到邏輯層（js）的通訊方式，可以綁定在組件上，當觸發事件，就會執行邏輯層中對應的事件處理函數。

事件分類

類型	觸發條件
touchstart	手指觸摸動作開始
touchmove	手指觸摸後移動
touchcancel	手指觸摸動作被打斷，如來電提醒，彈窗
touchend	手指觸摸動作結束
tap	手指觸摸後馬上離開
longtap	手指觸摸後，超過350ms再離開

綁定事件格式爲：bind + 事件類型（例如：bindtap），我們先來看事件類型的執行順序：

<!-- index.wxml -->
<button 
bindtouchstart="ontouchstart" 
bindtouchmove="ontouchmove"  
bindtouchend="ontouchend" 
bindtap="ontap" 
bindlongtap="onlongtap">點擊我<button/>

Page({
    ontouchstart: function() {
        console.log( "touchstart" );
    },
    ontouchmove: function() {
        console.log( "touchmove" );
    },
    ontouchend: function() {
        console.log( "touchend" );
    },
    ontap: function() {
        console.log( "tap" );
    },
    onlongtap: function() {
        console.log( "longtap" );
    }
})

當點擊（<=350ms）的時候，執行順序：

touchstart
touchend
tap

當長按（>350ms）的時候，執行順序：

touchstart
longtap
touchend
tap

我們發現點擊是我們想象中的那樣，但是長按執行一次longtap還會在執行一次tap事件，（小安娜：那這就比較坑了，我很喜歡長按一些頭像按鈕，因爲會有快捷操作菜單），是啊，我知道長按這個操作在Android是很常用的設計，所以我們在小程序裏面儘量避免設計某個組件有長按又有點擊事件。（小安娜：因爲這個操作太好用了，沒有解決辦法嗎？），可以在data裏面設置一個判斷長按的變量，當touchstart的時候設置此變量爲false，當執行longtap事件的時候設置變量爲true，然後在tap事件裏面做判斷就行了。

Page({
    data: {
      islongtap: false  
    },
    ontouchstart: function() {
        this.islongtap = false;
        console.log( "touchstart" );
    },
    ontap: function() {
        if( this.islongtap ) return ;
        console.log( "tap" );
    },
    onlongtap: function() {
        this.islongtap = true;
        console.log( "longtap" );
    }
})

（小安娜：perfect，運行了下完美解決）

像js的事件一樣，小程序事件也分爲冒泡事件和非冒泡事件：

<view id="outter" bindtap="handleTap1">
  <view id="middle" bindtap="handleTap2">
    <button id="inner" bindtap="handleTap3">
      操作按鈕
    </button>
  </view>
</view>

Page({
    handleTap1: function() {
        console.log( "handleTap1" );
    },
    handleTap2: function() {
        console.log( "handleTap2" );
    },
    handleTap3: function() {
        console.log( "handleTap3" );
    }
})

這是一個常用的結構，一個大的層包含內部很多小層，小層內部有個操作按鈕，當我們點擊操作按鈕：

handleTap3
handleTap2
handleTap1

發現所有父組件的點擊事件都執行了，這就是冒泡事件：當一個組件上的事件被觸發後，該事件會向父節點傳遞。非冒泡事件就是不會向父節點傳遞。當然這很多時候不是件好事情，怎麼避免呢？

小程序除了提供bind還提供catch綁定事件，格式爲：catch + 事件類型，catch事件綁定可以阻止向上冒泡。現在在button上改用catch試一下：

<view id="outter" bindtap="handleTap1">
  <view id="middle" bindtap="handleTap2">
    <button id="inner" catchtap="handleTap3">
      操作按鈕
    </button>
  </view>
</view>

輸出結果：handleTap3，達到我們的效果了。（小安娜：我覺得把父組件的綁定事件去掉更好）

事件參數event

當組件觸發事件時，處理函數會收到一個事件對象參數。

Page({
    handleTap3: function(event) {
        console.log( event );
    }
})

控制檯輸出的結果：

{
    // 代表事件的類型
    "type": "tap",
    // 頁面打開到觸發事件所經過的毫秒數
    "timeStamp": 2239,
    // 觸發事件的源組件
    "target": {
        // 事件源組件的id
        "id": "inner",
        // 距離左方或上層控件的位置（官方文檔未說明）
        "offsetLeft": 0,
        // 距離上方或上層控件的位置（官方文檔未說明）
        "offsetTop": 0,
        // 事件源組件上由data-開頭的自定義屬性組成的集合
        "dataset": {}
    },
    // 事件綁定的當前組件，數據格式同 target
    "currentTarget": {
        "id": "inner",
        "offsetLeft": 0,
        "offsetTop": 0,
        "dataset": {}
    },
    // 額外的數據信息
    "detail": {
        "x": 280,
        "y": 18
    },
    // touches 是一個數組，每個元素爲一個 Touch 對象（canvas 觸摸事件中攜帶的 touches 是 CanvasTouch 數組）。 表示當前停留在屏幕上的觸摸點。
    "touches": [
        {
            // 觸摸點的標識符
            "identifier": 0,
            // 距離文檔左上角的距離，文檔的左上角爲原點 ，橫向爲X軸
            "pageX": 280,
            // 距離文檔左上角的距離，文檔的左上角爲原點 ，縱向爲Y軸
            "pageY": 18,
            // 距離頁面可顯示區域（屏幕除去導航條）左上角距離，橫向爲X軸
            "clientX": 280,
            // 距離頁面可顯示區域（屏幕除去導航條）左上角距離，縱向爲Y軸
            "clientY": 18
        }
    ],
    // changedTouches 數據格式同 touches。 表示有變化的觸摸點，如從無變有（touchstart），位置變化（touchmove），從有變無（touchend、touchcancel）。
    "changedTouches": [
        {
            "identifier": 0,
            "pageX": 280,
            "pageY": 18,
            "clientX": 280,
            "clientY": 18
        }
    ]
}

每個參數具體什麼意思，我們放在以後B站項目中去講解，（小安娜：噗~，我好多問題準備問了，現在又憋回去了，聽你講東西真心累），畢竟太多了，每個都講到估計可以寫幾篇文章了，用到什麼再回頭來看看，然後再配合案例這樣最容易理解了。（小安娜：好像也是，總感覺哪裏不對，等等…要是你不用到呢），這個保證不會，因爲有我們常用的dataset，經常會爲組件自定義一些參數。（小安娜：姑且相信你）

WXSS

WXSS(WeiXin Style Sheets)是一套樣式語言，用於描述 WXML 的組件樣式。
用來決定 WXML 的組件應該怎麼顯示。
具有 CSS 大部分特性。
定義在 app.wxss 中的樣式爲全局樣式，可用於任何Page。在 Page 裏的 wxss 文件中定義的樣式爲局部樣式，只作用在當前頁面，並會覆蓋 app.wxss 中相同的選擇器。

與 CSS 相比增加的特性有：

尺寸單位
樣式導入

尺寸單位rpx

rpx（responsive pixel）: 可以根據屏幕寬度進行自適應。規定屏幕寬爲750rpx。如在 iPhone6 上，屏幕寬度爲375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。（小安娜：真囉嗦，也就是1px = 2rpx嘛）

設備	rpx換算px (屏幕寬度/750)	px換算rpx (750/屏幕寬度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6/6s	1rpx = 0.5px	1px = 2rpx
iPhone6/6s Plus	1rpx = 0.552px	1px = 1.81rpx

所以：我們設計/開發微信小程序時都應該用 iPhone6s 作爲視覺稿的標準。（小安娜：所以，看你教程是不是有福利，會給我們發iPhone 6s嗎？）

樣式導入

使用@import語句導入外聯樣式表，@import後跟樣式表的相對路徑。

/* common.wxss */
.header,
.footer {
    padding: 20rpx 0;
    text-align: center;
    font-size: 50rpx;
}

/* index.wxss */
@import "common.wxss";

.content {
    line-height: 50rpx;
}

<view class="header">header</view>
<view class="content" style="color:#e64340;">和小安娜一塊去超市買東西，小安娜：“好想喫泡麪，可是怕上火啊”；我：“那就不要買了”；小安娜：“不行，再去買一罐加多寶吧”；我：...</view>
<view class="footer">footer</view>

這樣就在index.wxss中導入了common.wxss樣式文件，顯示結果：

（小安娜：你怎麼？不過用加多寶泡泡麪還真挺好喫。喂，快說正事啦，我發現你使用了行內樣式style="color:#e64340;"），wxss也支持行內樣式，不過儘量避免將靜態的樣式寫入style中，以免影響渲染速度，靜態樣式都應該寫在wxss文件中。

目前支持的選擇器

選擇器	樣例	樣例描述
.class	.intro	選擇所有擁有 class=”intro” 的組件
id	firstname	選擇擁有 id=”firstname” 的組件
element	view	選擇所有 view 組件
element, element	view,.header	checkbox 選擇所有文檔的 view 組件和所有的 checkbox 組件
::after	view::after	在 view 組件後邊插入內容
::before	view::before	在 view 組件前邊插入內容

注意：結果筆者開發試驗，暫時還不支持*選擇器（所有元素），例如我們經常會設置所有組件的box-sizing屬性來改變測量寬度的起點邊界，從而使規定寬度包括邊框和填充：

* {
    box-sizing: border-box;
}

使用之後會發現所有wxss文件中的樣式都無效了。（小安娜：那可以怎麼解決呢，難道給每個組件都設置一次？），小哥哥不才，目前還真是每個組件都設置一次，或者這問題官方會很快解決。（小安娜：也是，還是官方靠譜點。）

記得官方文檔

瞭解到這，基礎知識終於告一段落了，下一篇開始實戰，開發時更多組件知識請參考官方文檔。

開發工具介紹和下載：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html
註冊流程：https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html
開發組件：https://mp.weixin.qq.com/debug/wxadoc/dev/component/
開發API：https://mp.weixin.qq.com/debug/wxadoc/dev/api/
問題交流：QQ羣：301926812（非官方）

寫了這麼多口好乾，我需要倒杯水喝，等等我。（小安娜：去吧去吧），「滴答、滴答，過去5分鐘…10分鐘…」（小安娜：喂喂，10分鐘了，你是喝一桶水嗎？），（遠處的聲音：quatary kill！WO CAO，要超神了），（小安娜：我去，喝個水時間去開黑了，快滾回來，馬上到我的提問環節了！），都怪你了，一開始就說什麼ap、ad、adc，搞的我熱血沸騰的，馬上來了。

小安娜有問題

WXML是什麼？

傑爾夫君：WXML（WeiXin Markup Language）是一套標籤語言，結合基礎組件、事件系統，可以構建出頁面的結構。和HTML相似。

WXML組件怎麼綁定數據？

**傑爾夫君：**WXML中的動態數據均來自對應 Page 的 data。數據綁定使用 Mustache 語法（雙大括號）將變量包起來。例如：

Page({
  data: {
    message: 'Hello MINA!'
  }
})

<!-- 綁定Page中的data.message -->
<view> {{ message }} </view>

什麼是Mustache？

**傑爾夫君：**Mustache 是一個 logic-less （輕邏輯）模板解析引擎。在小程序裏主要關注小程序的語法。詳細瞭解前往：http://www.open-open.com/lib/view/open1416792564461.html

WXML中怎麼使用條件判斷？

傑爾夫君：在框架中，我們用 wx:if="{{condition}}" 來判斷是否需要渲染該代碼塊：

<view wx:if="{{condition}}"> True </view>

也可以用 wx:elif 和 wx:else ：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

如果想一次性判斷多個組件標籤，我們可以使用一個 <block/> 標籤將多個組件包裝起來：

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

WXML怎麼循環列表？

傑爾夫君：在組件上使用wx:for屬性綁定一個數組，即可使用數組中的數據重複渲染該組件，默認當前的下標變量名爲index，當前項的變量名爲item。用wx:for-index指定當前下標的變量名，用wx:for-item指定當前元素的變量名；

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

等等，怎麼感覺你從頭到尾都有問題啊，感覺沒學過一樣？（小安娜：沒辦法啦，這次講太多了，本小姐記憶不太好，都不記得學了什麼），好吧好吧，也正好總結一下，繼續你的問題。（小安娜：你別打斷啊！）

WXML怎麼使用模板？

傑爾夫君：用<template/>定義模板，指定name屬性爲模板的名字，用is屬性指定使用模板的名稱，然後將模板所需要的data傳入，如：

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

<!-- 參數傳入Page中的data.item -->
<template is="msgItem" data="{{...item}}"/>

Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

也可以把模板定義在單獨文件中，通過import或include引入。

<!-- import -->
<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

<!-- index.wxml -->
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

<!-- include -->
<!-- header.wxml -->
<view> header </view>

<!-- footer.wxml -->
<view> footer </view>

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

import和include區別是：import有一層作用域概念，即C import B，B import A，在C中可以使用B的template，在B中可以使用A的template，但是C不能使用A定義的template。而include相當於是拷貝，使用原頁面數據。

WXML中怎麼使用事件？

傑爾夫君：使用bind或catch開頭，然後跟上事件的類型（如：bindtap, catchtouchstart），bind事件綁定會發生事件冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。

什麼是WXSS？

**傑爾夫君：**WXSS(WeiXin Style Sheets)是一套樣式語言，用於描述 WXML 的組件樣式。WXSS 具有 CSS 大部分特性。同時爲了更適合開發微信小程序，對 CSS 進行了擴充以及修改了：尺寸單位、樣式導入。

尺寸單位

rpx（responsive pixel）: 可以根據屏幕寬度進行自適應。規定屏幕寬爲750rpx。以iPhone6爲例：1rpx = 0.5px，1px = 2rpx。

樣式導入

使用@import語句導入外部樣式，@import後跟外部樣式文件的相對路徑。

@import "common.wxss";
.middle-p {
  padding:15px;
}

（小安娜：嗯~\~，我問完了），好的今天就到這了，今天學的比較多，希望多多複習交流，記住我們的交流QQ羣：301926812（非官方的也很營養），（小安娜：好的，已經加了，撒喲啦啦！）

3.微信小程序-B站：wxml和wxss文件

WXML

數據綁定

簡單綁定

內容

組件屬性（需要在雙引號之內）

控制屬性（需要在雙引號之內）

關鍵字（需要在雙引號之內）

運算

三元運算

算數運算

字符串運算

數據路徑運算

組合

數組

條件渲染

wx:if

block wx:if

列表渲染

wx:for

block wx:for

wx:key（可以選擇跳過，但，是很重要的重點）

模板

使用模板

導入模板

帶作用域的import

頭部和底部的include

事件

事件分類

事件參數event

WXSS

尺寸單位rpx

樣式導入

目前支持的選擇器

記得官方文檔

小安娜有問題

WXML是什麼？

WXML組件怎麼綁定數據？

什麼是Mustache？

WXML中怎麼使用條件判斷？

WXML怎麼循環列表？

WXML怎麼使用模板？

WXML中怎麼使用事件？

什麼是WXSS？

尺寸單位

樣式導入