1. 數(shù)據(jù)綁定
數(shù)據(jù)綁定的基本原則：在data中定義數(shù)據(jù)，在wxml中使用數(shù)據(jù)
1.1. 在data中定義數(shù)據(jù)
在data中定義數(shù)據(jù)，找到頁面對應的.js文件，然后把數(shù)據(jù)定義到data中即可。
pages/list/list.js
// pages/list/list.js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
// 字符串類型的數(shù)據(jù)、
info:'init data',
// 數(shù)組類型的數(shù)據(jù)
msgList:[{msg:'hello'},{msg:'world'}],
numberA:Math.random()*10,
ImageSrc:'./kl.jpg'
},
//.....
})
1.2. 在wxml中渲染數(shù)據(jù) （mustache語法）
mustache語法，插值表達式
將data中的數(shù)據(jù)綁定到頁面中渲染，使用mustache語法即雙大括號{{}}將變量包起來即可。
{{要綁定的數(shù)據(jù)名稱}}
mustache語法可以動態(tài)的綁定內(nèi)容和屬性，例如：
<!-- 將當前頁面的.js文件中的data中的info屬性取出來 -->
<view>{{info}}</view>
<!-- 將當前頁面中的.js文件中的data中的ImageSrc屬性取出來-->
<image src="{{ImageSrc}}"></image>
mustache語法，還可以做一些基礎的運算加減乘除，以及三元表達式
<view>{{3+2}}</view>
<view>{{3-2}}</view>
<view>{{3*2}}</view>
<view>{{3/2}}</view>
<view>{{3>2 ? '3大于2' : '3小于2'}}</view>
<view>{{numberA}}</view>
<view>{{numberA>5 ? '大于5' : '小于5'}}</view>
2. 事件綁定
2.1. 事件
事件即從渲染層到邏輯層的通信方式。通俗的說就是你在前臺頁面做了什么，需要觸發(fā)哪些行為。
2.2. 常用的事件
| 類型 | 綁定方式 | 事件描述 |
|---|---|---|
| tap | bindtap 或 bind:tap | 手指觸摸后馬上離開，類似HTML中的click事件 |
| input | bindinput 或 bind:input | 文本框的輸入事件 |
| change | bindchange 或 bind:change | 狀態(tài)改變時觸發(fā) |
2.3. 事件對象的屬性列表
當事件回調(diào)觸發(fā)時，會收到一個事件對象event
list.wxml
<view>
<!-- 為button按鈕綁定一個tap事件，且事件名叫btnTapHandler -->
<button type="primary" bindtap="btnTapHandler"></button>
</view>
list.js
// pages/list/list.js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
//......
},
// 綁定的事件函數(shù) 且將event對象傳入，并且在控制臺打印輸出
btnTapHandler(e){
console.log(e)
},
})
控制臺輸出：
屬性列表如下：
| 屬性 | 類型 | 說明 |
|---|---|---|
| tyre | String | 事件類型 |
| timeStamp | Integer | 頁面打開到觸發(fā)事件所經(jīng)過的毫秒數(shù) |
| target | Object | 觸發(fā)事件的組件的一些屬性值集合 |
| currentTarget | Object | 當前組件的一些屬性值集合 |
| detail | Object | 額外的信息 |
| touches | Array | 觸摸事件，當前停留在屏幕中的觸摸點信息的數(shù)組 |
| changedTouches | Array | 觸摸事件，當前變化的觸摸點信息的數(shù)組 |
2.4. target 和 currentTarget的區(qū)別
target 是觸發(fā)該事件的源頭組件，curretTarget是當前事件綁定的組件。
例如下面的例子：
list.wxml
<view style="background-color:lightgreen;" bindtap="outerHandler">
<button type="primary">按鈕</button>
<text>文字</text>
</view>
list.js
// pages/list/list.js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
//......
},
// 綁定的事件函數(shù) 且將event對象傳入，并且在控制臺打印輸出
outerHandler(e){
console.dir(e.target)
console.dir(e.currentTarget)
},
})
-
當我們嘗試點擊（觸摸按鈕時），會輸出下面的內(nèi)容
-
我們觸摸text組件時，會輸出下面的內(nèi)容
-
觸摸view組件時，輸出下面的內(nèi)容
對比得出，e.target就是你觸摸的組件，e.currentTarget就是你當前事件綁定的組件(view)
點擊內(nèi)部的按鈕時，點擊事件以冒泡的方式向外擴散，也會觸發(fā)外層view的tap事件處理函數(shù)。
3. 事件傳參與數(shù)據(jù)綁定
事件傳參與數(shù)據(jù)綁定幾乎和vue差不多
3.1. 在事件處理函數(shù)中給data中的數(shù)據(jù)賦值
例如：點擊一個按鈕，將data中的某個數(shù)值加一，同時頁面中的數(shù)據(jù)也通過插值表達式動態(tài)渲染出來并且實時變化。
list.wxml
<view>
<text style="text-align: center;margin-left: 100px;">{{count}}</text>
<button bindtap="countAdd" type="primary">點我+1</button>
</view>
list.js
// pages/list/list.js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
count:0
},
countAdd(){
this.setData({count:this.data.count+1})
},
//....
)}
3.2. 事件傳參（通過自定義屬性的方式）
在微信小程序綁定事件時，綁定的是事件名，所以無法通過綁定事件時傳遞參數(shù)，但是可以通過自定義屬性來傳遞參數(shù) data-* 的方式
錯誤的事件傳參：
<button bindtap="btnTapHandler(123)">點我傳遞參數(shù)</button>
上面的這種寫法，會讓微信小程序誤以為 “btnTapHander(123)” 是一個函數(shù)名，從而去該頁面所在的.js文件中查找是否存在 名為 “btnTapHander(123)” 的函數(shù)。
正確的事件傳參：
<!-- data-* *是data中存在的數(shù)據(jù)名 {{123}} 將被解析為數(shù)字123，即參數(shù)的值 -->
<button bindtap="btnTapHandler" data-number="{{123}}">點我傳遞參數(shù)</button>
3.3. 獲取事件傳遞的參數(shù)值
在事件處理函數(shù)中，通過event.target.dataset.參數(shù)名即可獲取具體的參數(shù)值。
例如，獲取上面的按鈕傳遞過來名為number的參數(shù)值
btnTapHandler(e){
// e 為事件對象
// dataset 也是一個對象，包含了所有通過data-* 傳遞過來的參數(shù)
console.log(e.target.dataset)
// 獲取自定義屬性number的值
console.log(e.target.dataset.number)
}
3.4. 文本框與data之間的數(shù)據(jù)同步
3.4.1. input輸入框事件及獲取即時的輸入框數(shù)據(jù)
input 輸入框 的事件可以通過bindinput來綁定，然后數(shù)據(jù)獲取則通過函數(shù)回調(diào)event對象，再通過event.detail.value來獲取輸入框即時的數(shù)據(jù)。
事件綁定 (list.wxml)
<view>
<!-- 注意事件名別和內(nèi)置的函數(shù)名重名 -->
<input bindinput="inputHandlerA"/>
</view>
數(shù)據(jù)獲取 (list.js)
inputHandlerA(e){
console.log(e.detail.value)
}
3.4.2. 文本框與data數(shù)據(jù)同步的小demo
例子：input輸入框輸入數(shù)據(jù)，頁面同時刷新，輸入框也刷新
- 定義數(shù)據(jù) (list.js)
Page({
data: {
msg:'你好！'
},
})
- 渲染結(jié)構(gòu) (list.wxml)
<view>
<text>{{msg}}</text>
<input value="{{msg}}" bindinput="inputHandlerA"/>
</view>
- 美化樣式 (list.wxss)
/* pages/list/list.wxss */
input{
border: 1px solid #eee;
padding: 5px;
margin: 5px;
border-radius: 3px;
}
text{
padding: 5px;
margin: 5px;
border-radius: 3px;
}
- 綁定input事件處理函數(shù) (list.js)
inputHandlerA(e){
this.setData({
msg:e.detail.value
})
},
默認效果：
嘗試輸入或者刪除重新輸入的效果:
文章來源：http://www.zghlxwxcb.cn/news/detail-545312.html
效果驗證，數(shù)據(jù)同步即時刷新文章來源地址http://www.zghlxwxcb.cn/news/detail-545312.html
到了這里，關于微信小程序?qū)W習之數(shù)據(jù)綁定，事件綁定，事件傳參與數(shù)據(jù)同步的學習記錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
