1.事件綁定和事件對象

小程序中綁定事件沒有on 方式，也沒有click,小程序中可以用bind方法，click事件也需要用tap事件來進行代替。
綁定事件分為兩種：

1. bind:事件名，eg:

<view bind:tap="fnName"><view/>

2. bind事件名，eg:

<view bindtap="fnName"><view/>

事件處理函數需要寫到.js文件中，在.js文件中需要調用小程序提供的Page方法來注冊小程序的頁面，可以直接在Page方法中創建事件處理函數。

type的三個屬性可以改變按鈕的樣式：

1. primary 綠色底按鈕
<button type="primary">綁定事件</button>
2. warn紅色按鈕
<button type="warn">綁定事件</button>
3. default綠色字按鈕
<button type="default">綁定事件</button>小按鈕
<button type="primary" size="mini">綁定事件</button>

在小程序中，input輸入框默認沒有邊框，需要自己添加樣式

wxml頁面
<input type="text" bindinput="getInputVal"/>
Page頁面
getInputVal (event) {console.log(event);}
getInputVal (event) {console.log(event.detail.value);

2.事件的分類和組織事件冒泡

事件分為冒泡事件和非冒泡事件
冒泡事件：一個組件的事件被觸發后，該事件會向父節點傳遞

<view class="catch" bind:tap="parentHandler"><button bind:tap="btnHandler">按鈕</button>
</view>

非冒泡事件：一個組件的事件被觸發后，該事件不會向父節點傳遞

<view class="catch" bind:tap="parentHandler">
<button catch:tap="btnHandler">按鈕</button>
</view>

使用bind綁定的事件，會觸發事件冒泡，如果想阻止，可以用catch來綁定事件。

3.事件傳參-data-*自定義數據

事件傳參：在觸發事件時，將一些數據作為參數傳遞給事件處理函數的過程就是。
在組件上通過data-*的方式定義需要傳遞的數據，*是自定義的數據

<view data-id="100" bindtap="handler"/>

然后通過事件對象進行獲取自定義數據

<button bind:tap="btnHandler" data-id="1" data-name="tom">按鈕</button>
//currentTarget事件綁定者，即那個組件綁定了當前事件處理函數
//target事件觸發者，即那個組件觸發了當前事件處理函數
//currentTarget和target都是按鈕，因為是按鈕綁定的事件處理函數，同時觸發，用誰獲取數據都行btnHandler (event) {console.log(event.currentTarget.dataset.id);console.log(event.target.dataset.name);},

<view bind:tap="parentHandler" data-ppid="1" data-ppname="tom"><button data-id="1" data-name="tom">按鈕</button>
</view>
//currentTarget事件綁定者:view
//target事件觸發者:button
//想要獲取view的數據用currentTarget，想要獲取button的數據用target
parentHandler (event) {console.log(event);}

4.事件傳參-mark自定義數據

mark用于識別具體觸發事件的target節點，還可以承載一些自定義數據。

<view mark:id="100" bindtap="handler"/>

<view bind:tap="parentHandler" mark:ppid="1" mark:ppname="tom"><button mark:id="1" mark:name="tom">按鈕</button>
</view>
//可以獲取到觸發事件的節點和父節點上所有的mark數據
parentHandler (event) {console.log(event);}

5.wxml語法-聲明和綁定數據

小程序頁面中使用的數據要在Page()方法的data對象中聲明定義
數據聲明好后，在WXML使用Mustache語法（{{}}）將變量包起來，從而將數據綁定
在{{ }}內部可以做一些簡單的運算，如：算數運算、三元運算、邏輯判斷
在{{ }}語法中，只能寫表達式，不能寫語句，也不能調用js相關的方法。

<view>{{ school }} </view>
<view>{{ obj.name }} </view><!-- 綁定屬性值 ,要動態綁定一個變量時，屬性值要用雙大括號包裹-->
<view id="{{id}} ">綁定屬性值</view>
<!-- 如果屬性值是布爾值，也要用雙大括號包裹 -->
<checkbox value="{{ isCheck }}"/>

6.setData()修改數據

小程序中修改數據不推薦賦值，賦值無法改變頁面數據
要通過setData()進行修改，setData()方法接收對象作為參數，key是需要修改的數據，value是最新的值。
setData()方法有兩個作用：

1. 更新數據
2. 驅動視圖更新

data: {num: 1}, updatenum () {console.log(this.data.num);this.setData({//key:是要更新的數據//value:是最新的值num:this.data.num + 1})}

7.setData()修改對象類型的數據

將key寫成數據路徑的方式a.b.c
‘userInfo.name’: ‘tom’,

<view>{{ userInfo.name }} </view>
<view>{{ userInfo.age }} </view>
<button bind:tap="updateUserInfo">修改對象類型數據</button>updateUserInfo () {// 新增單個或多個屬性//修改同理this.setData({'userInfo.name': 'tom','userInfo.age': '18'})}

優化：用ES6提供的展開運算符或者 Object.assign()

ES6提供的展開運算符const userInfo = {...this.data.userInfo,name: 'jerry',age: 10},this.setData({userInfo})  

Object.assign()方法
const userInfo = Object.assign(this.data.userInfo, {name: 'jerry'}, { age: 18 })this.setData({userInfo})

刪除對象類型的數據

//刪除單個屬性delete this.data.userInfo.age//此時數據已經更新this.setData({//要驅動視圖更新userInfo: this.data.userInfo})//刪除多個屬性
//用rest剩余參數const { age,test, ...rest } = this.data.userInfothis.setData({userInfo: rest})

8.修改數組類型數據

更改list，新增數組元素

第一種方法
updateList () {this.data.list.push(4)this.setData({list: this.data.list})}第二種方法updateList () {const newList = this.data.list.concat(4)this.setData({list: newList})}第三種方法
updateList () {const newList = [...this.data.list, 4]this.setData({list: newList})}

修改數組元素

this.setData({
//將數組的第一個元素中的name改為jerry'list[0].name': 'jerry'})

刪除數組元素

第一種
this.data.list.splice(1,1)this.setData({list: this.data.list})第二種const newList = this.data.list.filter(item => item !== 2)this.setData({list: newList})

9.建議雙向數據綁定

數據能影響頁面，頁面也能影響數據

<input model:value="{{value}}" />

注意事項：
只能是單一字段綁定，不能拼接
不能寫data路徑，也不支持數組和對象

10.列表渲染-基本使用

指通過循環遍歷一個數組或對象，將其中的每個元素渲染到頁面上。
在組件上用wx:for綁定數組或對象，重復渲染當前組件
每一項的變量名默認為item，下表變量名默認為index
要加上wx:key屬性，一兩種形式提供：

1. 字符串
2. 保留關鍵字*this
   
   注意事項：
   如果不加wx:key會報錯
   在給wx:key加屬性值時，不用雙大括號語法，直接用遍歷的array中item的某個屬性

<view wx:for="{{ fruitList }}" wx:key="id">{{ item.name }} </view><view wx:for="{{ fruitList }}" wx:key="index">{{ item.name }} </view><view wx:for="{{ fruitList }}" wx:key="*this">{{ item.name }} </view>