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

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

1. 字符串；代表在for循環的array中item的某個屬性，該屬性的值是列表中唯一的字符串或數字，并且不能動態改變。
2. 保留關鍵字；*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），可以在模板中定義代碼片段，然后在不同的地方調用。

使用模板

1. 使用name屬性作為模板的名字。然后在<template/>內定義代碼片段。
2. 使用 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站首頁

可以看出綠、紅、藍色區域的結構都一樣，改變的只是內容，這樣的結構就很適合用模板實現。（小安娜：那其他頁面也有這種結構呢？例如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）的通訊方式，可以綁定在組件上，當觸發事件，就會執行邏輯層中對應的事件處理函數。

事件分類

綁定事件格式為：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）的時候，執行順序：

1. touchstart
2. touchend
3. tap

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

1. touchstart
2. longtap
3. touchend
4. 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" );
    }
})

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

1. handleTap3
2. handleTap2
3. handleTap1

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

小程序除了提供bind還提供catch綁定事件，格式為：catch + 事件類型，catch事件綁定可以阻止向上冒泡?，F在在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嘛）

所以：我們設計/開發微信小程序時都應該用 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文件中。

目前支持的選擇器

注意：結果筆者開發試驗，暫時還不支持*選擇器（所有元素），例如我們經常會設置所有組件的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，要超神了），（小安娜：我去，喝個水時間去開黑了，快滾回來，馬上到我的提問環節了?。?/em>，都怪你了，一開始就說什么ap、ad、adc，搞的我熱血沸騰的，馬上來了。

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

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

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

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

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

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

<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 -->
<!-- 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 "common.wxss";
.middle-p {
  padding:15px;
}