首页 > 编程学习 > WXML模板语法

WXML模板语法

发布时间:2022/11/6 0:12:28

文章目录

  • 1、数据绑定
    • 1.1 数据绑定的基本原则
    • 1.2在data中定义页面的数据
    • 1.3 Mustache语法的格式
    • 1.4 Mustache语法的应用场景
    • 1.5 算数运算
  • 2、事件绑定
    • 2.1 小程序常用的事件
    • 2.2事件对象的属性列表
    • 2.3 target和currentTarget的区别
    • 2.4 <font color=red>bindtap的语法格式
    • 2.5 在事件处理函数中为data中的数据赋值
    • 2.6 事件传参
    • 2.7 bindinput的语法格式
    • 2.8 实现文本框和data之间的数据同步
  • 3、条件渲染
    • 3.1、wx:if
    • 3.2、结合`<block>`使用wx:if
    • 3.3、在小程序中,直接使用hidden="{{condition}}"也能控制元素的显示与隐藏:
    • 3.4、wx:if 与 hidden的对比
  • 4、列表渲染
    • 4.1 `wx:for`
    • 4.2、*手动指定索引和当前项的变量名
    • 4.3、`wx:key`的使用


1、数据绑定

1.1 数据绑定的基本原则

  • 在data中定义数据
  • 在WXML中使用数据

1.2在data中定义页面的数据

在页面对应的.js文件中,把数据定义到data对象中即可

Page({
	data:{
	//字符串类型的数据
	info:'init data',
	//数组类型的数据
	msgList:[{msg:'hello'},{msg:''world}]
	}
})

1.3 Mustache语法的格式

把data中的数据绑定到页面中渲染,使用Mustache语法(双大括号)将变量包起来即可。

<view>{{要绑定的数据名称}}</view>

1.4 Mustache语法的应用场景

  • 绑定内容
    动态绑定内容
<!--页面数据-->
Page{
	data:{
		info:'init data'
	}
}
<!--页面结构-->
<view>{{ info }}</view>
  • 绑定属性
    动态绑定属性
<!--页面数据-->
Page({
	data:{
		imgSrc:'地址'
	}
})

<!--页面结构-->
<image src="{{imgSrc}}"></image>	
  • 运算(三元运算、算术运算等)
    三元运算
<!--页面数据-->
Page({
	data :{
		randomNum:Math.random()*10
		<!--生成10以内的随机数-->
	}
})
<!--页面结构-->
<view>{{ randomNumber >=15?'随机数大于或等于15':'随机数小于15'}}</view>

1.5 算数运算

<!--页面数据-->
Page({
	data :{
	<!--生成一个带两位小数的随机数-->
		randomNum:Math.random().toFixed(2)
	}
})
<!--页面结构-->
<view>生成100以内的随机数:{{randomNum*100}}</view>

2、事件绑定

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务处理

2.1 小程序常用的事件

类型绑定方式事件描述
tapbindtap或bind:tap手指触摸后马上离开,类似于HTML中的click事件
inputbindinput或bind:input文本框的输入事件
changebindchange或bind:change状态改变时触发

2.2事件对象的属性列表

当事件回调触发的时候,会收到一个事件对象event,

属性类型说明
typeString事件类型
timeStampInteger页面打开到触发事件经过的毫秒数
targetObject触发事件的组件的一些属性值集合
currentTargetObject当前组件的一些属性值集合
detailObject额外的信息
touchesArray触摸事件,当前停留在屏幕中的触摸点信息的数组
changedTouchesArray触摸事件,当前变化的触摸点信息的数组

2.3 target和currentTarget的区别

target是触发该事件的源头组件,而currentTarget则是当前事件所绑定的组件。举例
在这里插入图片描述

点击内部的按钮时,点击事件以冒泡的方式向外扩散,也会触发外层view的tap事件处理函数。
此时,对于外层的view来说:

  • e.target 指向的是触发事件的源头组件,因此,e.target 是内部的按钮组件
  • e.currentTarget 指向的是当前正在触发事件的那个组件,因此,e.currentTarget 是当前的view组件

2.4 bindtap的语法格式

在小程序中,不存在HTML 中的onclick鼠标点击事件,而是通过tap事件来响应用户的触摸行为。

  • 通过 bindtap,可以为组件绑定tap触摸事件,语法如下:
