小程序WXML的模板语法
一、wxml 模板语法
Mustache语法格式
使用Mustache语法
(双大括号)将变量包裹起来即可。语法如下:
<view>{{要绑定的数据名称}}</view>
Mustache语法的应用场景
- 绑定内容
- 绑定属性
- 运算(三元运算、算术运算等)
1.1 数据绑定的基本原则
- 在data中定义数据;
- 在wxml中使用数据;
1.2 wxml - 数据绑定
在页面对应的.js文件中,在data对象中定义数据:
// pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
// 字符串类型数据
info:"我爱重庆!",
// 数值类型数据
num:0,
// 数组类型数据
arrayList:[
{msg:"你好,朋友!"},
{msg:"重庆火锅真香~~!"}
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
在wxml模板中使用数据:
<!--pages/test/test.wxml-->
<!-- 将data中的数据渲染到此页面 -->
<!-- 字符串类型 -->
<view>{{info}}</view>
<!-- 数值类型 -->
<view>{{num}}</view>
<!-- 数组类型 -->
<view wx:for="{{arrayList}}" wx:for-index="key" wx:for-item="value">
{{key}}--{{value.msg}}
</view>
1.3 动态绑定属性
在页面对应的.js文件中,在data对象中定义数据:
// pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
// 在模板中动态使用属性
imgUrl:"http://cdn-hw-static2.shanhutech.cn/bizhi/staticwp/202211/9d331a82d36c5410179d81c29f4a01d4--1763147845.jpg"
},
})
在wxml模板中使用数据:
<!--pages/test/test.wxml-->
<!--动态绑定属性,记得使用{{}}插值语法-->
<image src="{{imgUrl}}" mode=""/>
运行截图:
1.4 三元运算符的使用
在页面对应的.js文件中,在data对象中定义数据:
// pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
// 用于测试三元运算符
randNum:Math.random()*10//生成10以内的随机数
},
})
在wxml模板中使用数据:
<!--pages/test/test.wxml-->
<view>
{{randNum>=5?"随机数大于或等于5":"随机数小于5"}}
</view>
运行截图:
1.5 条件渲染
1.5.1 wx:if
在小程序中,使用wx:if="{condition}}"
来判断是否需要渲染该代码块:
// pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
condition:true
}
})
<!-- 条件渲染 -->
<view wx:if="{{condition}}">True</view>
也可以用wx:elif
和WX:else
来添加else判断:
// pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
type:1
}
})
<!--pages/test/test.wxml-->
<!-- 条件渲染 -->
<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>保密</view>
1.5.2 结合<block>
使用wx:if
如果要一-次性控制多个组件的展示与隐藏
,可以使用一个<block></block>标签
将多个组件包装起来,并在<block>
标签上使用wx:if控制属性
,示例如下:
<!-- block包裹,条件渲染:block不会被渲染到页面 -->
<block wx:if="{{true}}">
<view>view1</view>
<view>view2</view>
</block>
注意:
并不是一一个组件
, 它只是一一个包裹性质的容器,不会在页面中做任何渲染
。
1.5.3 hidden - 隐藏
在小程序中,直接使用hidden="{{ condition }}"
也能控制元素的显示与隐藏
:
// pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
condition:false,
}
})
<!--pages/test/test.wxml-->
<!-- 使用hidden控制显示与隐藏 -->
<view hidden="{{condition}}">条件为true隐藏,条件为false显示</view>
1.5.4 wx:if与hidden的对比
- 运行方式不同
- wx:if 以
动态创建和移除元素
的方式,控制元素的展示与隐藏 - hidden 以
切换样式
的方式(display: none/block;
),控制元素的显示与隐藏
-
使用建议
●
频繁切换
时, 建议使用hidden
●控制条件复杂
时,建议使用wx:if
搭配Wx:elif、Wx:else 进行展示与隐藏的切换心
1.6 列表渲染
1.6.1 wx:for
通过wx:for
可以根据指定的数组
,循环渲染重复的组件结构
,语法示例如下:
<!--pages/test/test.wxml-->
<!-- 循环列表渲染:wx:for -->
<view wx:for="{{arrayList}}">
索引是:{{index}}--当前项是:{{item}}
</view>
默认情况下,当前循环项的索引
用index
表示;当前循环项
用item
表示。
// pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
arrayList:['华为','小米','苹果']
},
})
1.6.2 手动指定索引和当前项的变量名*
-
使用
wx:for-index
可以指定当前循环项的索引
的变量名 -
使用
wx:for-item
可以指定当前项的变量名
<!--pages/test/test.wxml-->
<!-- 循环列表渲染: 手动指定索引和当前项的变量名* -->
<view wx:for="{{arrayList}}" wx:for-index="idx" wx:for-item="itemName">
索引是:{{idx}}--当前项是:{{itemName}}
</view>
1.6.3 wx:key的使用
类似于Vue列表渲染中的:key,
小程序在实现列表渲染时,也建议为渲染出来的列表项指定唯一的key值,从而提高渲染的效率
,示例代码如下:
// pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
userList:[
{id:1,name:'小明'},
{id:2,name:'小王'},
{id:3,name:'小宋'}
]
},
})
<!--pages/test/test.wxml-->
<!-- 循环列表渲染: wx:key的使用,key不需要使用插值语法 -->
<view wx:for="{{userList}}" wx:key="id" >
{{item.name}}
</view>
二、wxss模板样式
2.1 什么是WXSS
WXSS
(WeiXin Style Sheets)是一套样式语言 ,用于美化WXML的组件样式,类似于网页开发中的CSS。
2.2 WXSS和CSS的关系
WXSS
具有CSS大部分特性,同时,WXSS还对CSS进行了扩充
以及修改
,以适应微信小程序的开发。与CSS相比,WXSS扩展的特性
有:
rpx
尺寸单位@import
样式导入
2.3 rpx
2.3.1 什么是rpx尺寸单位
rpx
( responsive pixel)是微信小程序独有的,用来解决屏适配的尺寸单位
。
2.3.2 rpx的实现原理
rpx
的实现原理非常简单:鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx 把所有设备的屏幕,在宽度上等分为750份
(即:当前屏幕的总宽度为750rpx
)。
- 在
较小
的设备 上,1rpx
所代表的宽度较小
- 在
较大
的设备 上,1rpx
所代表的宽度较大
小程序在不同设备上运行的时候,会自动把rpx的样式单位换算成对应的像素单位来渲染
,从而实现屏幕适配。
2.3.3 rpx与px之间的单位换算*
在iPhone6上,屏幕宽度为375px
,共有750个物理像素
,等分为750rpx
。则:
750rpx= 375px = 750物理像素
1rpx=0.5px = 1物理像素
建议:开发微信小程序时,推荐使用iPhone6
作为视觉稿的标准。
开发举例:在iPhone6.上如果要绘制宽
100px
,高20px
的盒子,换算成rpx
单位,宽高分别为200rpx
和40rpx
。
2.4 @import的语法格式
@import
后跟需要导入的外联样式表的相对路径
,用;
表示语句结束。示例如下:
/* pages/test/test.wxss */
/* 导入公共样式表,导入语句一定要用 ; 号结束 */
@import "../../common/common.wxss";
input{
border: 2px solid rgb(32, 32, 32);
padding: 5px;
margin: 5px;
border-radius: 3px;
}
使用公共样式表流程
- 在根目录中创建
common
公共样式表文件夹,在文件夹中创建一个common.wxss
样式文件,写入相关样式 - 在页面的
.js
文件中导入公共样式表文件
- 在页面的wxml模板中的节点上直接使用
<!-- class后面的样式类名就是直接使用的common公共样式表中的样式类名,前提是要在页面的wxss文件中导入 -->
<view wx:for="{{userList}}" wx:key="id" class="username">
{{item.name}}
</view>
2.5 全局样式和局部样式
2.5.1 全局样式
定义在app.wxss
中的样式为全局样式
,作用于每一一个页面。
2.5.2 局部样式
在页面的.WXSS
文件中定义的样式为局部样式
,只作用于当前页面。
注意:
①当局部样式
和全局样式冲突
时,根据就近原则
,局部样式会覆盖
全局样式
②当局部样式
的权重大于或等于全局样式的权重时,才会覆盖全局的样式
三、小程序中的-事件
3.1 什么是事件
含义: 事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。
3.2 小程序中的常用事件
事件对象的属性列表:当事件回调触发的时候,会收到一-个事件对象event
,通常习惯使用e
来表示event
:
3.3 target和currentTarget的区别
target
是触发该事件的源头组件
,而currentTarget
则是当前事件所绑定的组件
。举例如下:
点击内部的按钮时,点击事件以冒泡的方式向外扩散,也会触发外层view的tap事件处理函数。此时,对于外层的view来说:
- e.target 指向的是触发事件的源头组件,因此,e.target 是内部的按钮组件
- e.currentTarget 指向的是当前正在触发事件的那个组件,因此,e.currentTarget 是当前的view组件
3.4 bindtap的语法格式
在小程序中,不存在HTML中的onclick鼠标点击事件,而是通过tap事件来响应用户的触摸行为。
- 通过
bindtap
,可以为组件绑定tap触摸事件,语法如下:
<!--pages/test/test.wxml-->
<button type="primary" bindtap="btnTapHandler">点击我</button>
- 在页面的.js文件中定义对应的事件处理函数,事件参数通过
形参event
(一般简写成e
)来接收:
// pages/test/test.js
Page({
// btnTapHandler事件处理函数
btnTapHandler(e){//按钮的 tap 事件处理函数
console.log("我是btnTapHandler事件处理函数!",e);//e是事件参数对象
}
})
点击按钮之后,就会触发绑定的
btnTapHandler
事件,如图可以在控制台打印出要输出的文字和事件参数对象e
3.5 在事件处理函数中为data中的数据的赋值
通过调用this.setData(dataObject)
方法,可以给页面data中的数据重新赋值
:
点击之前
点击之后
3.6 事件传参
可以为组件提供data-*
自定义属性传参,其中* 代表的是参数的名字
,示例代码如下:
<button type="primary" bindtap="btnTapAddCount" data-count="{{10}}">
事件传参
</button>
<text>事件传参:{{count}}</text>
Tip:如果data-*=“{{数字}}”,不使用{{}}只是“”引号的话,是字符串。
最终:
- info会被解析为参数的名字
- 数值2会被解析为参数的值
在事件处理函数中,通过event.target.dataset.参数名
即可获取到具体参数的值
,示例代码如下:
// pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
//计数器
count:0
},
// btnTapAddCount事件处理函数(累加功能)
btnTapAddCount(e){
//dataset 是一个对象,里面包含了所有通过data-* 传递过来的参数项
console.log(e.target.dataset);
//通过 dataset 可以访问到具体参数值
console.log(e.target.dataset.count);
}
})
3.7 bindinput 的语法格式
在小程序中,通过input事件
来响应文本框的输入事件,语法格式如下:
①通过bindinput,可以为文本框绑定输入事件:
<!--pages/test/test.wxml-->
<!-- input输入事件绑定 -->
<input bindinput="inputHandler"/>
②在页面的.js文件
中定义事件处理函数:
// pages/test/test.js
Page({
//input输入事件处理函数
inputHandler(e){
//e.detail.value 是变化过后的,文本框最新的值
console.log(e.detail.value);
}
})
3.8 实现文本框与data中的数据同步
3.8.1 实现步骤
- 定义数据
- 渲染结构
- 美化样式
- 绑定input事件处理函数
3.8.2 定义数据
// pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
msg:''
}
})
3.8.3 渲染结构
<!--pages/test/test.wxml-->
<!-- input输入事件绑定 -->
<input value="{{msg}}" bindinput="inputHandler"/>
3.8.4 美化样式
/* pages/test/test.wxss */
input{
border: 2px solid rgb(32, 32, 32);
padding: 5px;
margin: 5px;
border-radius: 3px;
}
3.8.5 绑定input事件处理函数
msg变量会随input实时变化
// pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
msg:''
},
//input输入事件处理函数
inputHandler(e){
this.setData({
//e.detail.value 是变化过后的,文本框最新的值
msg:e.detail.value
})
},
})