微信小程序?qū)嵗_發(fā)教程 - 仿嗶哩嗶哩彈幕視頻網(wǎng)（一）
主要內(nèi)容：介紹文章的作者和前言準(zhǔn)備
微信小程序?qū)嵗_發(fā)教程 - 仿嗶哩嗶哩彈幕視頻網(wǎng)（二）
主要內(nèi)容：介紹開發(fā)前必須知道的知識(shí)：文件結(jié)構(gòu)、app.json配置、pages對(duì)象、window、tabBar、networkTimeout、debug
微信小程序?qū)嵗_發(fā)教程 - 仿嗶哩嗶哩彈幕視頻網(wǎng)（三）
主要內(nèi)容：因?yàn)閣xml和wxss的重要性，單獨(dú)抽出來詳細(xì)講解：wxml是什么？、數(shù)據(jù)綁定、運(yùn)算、組合運(yùn)算、條件渲染、列表渲染、wx:key的重要性、模板的使用、事件綁定和分類、WXSS的用法和那些坑。
微信小程序?qū)嵗_發(fā)教程 - 仿嗶哩嗶哩彈幕視頻網(wǎng)（四）
主要內(nèi)容：實(shí)戰(zhàn)第一篇仿B站嗶哩嗶哩彈幕視頻網(wǎng)首頁界面小程序demo
前言：
在學(xué)習(xí)了微信小程序?qū)嵗_發(fā)教程 - 仿嗶哩嗶哩彈幕視頻網(wǎng)系列的前面兩節(jié)課程后，我相信大家對(duì)于作者的寫作風(fēng)格，微信小程序的目錄結(jié)構(gòu)已經(jīng)有了基礎(chǔ)的了解。今天我們就來邊開發(fā)邊學(xué)習(xí)wxml和wxss文件.md。如果對(duì)小程序的基礎(chǔ)非常了解，可直接進(jìn)入微信小程序?qū)嵗_發(fā)教程 - 仿嗶哩嗶哩彈幕視頻網(wǎng)（四）
WXML
WXML（WeiXin Markup Language）是微信的一套標(biāo)簽語言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁面的結(jié)構(gòu)。
（小安娜：好像很厲害的樣子，那基礎(chǔ)組件、事件系統(tǒng)是什么？感覺更厲害，因?yàn)楸仨毥Y(jié)合它們。），基礎(chǔ)組件類似HTML中的標(biāo)簽，事件系統(tǒng)是JavaScript中的事件，可處理邏輯反應(yīng)到界面上；wxml只是一個(gè)文件格式，如果沒有組件和事件它沒任何用處，又如果把組件、事件寫在txt文檔里面也沒任何用處，所以沒有誰更厲害，相輔相成的關(guān)系。（小安娜：嗦嘎，就好像ap、ad、adc的關(guān)系，一起才最強(qiáng)）
用以下一些簡(jiǎn)單的例子來看看 WXML 具有什么能力：
數(shù)據(jù)綁定WXML 中的動(dòng)態(tài)數(shù)據(jù)均來自對(duì)應(yīng). Page 的 data 對(duì)象。
簡(jiǎn)單綁定數(shù)據(jù)綁定使用 Mustache 語法（雙大括號(hào)）將變量包起來，可以作用于以下：
（小安娜：等等，有沒有點(diǎn)誠意，Mustache是什么都不知道?。?/i>，Mustache是基于JavaScript實(shí)現(xiàn)的模板解析引擎，等等...總之它非常方便和好用。（小安娜：我去，你自己也不知道是什么吧）
內(nèi)容<view> {{ message }} </view>Page({
data: {
message: 'Hello MINA!'
}
})顯示結(jié)果：
（小安娜：<view>代表什么意思，記得HTML中沒這樣的標(biāo)簽啊？），這就是基礎(chǔ)組件，view組件代表視圖容器，可以理解成HTML中的DIV標(biāo)簽。
組件屬性（需要在雙引號(hào)之內(nèi)）<view id="item-{{id}}">id="item-{{id}}"</view>Page({
data: {
id: 0
}
})顯示結(jié)果：
控制屬性（需要在雙引號(hào)之內(nèi)）<view wx:if="{{condition}}">你看得見我嗎？</view>Page({
data: {
condition: true
}
})顯示結(jié)果：
（小安娜：我剛剛試了，condition改成false就看不見我了?。?/i>，是的，改成false就表示條件為假，view組件里面的內(nèi)容就不會(huì)顯示了。（小安娜：哦明白了，雖然我不想看見你，為了學(xué)好小程序還是改成true吧）
關(guān)鍵字（需要在雙引號(hào)之內(nèi)）
true：boolean 類型的 true，代表真值。
false： boolean 類型的 false，代表假值。
<checkbox checked="{{false}}" />默認(rèn)沒選中特別注意：不要直接寫 checked="false"，這時(shí)候"false"是一個(gè)字符串，（JavaScript中非0為真、非空位真）轉(zhuǎn)成boolean類型后代表真值。
（小安娜：那這個(gè)checkbox是不是和HTML的復(fù)選框一樣？），沒錯(cuò)啦，但checkbox組件更團(tuán)結(jié)，更多是以組的概念存在，例如我們都會(huì)用checkbox-group包括起所有同類型的checkbox組件，后面用到自然會(huì)明白了。（小安娜：啊啊抓狂了，又多了個(gè)checkbox-group，感覺沒耐心學(xué)了），可別這樣想，基礎(chǔ)都是乏味的，可是帶你飛之前要先帶你走，下篇文章我們做案例就會(huì)感覺很有意思了。（小安娜：知道啦，那我可以直接看下一篇不^_^），繼續(xù)...
所以顯示結(jié)果：
運(yùn)算可以在 {{}} 內(nèi)進(jìn)行簡(jiǎn)單的運(yùn)算，支持的有如下幾種方式：
三元運(yùn)算三元運(yùn)算是：條件 ? 結(jié)果1 : 結(jié)果2；條件為ture時(shí)結(jié)果1否則結(jié)果2。
<view hidden="{{flag ? true : false}}"> 看得見嗎？ </view>（小安娜：flag我找了好久沒見你定義啊，你確定不會(huì)報(bào)錯(cuò)？），不會(huì)的，這種變量即為空變量，（還記得前面提到過非空為真）flag轉(zhuǎn)成 boolean類型后代表false，也就是表達(dá)式最終是這樣的：hidden="{{false}}"，明白了嗎？（小安娜：阿拉搜，繼續(xù)啦）
顯示結(jié)果：
算數(shù)運(yùn)算<view> {{a + b}} + {{c}} + d </view>Page({
data: {
a: 1,
b: 2,
c: 3
}
})這次就先不說結(jié)果了，小安娜，你來猜猜看結(jié)果是什么？（小安娜：恩~，a=1，b=2，a+b就等于3，c=3，咦~，d沒定義啊？），結(jié)果其實(shí)是：3 + 3 + d，d不是沒定義，而它本來就是一個(gè)文字d，不參與任何計(jì)算。（小安娜：我這么認(rèn)真回答，你居然這樣坑我！?。。?/i>
顯示結(jié)果：
<view>{{"hello " + name}}</view>Page({
data:{
name: 'MINA2'
}
})顯示結(jié)果：
數(shù)據(jù)路徑運(yùn)算如果data對(duì)象中包含了子對(duì)象，例如：
Page({
data:{
name: 'MINA2'
}
})可以這樣訪問：
<view>{{object.key}} {{array[0]}}</view>顯示結(jié)果：
這個(gè)應(yīng)該沒問題吧？（小安娜：沒問題，就是點(diǎn)操作嘛，一個(gè)是JSON對(duì)象操作，一個(gè)是數(shù)組操作），OK繼續(xù)。
組合也可以在 Mustache 內(nèi)直接進(jìn)行組合，構(gòu)成新的對(duì)象或者數(shù)組。
數(shù)組<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>Page({
data: {
zero: 0
}
})（小安娜：等等，這里我看了很久還是理解不了，再細(xì)講解下），好，首先我們?cè)赿ata對(duì)象中定義zero變量并賦值為0，然后使用view組件的wx:for屬性表示重復(fù)顯示這個(gè)組件，wx:for屬性的值是一個(gè)重新構(gòu)造的數(shù)組，數(shù)組中第一個(gè)元素（也就是下標(biāo)為0）的值來自于data中的zero對(duì)象，所以最終是用數(shù)組為[0, 1, 2, 3, 4]重復(fù)渲染組件。（小安娜：哦哦，完~全明白了）
顯示結(jié)果：
條件渲染wx:ifwx:if我們之前已經(jīng)用過了，用來判斷是否渲染該組件：
<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
}
})界面顯示結(jié)果：1
block wx:if因?yàn)?wx:if 是一個(gè)控制屬性，需要將它添加到一個(gè)標(biāo)簽上。但是如果我們想一次性判斷多個(gè)組件，我們可以使用 標(biāo)簽將多個(gè)組件包裝起來，并在block標(biāo)簽上用wx:if控制屬性。
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>這里的{{true}}是一個(gè)boolean類型的值，所以最后view1、view2都會(huì)顯示。
（小安娜：我記得你說view可以看成div，那block呢，HTML中沒這種控制標(biāo)簽？），沒錯(cuò)啦， 并不是一個(gè)組件，它僅是一個(gè)包裝元素，不會(huì)在頁面中做任何渲染顯示，只接受控制屬性。（小安娜：明白了，block就好像文件夾，不占用空間，可設(shè)置文件夾顯示和隱藏）
列表渲染wx:for在組件上使用 wx:for 控制屬性綁定一個(gè)數(shù)組數(shù)據(jù)重復(fù)渲染該組件。
默認(rèn)的當(dāng)前項(xiàng)下標(biāo)變量名為： index，數(shù)組當(dāng)前項(xiàng)的變量名為：item：（小安娜：不默認(rèn)是什么樣啊？）
<view wx:for="{{array}}">
{{index}}：{{item.message}}
</view>Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})顯示結(jié)果：
不使用默認(rèn)可以使用 wx:for-item 可以指定當(dāng)前元素的變量名，使用 wx:for-index 可以指定當(dāng)前下標(biāo)的變量名：
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>輸出結(jié)果一樣。
block wx:for類似block wx:if，也可以將wx:for用在 標(biāo)簽上，重復(fù)渲染多組件塊。例如：
<block wx:for="{{['a', 'b', 'c']}}">
<view> {{index}}：{{item}}</view>
</block>顯示結(jié)果：
（小安娜：突然有種想打你的沖動(dòng)，又是重點(diǎn)又可以跳過，下課操場(chǎng)見?。。。?/i>，冷靜、冷靜，官方文檔我看到這時(shí)，也是沒理解這是什么意思，后來就跳過這段了，但是也完成了B站的首頁，（小安娜：哈~，原來是自己傻看不懂，別把我們的智商和你比好吧?。?/i>，當(dāng)寫到這時(shí)再去多看了一遍（小安娜：絕對(duì)不止一遍），把官方例子運(yùn)行調(diào)試之后，才發(fā)現(xiàn)微信官方設(shè)計(jì)wx:key的用意，而且是很重要的重點(diǎn)。
如果列表中的項(xiàng)目位置會(huì)改變或者有新的項(xiàng)目添加到列表中，為了項(xiàng)目保持自己的屬性和狀態(tài)（如 的輸入內(nèi)容， 的選中狀態(tài)），需要使用wx:key來指定列表中項(xiàng)目的唯一的標(biāo)識(shí)符。
wx:key的值以兩種形式提供：
- 字符串；代表在for循環(huán)的array中item的某個(gè)屬性，該屬性的值是列表中唯一的字符串或數(shù)字，并且不能動(dòng)態(tài)改變。
- 保留關(guān)鍵字；*this 代表在for循環(huán)中的item本身，這種需要item本身是唯一的字符串或者數(shù)字。
是不是完全理解不了什么意思？（小安娜：我覺得這不是重點(diǎn)，重點(diǎn)是案例你還沒講）
案例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是什么意思呢？），這個(gè)是用來綁定事件的，bindtap是當(dāng)用戶點(diǎn)擊的時(shí)候會(huì)執(zhí)行相對(duì)于的函數(shù)，這個(gè)馬上會(huì)在事件中詳細(xì)講解。
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'},
]
},
// 隨機(jī)改變列表項(xiàng)目順序
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
})
},
// 添加項(xiàng)目到最前面
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
})
}
})（小安娜：天了嚕，一大波代碼來襲，看不懂了啦），所有函數(shù)真可以不用看懂內(nèi)部實(shí)現(xiàn)，只需知道干什么用就行（內(nèi)心的杰爾夫君：其實(shí)我知道只有她看不懂，大家照顧照顧她，假裝看不懂）（小安娜：阿丘~誰在說我壞話?。?/i>。
顯示結(jié)果（①：初始化狀態(tài)；②：打開項(xiàng)目2的開關(guān)；③：改變順序后項(xiàng)目2依然是打開狀態(tài)；④：在最前面添加項(xiàng)目6，項(xiàng)目2依然是打開狀態(tài)），這就是wx:key的作用，它會(huì)利用一個(gè)唯一值保留該項(xiàng)狀態(tài)：
*案例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]
},
// 添加項(xiàng)目到前面
addNumberToFront: function(e){
this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)
this.setData({
numberArray: this.data.numberArray
})
}
})顯示結(jié)果：
模板WXML提供模板（template），可以在模板中定義代碼片段，然后在不同的地方調(diào)用。
使用模板- 使用name屬性作為模板的名字。然后在內(nèi)定義代碼片段。
- 使用 is 屬性，聲明需要的使用的模板，然后將模板所需要的 data 傳入。
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
<!-- 這里代表把item對(duì)象傳入模板 -->
<template is="msgItem" data="{{...item}}"/>
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})
顯示結(jié)果：
is 屬性可以使用 Mustache 語法來做邏輯判斷，例如以下根據(jù)條件來選擇使用模板：
<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>
顯示結(jié)果：
恩~~，這里有什么問題嗎？（小安娜：恩~~就是呢，不知道模板可以用在什么地方？），當(dāng)你網(wǎng)站很多地方都用到同一種結(jié)構(gòu)的時(shí)候就可以用了，例如我們要做的B站首頁：
（小安娜：↓↓↓藍(lán)色區(qū)域第二張圖，不謝）
可以看出綠、紅、藍(lán)色區(qū)域的結(jié)構(gòu)都一樣，改變的只是內(nèi)容，這樣的結(jié)構(gòu)就很適合用模板實(shí)現(xiàn)。（小安娜：那其他頁面也有這種結(jié)構(gòu)呢？例如B站的直播頁也有這種結(jié)構(gòu)，順便問一下為什么綠色在最前面XD），像這種需求我們就需要?jiǎng)?chuàng)建單獨(dú)的模板文件，在需要的地方導(dǎo)入模板文件就行，接下來就細(xì)講這個(gè)。
導(dǎo)入模板WXML 提供兩種文件引用方式import和include。
帶作用域的importimport可以導(dǎo)入指定文件的template，例如在item.wxml中定義了一個(gè)叫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'}}"表示構(gòu)造一個(gè)對(duì)象傳入item.wxml中item模板。
（小安娜：顯示結(jié)果是：forbar，對(duì)吧？），沒錯(cuò)啦，厲害了我的小姐姐；還有就是import有一級(jí)作用域的概念，例如：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"/>
顯示結(jié)果：B template；程序這樣寫編譯會(huì)通過，但會(huì)在控制臺(tái)（Console）報(bào)運(yùn)行時(shí)警告（Runtime warn），還請(qǐng)注意。（小安娜：這么大個(gè)坑，那不是debug時(shí)很難找出問題？），是啊，的確很難避免，很容易出錯(cuò)而且找不到問題所在，但顯示結(jié)果又不對(duì)，所以我們開發(fā)的時(shí)候要多注意調(diào)試控制臺(tái)（Console）輸出的錯(cuò)誤和異常信息。（小安娜：開發(fā)果然是個(gè)細(xì)心活，同志們一起加油啦）。
頭部和底部的includeinclude可以將目標(biāo)文件除了的整個(gè)代碼引入，相當(dāng)于是拷貝到的位置，比較常用于程序的頭部（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"
}
})
顯示結(jié)果：
（小安娜：發(fā)現(xiàn)了，它可以直接使用index.js的數(shù)據(jù)），沒錯(cuò)，所以這種更適合頭部和底部數(shù)據(jù)不會(huì)隨著頁面不同而改變，而import更適合定義內(nèi)容中模板，因?yàn)槊總€(gè)頁面的數(shù)據(jù)結(jié)構(gòu)體是會(huì)不一樣的，例如首頁的數(shù)據(jù)結(jié)構(gòu)可能是：{channels:[music:[],dance:[],live:[]]}，而在直播頁面中的數(shù)據(jù)結(jié)構(gòu)可能是：{lives:[]}，2個(gè)頁面數(shù)據(jù)結(jié)構(gòu)不同，這時(shí)候可以用import把數(shù)據(jù)重新構(gòu)造傳入給模板。（小安娜：懵懵懂懂好像明白了），沒關(guān)系，后面我們實(shí)戰(zhàn)時(shí)就會(huì)徹底明白了。（小安娜：期待期待~）
事件事件是視圖層（wxml）到邏輯層（js）的通訊方式，可以綁定在組件上，當(dāng)觸發(fā)事件，就會(huì)執(zhí)行邏輯層中對(duì)應(yīng)的事件處理函數(shù)。
事件分類[td]| 類型 | 觸發(fā)條件 |
| touchstart | 手指觸摸動(dòng)作開始 |
| touchmove | 手指觸摸后移動(dòng) |
| touchcancel | 手指觸摸動(dòng)作被打斷，如來電提醒，彈窗 |
| touchend | 手指觸摸動(dòng)作結(jié)束 |
| tap | 手指觸摸后馬上離開 |
| longtap | 手指觸摸后，超過350ms再離開 |
綁定事件格式為：bind + 事件類型（例如：bindtap），我們先來看事件類型的執(zhí)行順序：
<!-- index.wxml -->
<button
bindtouchstart="ontouchstart"
bindtouchmove="ontouchmove"
bindtouchend="ontouchend"
bindtap="ontap"
bindlongtap="onlongtap">點(diǎn)擊我<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" );
}
})
當(dāng)點(diǎn)擊（<=350ms）的時(shí)候，執(zhí)行順序：
- touchstart
- touchend
- tap
當(dāng)長按（>350ms）的時(shí)候，執(zhí)行順序：
- touchstart
- longtap
- touchend
- tap
我們發(fā)現(xiàn)點(diǎn)擊是我們想象中的那樣，但是長按執(zhí)行一次longtap還會(huì)在執(zhí)行一次tap事件，（小安娜：那這就比較坑了，我很喜歡長按一些頭像按鈕，因?yàn)闀?huì)有快捷操作菜單），是啊，我知道長按這個(gè)操作在Android是很常用的設(shè)計(jì)，所以我們?cè)谛〕绦蚶锩姹M量避免設(shè)計(jì)某個(gè)組件有長按又有點(diǎn)擊事件。（小安娜：因?yàn)檫@個(gè)操作太好用了，沒有解決辦法嗎？），可以在data里面設(shè)置一個(gè)判斷長按的變量，當(dāng)touchstart的時(shí)候設(shè)置此變量為false，當(dāng)執(zhí)行l(wèi)ongtap事件的時(shí)候設(shè)置變量為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，運(yùn)行了下完美解決）
像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" );
}
})
這是一個(gè)常用的結(jié)構(gòu)，一個(gè)大的層包含內(nèi)部很多小層，小層內(nèi)部有個(gè)操作按鈕，當(dāng)我們點(diǎn)擊操作按鈕：
- handleTap3
- handleTap2
- handleTap1
發(fā)現(xiàn)所有父組件的點(diǎn)擊事件都執(zhí)行了，這就是冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件會(huì)向父節(jié)點(diǎn)傳遞。非冒泡事件就是不會(huì)向父節(jié)點(diǎn)傳遞。當(dāng)然這很多時(shí)候不是件好事情，怎么避免呢？
小程序除了提供bind還提供catch綁定事件，格式為：catch + 事件類型，catch事件綁定可以阻止向上冒泡?，F(xiàn)在在button上改用catch試一下：
<view id="outter" bindtap="handleTap1">
<view id="middle" bindtap="handleTap2">
<button id="inner" catchtap="handleTap3">
操作按鈕
</button>
</view>
</view>
輸出結(jié)果：handleTap3，達(dá)到我們的效果了。（小安娜：我覺得把父組件的綁定事件去掉更好）
事件參數(shù)event當(dāng)組件觸發(fā)事件時(shí)，處理函數(shù)會(huì)收到一個(gè)事件對(duì)象參數(shù)。
Page({
handleTap3: function(event) {
console.log( event );
}
})控制臺(tái)輸出的結(jié)果：
{
// 代表事件的類型
"type": "tap",
// 頁面打開到觸發(fā)事件所經(jīng)過的毫秒數(shù)
"timeStamp": 2239,
// 觸發(fā)事件的源組件
"target": {
// 事件源組件的id
"id": "inner",
// 距離左方或上層控件的位置（官方文檔未說明）
"offsetLeft": 0,
// 距離上方或上層控件的位置（官方文檔未說明）
"offsetTop": 0,
// 事件源組件上由data-開頭的自定義屬性組成的集合
"dataset": {}
},
// 事件綁定的當(dāng)前組件，數(shù)據(jù)格式同 target
"currentTarget": {
"id": "inner",
"offsetLeft": 0,
"offsetTop": 0,
"dataset": {}
},
// 額外的數(shù)據(jù)信息
"detail": {
"x": 280,
"y": 18
},
// touches 是一個(gè)數(shù)組，每個(gè)元素為一個(gè) Touch 對(duì)象（canvas 觸摸事件中攜帶的 touches 是 CanvasTouch 數(shù)組）。 表示當(dāng)前停留在屏幕上的觸摸點(diǎn)。
"touches": [
{
// 觸摸點(diǎn)的標(biāo)識(shí)符
"identifier": 0,
// 距離文檔左上角的距離，文檔的左上角為原點(diǎn) ，橫向?yàn)閄軸
"pageX": 280,
// 距離文檔左上角的距離，文檔的左上角為原點(diǎn) ，縱向?yàn)閅軸
"pageY": 18,
// 距離頁面可顯示區(qū)域（屏幕除去導(dǎo)航條）左上角距離，橫向?yàn)閄軸
"clientX": 280,
// 距離頁面可顯示區(qū)域（屏幕除去導(dǎo)航條）左上角距離，縱向?yàn)閅軸
"clientY": 18
}
],
// changedTouches 數(shù)據(jù)格式同 touches。 表示有變化的觸摸點(diǎn)，如從無變有（touchstart），位置變化（touchmove），從有變無（touchend、touchcancel）。
"changedTouches": [
{
"identifier": 0,
"pageX": 280,
"pageY": 18,
"clientX": 280,
"clientY": 18
}
]
}每個(gè)參數(shù)具體什么意思，我們放在以后B站項(xiàng)目中去講解，（小安娜：噗~，我好多問題準(zhǔn)備問了，現(xiàn)在又憋回去了，聽你講東西真心累），畢竟太多了，每個(gè)都講到估計(jì)可以寫幾篇文章了，用到什么再回頭來看看，然后再配合案例這樣最容易理解了。（小安娜：好像也是，總感覺哪里不對(duì)，等等...要是你不用到呢），這個(gè)保證不會(huì)，因?yàn)橛形覀兂Ｓ玫膁ataset，經(jīng)常會(huì)為組件自定義一些參數(shù)。（小安娜：姑且相信你）
WXSS- WXSS(WeiXin Style Sheets)是一套樣式語言，用于描述 WXML 的組件樣式。
- 用來決定 WXML 的組件應(yīng)該怎么顯示。
- 具有 CSS 大部分特性。
- 定義在 app.wxss 中的樣式為全局樣式，可用于任何Page。在 Page 里的 wxss 文件中定義的樣式為局部樣式，只作用在當(dāng)前頁面，并會(huì)覆蓋 app.wxss 中相同的選擇器。
與 CSS 相比增加的特性有：
- 尺寸單位
- 樣式導(dǎo)入
rpx（responsive pixel）: 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。（小安娜：真啰嗦，也就是1px = 2rpx嘛）
[td]| 設(shè)備 | 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 |
所以：我們?cè)O(shè)計(jì)/開發(fā)微信小程序時(shí)都應(yīng)該用 iPhone6s 作為視覺稿的標(biāo)準(zhǔn)。（小安娜：所以，看你教程是不是有福利，會(huì)給我們發(fā)iPhone 6s嗎？）
樣式導(dǎo)入使用@import語句導(dǎo)入外聯(lián)樣式表，@import后跟樣式表的相對(duì)路徑。
/* 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中導(dǎo)入了common.wxss樣式文件，顯示結(jié)果：
（小安娜：你怎么？不過用加多寶泡泡面還真挺好吃。喂，快說正事啦，我發(fā)現(xiàn)你使用了行內(nèi)樣式style="color:#e64340;"），wxss也支持行內(nèi)樣式，不過盡量避免將靜態(tài)的樣式寫入style中，以免影響渲染速度，靜態(tài)樣式都應(yīng)該寫在wxss文件中。
目前支持的選擇器[td]| 選擇器 | 樣例 | 樣例描述 |
| .class | .intro | 選擇所有擁有 class="intro" 的組件 |
| #id | #firstname | 選擇擁有 id="firstname" 的組件 |
| element | view | 選擇所有 view 組件 |
| element, element | view,.header | checkbox 選擇所有文檔的 view 組件和所有的 checkbox 組件 |
| ::after | view::after | 在 view 組件后邊插入內(nèi)容 |
| ::before | view::before | 在 view 組件前邊插入內(nèi)容 |
注意：結(jié)果筆者開發(fā)試驗(yàn)，暫時(shí)還不支持*選擇器（所有元素），例如我們經(jīng)常會(huì)設(shè)置所有組件的box-sizing屬性來改變測(cè)量寬度的起點(diǎn)邊界，從而使規(guī)定寬度包括邊框和填充：
* {
box-sizing: border-box;
}使用之后會(huì)發(fā)現(xiàn)所有wxss文件中的樣式都無效了。（小安娜：那可以怎么解決呢，難道給每個(gè)組件都設(shè)置一次？），小哥哥不才，目前還真是每個(gè)組件都設(shè)置一次，或者這問題官方會(huì)很快解決。（小安娜：也是，還是官方靠譜點(diǎn)。）
記得官方文檔了解到這，基礎(chǔ)知識(shí)終于告一段落了，下一篇開始實(shí)戰(zhàn)，開發(fā)時(shí)更多組件知識(shí)請(qǐng)參考官方文檔。
- 開發(fā)工具介紹和下載：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html
- 注冊(cè)流程：https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html
- 開發(fā)組件：https://mp.weixin.qq.com/debug/wxadoc/dev/component/
- 開發(fā)API：https://mp.weixin.qq.com/debug/wxadoc/dev/api/
- 問題交流：QQ群：301926812（非官方）
寫了這么多口好干，我需要倒杯水喝，等等我。（小安娜：去吧去吧），「滴答、滴答，過去5分鐘...10分鐘...」（小安娜：喂喂，10分鐘了，你是喝一桶水嗎？），（遠(yuǎn)處的聲音：quatary kill！WO CAO，要超神了），（小安娜：我去，喝個(gè)水時(shí)間去開黑了，快滾回來，馬上到我的提問環(huán)節(jié)了?。?/i>，都怪你了，一開始就說什么ap、ad、adc，搞的我熱血沸騰的，馬上來了。
小安娜有問題WXML是什么？杰爾夫君：WXML（WeiXin Markup Language）是一套標(biāo)簽語言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁面的結(jié)構(gòu)。和HTML相似。
WXML組件怎么綁定數(shù)據(jù)？杰爾夫君：WXML中的動(dòng)態(tài)數(shù)據(jù)均來自對(duì)應(yīng) Page 的 data。數(shù)據(jù)綁定使用 Mustache 語法（雙大括號(hào)）將變量包起來。例如：
Page({
data: {
message: 'Hello MINA!'
}
})
<!-- 綁定Page中的data.message -->
<view> {{ message }} </view>什么是Mustache？
杰爾夫君：Mustache 是一個(gè) logic-less （輕邏輯）模板解析引擎。在小程序里主要關(guān)注小程序的語法。
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>如果想一次性判斷多個(gè)組件標(biāo)簽，我們可以使用一個(gè) 標(biāo)簽將多個(gè)組件包裝起來：
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>WXML怎么循環(huán)列表？
杰爾夫君：在組件上使用wx:for屬性綁定一個(gè)數(shù)組，即可使用數(shù)組中的數(shù)據(jù)重復(fù)渲染該組件，默認(rèn)當(dāng)前的下標(biāo)變量名為index，當(dāng)前項(xiàng)的變量名為item。用wx:for-index指定當(dāng)前下標(biāo)的變量名，用wx:for-item指定當(dāng)前元素的變量名；
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>等等，怎么感覺你從頭到尾都有問題啊，感覺沒學(xué)過一樣？（小安娜：沒辦法啦，這次講太多了，本小姐記憶不太好，都不記得學(xué)了什么），好吧好吧，也正好總結(jié)一下，繼續(xù)你的問題。（小安娜：你別打斷?。。?/i>
WXML怎么使用模板？杰爾夫君：用定義模板，指定name屬性為模板的名字，用is屬性指定使用模板的名稱，然后將模板所需要的data傳入，如：
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
<!-- 參數(shù)傳入Page中的data.item -->
<template is="msgItem" data="{{...item}}"/>
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})
也可以把模板定義在單獨(dú)文件中，通過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區(qū)別是：import有一層作用域概念，即C import B，B import A，在C中可以使用B的template，在B中可以使用A的template，但是C不能使用A定義的template。而include相當(dāng)于是拷貝，使用原頁面數(shù)據(jù)。
WXML中怎么使用事件？杰爾夫君：使用bind或catch開頭，然后跟上事件的類型（如：bindtap, catchtouchstart），bind事件綁定會(huì)發(fā)生事件冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。
什么是WXSS？杰爾夫君：WXSS(WeiXin Style Sheets)是一套樣式語言，用于描述 WXML 的組件樣式。WXSS 具有 CSS 大部分特性。 同時(shí)為了更適合開發(fā)微信小程序，對(duì) CSS 進(jìn)行了擴(kuò)充以及修改了：尺寸單位、樣式導(dǎo)入。
尺寸單位rpx（responsive pixel）: 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。以iPhone6為例：1rpx = 0.5px，1px = 2rpx。
樣式導(dǎo)入使用@import語句導(dǎo)入外部樣式，@import后跟外部樣式文件的相對(duì)路徑。
@import "common.wxss";
.middle-p {
padding:15px;
}
愛盈利（aiyingli.com）移動(dòng)互聯(lián)網(wǎng)最具影響力的盈利指導(dǎo)網(wǎng)站。定位于服務(wù)移動(dòng)互聯(lián)網(wǎng)創(chuàng)業(yè)者，移動(dòng)盈利指導(dǎo)。我們的目標(biāo)是讓盈利目標(biāo)清晰可見！降低門檻，讓缺乏經(jīng)驗(yàn)、資金有限的個(gè)人和團(tuán)隊(duì)獲得經(jīng)驗(yàn)和機(jī)會(huì)，提高熱情，激發(fā)產(chǎn)品。
