導(dǎo)航路線

關(guān)于微信小程序知識點一共做了六個博客,涵蓋大部分內(nèi)容,有想學(xué)習(xí)的可以按照以下順序查看
1.微信小程序的啟動和渲染過程(加組件分類和組件的基本使用以及API分類)
2.微信小程序wxml的數(shù)據(jù)和事件的綁定,以及條件和列表的渲染
3.微信小程序wxss相關(guān)介紹、全局配置和tabbar知識以及發(fā)送網(wǎng)絡(luò)數(shù)據(jù)請求(post,get)
4.微信小程序頁面導(dǎo)航、編程式導(dǎo)航、頁面事件、生命周期和WXS腳本
5.微信小程序自定義組件、組件的生命周期和組件通信(插槽)
6.微信小程序使用npm包、全局數(shù)據(jù)共享和分包

1.數(shù)據(jù)綁定的基本原則

1. 在data中定義數(shù)據(jù)
2. 在wxml中使用數(shù)據(jù)

在data中定義頁面的數(shù)據(jù)

在頁面對應(yīng)的.js文件中,把數(shù)據(jù)定義到data對象中即可

Page({
	data:{
		//字符串類型的數(shù)據(jù)
		info:'init data',
		//數(shù)組類型的數(shù)據(jù)
		msgList:[{msg:'hello'},{msg:'world'}]
	}
})

Mustache語法的格式
把data中的數(shù)據(jù)綁定到頁面中渲染，使用Mustache語法（雙大括號）將變量包起來即可。語法格式為:

<view> {{要綁定的數(shù)據(jù)名稱}} </view>

Mustache語法的應(yīng)用場景

• 綁定內(nèi)容
• 綁定屬性(如圖片的src屬性)
• 運算(三元運算,算術(shù)運算等)

綁定屬性案例

Page({
	data:{
		info:'https://xiaoji.img',
	}
})

<image src="{{info}}"></image>

三元運算案例

Page({
	data:{
		randomNum:Math.random() * 10, //生成10以內(nèi)的隨機數(shù)
	}
})

<view>{{ randomNumber >=5 ? '隨機數(shù)大于五' : '隨機數(shù)小于五'}}</view>

2.事件綁定

事件的概念:
事件是渲染層到邏輯層的通訊方式。通過事件可以將用戶在渲染層產(chǎn)生的行為，反饋到邏輯層進行業(yè)務(wù)的處理。
小程序中常用的事件

事件對象的屬性列表
當(dāng)事件回調(diào)觸發(fā)的時候,會收到一個事件對象event,它的詳細屬性如下表所示:

上面加粗的可以重點關(guān)注一下
target和currentTarget的區(qū)別:
target是觸發(fā)該事件的源頭組件，而currentTarget則是當(dāng)前事件所綁定的組件(類似html的事件委托,currentTarget為父組件,target就是子組件,子組件向外冒泡到父組件身上,父組件身上綁定了事件,此時這個事件的e.target就是內(nèi)部子組件,e.currentTarget就是當(dāng)前的綁事件的父組件)

bingtap的語法格式:

在小程序中,不存在html中的onclick鼠標(biāo)點擊事件,而是通過tap事件來響應(yīng)用戶的觸摸行為.

1. 通過bingtap,可以為組件綁定tap觸摸事件,語法如下:

<button type='primary' bindtap='btnTapHandler'>打印事件對象</button>

2. 在頁面的.js文件中定義對應(yīng)的事件處理函數(shù),事件參數(shù)通過形參event(一般簡寫成e),來接收:

Page({
	btnTapHandler(e){
		//上面按鈕的tap事件處理函數(shù)
		console.log(e) //事件參數(shù)對象 e
	}
})

在事件處理函數(shù)中為data中的數(shù)據(jù)賦值

通過調(diào)用this.setData(dataObject)方法,可以給頁面data中的數(shù)據(jù)重新賦值,示例如下:

//頁面中的.js文件
Page({
	data:{
		count:0
	},
	//修改count的值
	changeCount(){
		this.setData({
			count:this.data.count+1
		})
	}
})

<button type='primary' bindtap='changeCount'>+1</button>

事件傳參

小程序中的事件比較特殊,不能在綁定事件的同時為事件處理函數(shù)傳遞參數(shù),例如,下面代碼將不能正常工作:

<button type=""primary bindtap='btnHandler(123)'>事件傳參</button>

因為小程序會把 bindtap的屬性值，統(tǒng)一當(dāng)作事件名稱來處理，相當(dāng)于要調(diào)用一個名稱為 btnHandler(123)的事件處理函數(shù)。

可以為組件提供data-自定義屬性傳參，其中代表的是參數(shù)的名字，示例代碼如下(里面的{{}}不能省略,不然得到的參數(shù)就是一個普通的字符串了):