<button type="primary" bindtap="btnTapHandler">按钮</button>
  • 在页面的.js 文件中定义对应的事件处理函数事件参数通过形参 event(一般简写成e)来接收:
 Page({
	btnTapHandler(e) {//按钮的 tap事件处理函数
		console.log(e)//事件参数对象e
		}
})

2.5 在事件处理函数中为data中的数据赋值

通过调用this.Data(dataObject)方法,可以给页面data中的数据重新赋值

Page({
  data :{
    count:0
  },
  //修改count的值
  changeCount(){
    this.setData({
      count: this.data.count + 1
    })
  }
})

2.6 事件传参

小程序中事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数,例如,下面代码不能正常工作

<button type="primary" bindtap='bthHandler(123)'>事件传参</button>

因为小程序会把bindtap的属性值,统一当做事件名称来处理,相当于要调用一个名称为btnHandler(123)的事件处理函数

可以为组件提供data-*自定义属性传参,其中*代表的是参数的名字,示例如下

<button bindtap = "btnHandler" data-info="{(2)}">事件传参</button>
  • info会被解析为参数的名字
  • 数值2会被解析为参数的值

在事件处理函数中,通过event.target.dataset.参数名即可获取到具体参数的值,示例

btnHandler(event){
	//dataset是一个对象,包含了所有通过data-*传递过来的参数项
	console.log(event.target.dataset)
	//通过dataset可以访问到具体参数的值
	console.log(event.target.dataset.info)
}

2.7 bindinput的语法格式

在小程序中,通过input事件来响应文本框的输入事件,

  • 通过bindinput,可以为文本框绑定输入事件:
<input bindinput="inputHandler"></input>
  • 在页面的.js文件中定义事件处理函数
inputHandler(e){
//e.detail.value是变化过后,文本框最新的值
	console.log(e.detail.value)
}

2.8 实现文本框和data之间的数据同步

实现步骤

  • 定义数据
Page({
	data :{
		mag:'你好'
	}
})
  • 渲染结构
<input value="{{msg}}" bindinput="iptHandler"></input>
  • 美化样式
input{
	border:1px solid #eee;
	padding:5px;
	margin:5px;
	border-radius:3px;
}
  • 绑定input事件处理函数
iptHandler(e){
	this.setData({
		msg:e.detail.value
	})
}

3、条件渲染

3.1、wx:if

  • 在小程序中,使用wx:if="{{condition}}"来判断是否需要渲染该代码块:
<view wx:if="{{condition}}">Ture</view>
  • 也可以用wx:elif和wx:wlse来添加else判断
<view wx:if="{{type === 1}}"></view>
<view wx:else="{{}type === 2}"></view>
<view wx:else>保密</view>

3.2、结合<block>使用wx:if

如果要一次控制对个组件的展示与隐藏,可以使用一个<block></block>标签将多个组件包装起来,并在<block>标签上使用wx;if控制属性,示例

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

注意<block>并不是一个组件,它是一个包裹性质的容器,不会在页面中做任何渲染

3.3、在小程序中,直接使用hidden="{{condition}}"也能控制元素的显示与隐藏:

<view hidden="{{ condition}}">条件为 true 隐藏,条件为 false 显示</view>

3.4、wx:if 与 hidden的对比

  • 1、运行方式不同
    • wx:if以动态创建和移除元素的方式,控制元素的显示与隐藏
    • hidden以切换样式的方式(display:none/block;),控制元素的显示与隐藏
  • 2、使用建议
    • 频繁切换时,建议使用hidden
    • 控制条件复杂时,建议使用wx:if搭配wx:elifwx:else进行展示与隐藏的切换

4、列表渲染

4.1 wx:for

通过wx:for可以根据指定的数组,循环渲染重复的组件结构,语法示例

<view wx:for="{{array}}">
	索引是:{{index}} 当前项是:{{item}}
</view>

默认情况下,当前循环项的索引用index表示;当前循环项用item表示

4.2、*手动指定索引和当前项的变量名

  • 使用wx:for-index可以指定当前循环项的索引的变量名
  • 使用wx:for-item可以指定当前项的变量名
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
	索引是:{{idx}} 当前项是:{{itemName}}
</view>

4.3、wx:key的使用

类似于Vue列表渲染中的:key,小程序在实现列表渲染时,也建议为渲染出来的列表指定唯一的Key值,从而提高渲染的效率,示例

data:{
	userList:[
		{id:1,name:'小红'}
		{id:2,name:'小黄'}
		{id:3,name:'小白'}
	]
}
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>
Copyright © 2010-2022 dgrt.cn 版权所有 |关于我们| 联系方式