<button type=""primary bindtap='btnHandler' data-info="{{234}}">事件傳參</button>

最終:

• info會被解析為參數(shù)的名字
• 數(shù)值⒉會被解析為參數(shù)的值

獲取參數(shù)值
在事件處理函數(shù)中，通過event.target.dataset.參數(shù)名即可獲取到具體參數(shù)的值,
示例代碼如下:

btnHandler(event){
	//dataset 是一個對象,包含了所有通過data-* 傳遞過來的參數(shù)項
	console.log(event.target.dataset)
	//通過dataset 可以訪問到具體的值
	console.log(event.target.dataset.info)
}

bindinput的語法格式

在小程序中,通過input事件來響應(yīng)文本框的輸入事件,語法格式如下:

1. 通過binginput,可以為文本框綁定輸入事件

<input bindinput="inputHandler"></input>

2. 在頁面的.js文件中,定義事件處理函數(shù)

inputHandler(e){
	//e.detail.value 是變化過后,文本框最新的值
	console.log(e.detail.value)
}

實現(xiàn)文本框和data之間的數(shù)據(jù)同步

實現(xiàn)步驟:

1. 定義數(shù)據(jù)
2. 渲染結(jié)構(gòu)
3. 美化樣式
4. 綁定input事件處理函數(shù)

1.定義數(shù)據(jù)

Page({
	data:{
		msg:'你好'
	}
})

2.渲染結(jié)構(gòu)

<input value="{{msg}}" bindinput="inputHandler"></input>

3.美化樣式

input{
	border:1px solid #eee;
	padding:5px;
	margin:5px;
	border-radius:3px;
}

4.綁定input事件處理函數(shù)

inputHandler(e){
	//e.detail.value 是變化過后,文本框最新的值
	//console.log(e.detail.value)
	this.setData({
		msg:e.detail.value
	})
}

3.條件渲染

在小程序中，使用wx:if="{{condition}}”來判斷是否需要渲染該代碼塊:

<view wx:if="condition">True</input>

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

<view wx:if="{{type===1}}">男</input>
<input wx:elif="{{type===2}}">女</input>
<view wx:else>保密</view>

結(jié)合block使用wx:if

如果要一次性控制多個組件的展示與隱藏,可以使用一個< block> < /block>標(biāo)簽將多個組件包裝起來,并在< block>標(biāo)簽上使用wx:if控制屬性,示例如下:

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

注意:< block>并不是一個組件,它只是一個包裹性質(zhì)的容器,不會在頁面中做任何渲染(也可以使用其他的塊包裹,但是其他的塊會被渲染到頁面上)

hidden

在小程序中,直接使用hidden="{{condition}}"也能控制元素的顯示與隱藏

<view hidden="{{condition}}"> 條件為true隱藏,false顯示 </view>

wx:if與hidden的對比

1. 運行方式不同
   • wx:if以動態(tài)創(chuàng)建和移除元素的方式,控制元素的顯示和隱藏
   • hidden以切換樣式的方式(display:none/block),控制元素的顯示與隱藏
2. 使用建議
   • 頻繁切換時,建議使用hidden
   • 控制條件復(fù)雜時,建議使用wx:if搭配wx:elif、wx:else進行展示與隱藏的切換

4.列表渲染

通過wx:for可以根據(jù)指定的數(shù)組,循環(huán)渲染重復(fù)的組件結(jié)構(gòu),語法示例如下:

<view wx:for="{{array}}">
	索引是:{{index}} 當(dāng)前項是:{{item}}
</view>

默認情況下,當(dāng)前循環(huán)項的索引用index表示;當(dāng)前循環(huán)項用item表示

手動指定索引和當(dāng)前項的變量名*(了解即可)

• 使用wx:for-index可以指定當(dāng)前循環(huán)項的索引的變量名
• 使用wx:for-item可以指定當(dāng)前項的變量名

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
	索引是:{{idx}} 當(dāng)前項是:{{itemName}}
</view>

wx:key的使用

類似于Vue列表渲染中的:key，小程序在實現(xiàn)列表渲染時，也建議為渲染出來的列表項指定唯一的 key值,從而提高渲染的效率，示例代碼如下:文章來源地址http://www.zghlxwxcb.cn/news/detail-495560.html

//data 數(shù)據(jù)
data:{
	userlist:[
		{id:1,name:"小紅"},
		{id:2,name:"小黃"},
		{id:3,name:"小白"}
	]
}


//wxml結(jié)構(gòu),wx:key里面不需要Mustache語法,不然報錯
<view wx:for="{{userlist}}" wx:key="id">{{item.name}}</view>

到了這里，關(guān)于微信小程序wxml的數(shù)據(jù)和事件的綁定,以及條件和列表的渲染的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！