1.数据绑定
- 将数据仓库data中的数据绑定显示在页面中。
- 语法:{{ 变量 }},称为“Mustache”语法,也称为插值表达式
- 作用:用于在页面中插入值,进行数据的绑定显示,且当值发生变化时页面会重新渲染加载,称为响应式特性,即数据状态同步。
wxml示例代码:
<!--
数据绑定
-->
<view class="title">数据绑定</view>
<view>{{ name }}</view>
<!-- 可以为属性绑定值 -->
<view id="{{ name }}">姓名</view>
<view>{{ age }}</view>
<view>{{ bool }}</view>
<view>{{ str }}</view>
<view>{{ arr }}</view>
<!-- 自定义对象会显示为object -->
<view>{{ user }}</view>
<view>{{ time }}</view>
<!-- 当值为undefined或变更不存在时,显示空字符串 -->
<view>{{ hobby }}</view>
<view>{{ address }}</view>
<view>---------------------------------</view>
<!--
简单的运算操作
-->
<view>{{ age + 2 }}</view>
<view>{{ bool && false }}</view>
<view>{{ age < 18 }}</view>
<view>{{ age >= 18 ? '成年人' : '未成年人' }}</view>
<view>{{ user.name }}</view>
<view>{{ arr[2] }}</view>
<view>---------------------------------</view>
<!--
直接定义值
-->
<view>{{ 'rick' }}</view>
<view>{{ 38 }}</view>
<view>{{ true }}</view>
<view>{{ [1,2,3,4,5] }}</view>
<view>{{ {username:'leo',password:'xxxxxx'} }}</view> <!-- 直接定义对象时两边必须有空格 -->
<!-- 不能在插值表达{{}}中调用JS内置对象 -->
<!-- <view>{{ new Date() }}</view> -->
js示例代码:
Page({
data:{
name:'rick',
age:18,
bool:true,
str:null,
arr:[1,3,5,7,9],
user:{
id:9527,
name:'周星驰',
age:27
},
time:new Date(),
hobby:undefined
}
})
2.条件和列表渲染
- 条件渲染:语法 wx:if=“”,判断是否需要渲染组件,取值可以是任意类型,最终都会转换为boolean,根据boolean结果,执行元素的创建和删除操作,控制元素的显示隐藏
- 列表渲染:语法 wx:for=“”,循环多次渲染组件,取值为Array|Object|number|string,会基于数据重复渲染组件,用于循环数据,循环时默认使用index和item表示当前元素的下标变量名和元素变量名
wxml示例代码:
<!-- 条件和列表渲染 -->
<view class="title">条件和列表渲染</view>
<view style="width:100rpx;height:100rpx;background: red;" wx:if="{{ bool }}"></view>
<!-- 使用wx:elif 和 wx:else -->
<view wx:if="{{ age <= 6 }}">童年</view>
<view wx:elif="{{ age <= 18 }}">少年</view>
<view wx:elif="{{ age <= 60 }}">中年</view>
<view wx:else>老年</view>
<view>---------------------------------</view>
<!-- 可以使用<block>标签将多个组件包装起来,不控制页面结构 -->
<block wx:if="{{ name == 'rick' }}">
<text>aaa</text>
<text>bbb</text>
<text>ccc</text>
</block>
<!--
列表渲染
1.循环时默认使用index和item表示当前元素的下标变量名和元素变量名
2.可以指定wx:key属性,作用:1)提升性能 2)跟踪每个节点的身份状态
-->
<!-- 循环数组 -->
<view wx:for="{{ arr }}" wx:key="index">{{ index }} = {{ item }}</view>
<view>---------------------------------</view>
<view wx:for="{{ arr }}" wx:for-item="num" wx:for-index="i" wx:key="index">{{ i }} = {{ num }}</view>
<view>---------------------------------</view>
<!-- 循环对象 -->
<view wx:for="{{ user }}" wx:key="index">{{ index }} = {{ item }}</view>
<view>---------------------------------</view>
<!-- 循环数字 -->
<view wx:for="{{ 4 }}" wx:key="index">{{ index }} = {{ item }}</view>
<view>---------------------------------</view>
<!-- 循环字符串 -->
<view wx:for="{{ name }}" wx:key="index">{{ index }} = {{ item }}</view>
<view>---------------------------------</view>
<!-- 循环对象数组:二重循环 -->
<view wx:for="{{ users }}" wx:for-item="u" wx:key="u">
<text wx:for="{{ u }}" wx:for-index="k" wx:for-item="v" wx:key="k">{{ k }} = {{ v }}</text>
</view>
<view>---------------------------------</view>
<!-- 使得block标签装饰组件包装起来 -->
<block wx:for="{{ user }}">
<view>{{ index }}</view>
<view>{{ item }}</view>
</block>
js示例代码:
Page({
users:[
{
id:1001,
name:'a001',
age:18
},{
id:1002,
name:'a002',
age:28
},{
id:1003,
name:'a003',
age:38
}
]
}
})
3.模板
使用模板template可以定义代码片段,然后在不同的地方调用,实现页面代码结构的复用。
使用步骤:
- 定义模板,通过name属性指定模板名称
- 调用模板,通过is属性指定要调用的模板
wxml示例代码:
<!--
模版的基本用法
-->
<view class="title">模版的基本用法</view>
<!-- 1.定义模版 -->
<template name="hello">
<view>abcd</view>
<view>1234</view>
<view>{{ name }}</view>
<view>{{ age }}</view>
</template>
<!-- 2.调用模版 -->
<!-- 模版中不能直接访问页面的数据,需要在调用模版时使用data属性将数据传入(有点类似与调用函数时的传参) -->
<!-- 传入多个数据以逗号隔开 -->
<template is="hello" data="{{ name,age }}"></template>
<view>----------------------------------------</view>
<!-- 使用展开运算符,直接将user对象展开 -->
<template is="hello" data="{{ ...user }}"></template>
<!--
使用wx:for循环调用模版
-->
<view class="title">使用wx:for循环调用模版</view>
<template name="hello2">
<view>用户信息</view>
<text>用户ID:{{ usr.id }},</text>
<text>用户名称:{{ usr.name }},</text>
<text>用户年龄:{{ usr.age }}</text>
</template>
<template is="hello2" wx:for="{{ users }}" wx:for-item="usr" data="{{ usr }}"></template>
<!--
外部模版调用:使用import引用外部文件
模版样式加载:
1.加载全局样式
2.加载引用模版页面的局部样式
3.对于独立的外部模版样式文件,可以在引用该模版的页面中通过import导入
-->
<view class="title">外部模版调用</view>
<!-- 引入外部模版文件,需要指定模版文件的命名 -->
<import src="/template/product/product"></import>
<template is="productA" data="{{ ...user }}"></template>
<view>----------------------------------------</view>
<template is="productB" data="{{ name }}"></template>
<!--
动态调用模版
-->
<view class="title">动态调用模版</view>
<template is="{{ product }}" data="{{ ...user }}"></template>
<!--
使用include引用文件
相当于将引用文件拷贝到include的位置
-->
<view class="title">使用include引用文件</view>
<include src="/template/header/header.wxml"></include>
<view>body</view>
<include src="/template/footer/footer.wxml"></include>
wxss示例代码:
.temp-icon {
color:red;
}
@import "/template/product/product.wxss";
js示例代码:
Page({
/**
* 页面的初始数据
*/
data: {
name:'jack',
age:43,
user:{
id:1001,
name:'rose',
age:23
},
users:[
{
id:'0001',
name:'1号',
age:10
},{
id:'0002',
name:'2号',
age:20
},{
id:'0003',
name:'30号',
age:30
}
],
product:'productA'
}
})
单独模版文件.wxml
<!-- 该文件用来定义模版内容 -->
<template name="productA">
<text>产品id:{{ id }}</text>
<text class="iconfont icon-cart temp-icon product-icon"></text>
</template>
<template name="productB">
<text>产品名称:{{ name }}</text>
</template>
单独模版文件.wxss
.product-icon {
font-size: 30px;
}
4.事件绑定
4.1 事件分类
- 普通事件
- 组件内置事件
4.2 事件绑定方式
- bin事件名=“函数名” 或 bind:事件名=“函数名”,触发事件昌泡
- catch事件名=“函数名” 或 catch:事件名=“函数名”,阻止事件昌泡
4.3 参数传递
- 在组件标签上,以 data-参数名=“参数值” 方式进行参数传递
- 在事件回调函数中,接收 event 事件对象为参数,通过 event.currentTarget.dataset 获取传递的参数变量
wxml示例代码:
<!--
普通事件
-->
<view class="title">普通事件</view>
<button type="primary" id="myButton" size="default" bindtap="onClick">点击</button>
<viwe bind:tap="onClick">点击</viwe>
<!-- 事件昌泡(bind绑定事件:触发事件昌泡,catch绑定事件:阻止事件昌泡) -->
<view class="box1" bindtap="tapBox1">box1
<view class="box2" bindtap="tapBox2">box2
<!-- <view class="box3" bindtap="tapBox3">box3</view> -->
<view class="box3" catchtap="tapBox3">box3</view>
</view>
</view>
<!--
组件内置事件
-->
<view class="title">组件内置事件</view>
<view>
<view>昵称:{{ user.nickName }}</view>
<image src="{{ user.avatarUrl }}"></image>
<button type="primary" open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取用户信息</button>
</view>
<!--
事件传参
-->
<view class="title">事件传参</view>
<view>
<button type="primary" bindtap="onParam" data-info="信息1">参数传递</button>
<!-- 参数命名两种方式:1.驼峰式命名会自动转换为小写字母 2.连字符会转换为驼峰式 -->
<!-- 例如:data-infoName 参数在后台识别为 infoname,data-info-name 参数在后台识别为 infoName -->
<button type="primary" bindtap="onParam2" data-infoName="信息2" data-info-name="信息A">参数传递2</button>
</view>
<!-- 循环传递参数 -->
<view wx:for="{{ arr }}" wx:key="index" bindtap="onParam2" data-num="{{ item }}">{{ item }}</view>
<!--
表单数据获取
-->
<view class="title">表单数据获取</view>
<view>{{ inputValue }}</view>
<!-- 双向数据绑定 -->
<input bindinput="onInput" value="{{ inputValue }}"></input>
<!-- 单选框和复选框 -->
<checkbox-group bindchange="onCheckBox">
<checkbox wx:key="index" wx:for="{{ countrys }}" checked="{{ item.checked }}" value="{{ item.name }}">{{ item.value }}</checkbox>
</checkbox-group>
<!-- picker -->
<picker
mode="selector"
range="{{ countrys }}"
range-key="value"
bindchange="onPicker"
>{{ countrys[index].value }}</picker>
js示例代码:
Page({
data:{
user:null,
arr:[1,2,3,4,5],
inputValue:null,
countrys:[
{name:'CHN',value:'中国',checked:'true'},
{name:'USA',value:'美国'},
{name:'JPN',value:'日本'},
{name:'ENG',value:'英国'}
],
index:0
},
onClick(e){ // 参数 e 表示事件对象
console.log('被点击了',e)
},
tapBox1(){
console.log('点击了box1')
},
tapBox2(){
console.log('点击了box2')
},
tapBox3(){
console.log('点击了box3')
},
getUserInfo(e){
this.setData({
user:e.detail.userInfo
})
},
onParam(e){
console.log(e.currentTarget.dataset.info); // 获取传递的参数
},
onParam2({currentTarget:{dataset}}){ // 通过es6的解构赋值
console.log(dataset)
},
onInput(e){
console.log(e.detail.value); // 获取表单元素的值
this.setData({
inputValue:e.detail.value
})
},
onCheckBox(e){
console.log(e.detail.value)
},
onPicker(e){
console.log(e)
this.setData({
index:e.detail.value
})
}
})
wxss示例代码:
.box1,.box2,.box3 {
border: 1px solid #ccc;
}
.box1 {
height: 300px;
width: 300px;
}
.box2 {
height: 200px;
width: 200px;
}
.box3 {
height: 100px;
width: 100px;
}
input {
background: #999999;
border-radius: 10px;
padding: 20rpx;
}
page {
margin-bottom: 500rpx;
}
5.WXS语法
WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。
WXS与JavaScript不同,可以在wxml页面中完成JS脚本嵌套,为插值表达式提供脚本方法调用,实现数据的包装处理。
用法:
- 局部脚本:定义在对应页面的wxml文件中,只能在当前页面使用
- 全局脚本:使用独立的.wxs文件进行定义,在需要使用的页面中进行导入
wxml示例代码:
<!--
在微信小程序中,不能在插值表达式中调用JS内置对象,所以无法在页面上直接对数据进行包装处理
-->
<view>{{ num }}</view>
<!-- <view>{{ num.toFixed(2) }}</view> -->
<!--
局部脚本
1.wxs区域是一个封闭的语法环境,默认定义的成员都是私有的,只能在wxs区域内调用
2.必须使用module.exports = { } 向外暴露要共享的变量和函数
3.对外共享的成员,将存储于module属性所指定的模块对象中
4.为了语法兼容,wxs区域中只能使用ES5语法,且只支持部份js语法
-->
<view class="title">局部脚本</view>
<wxs module="myModule">
var name = 'rick';
// let age = 20; // 不支持ES6语法
var age = 22;
function round(num,len){
len = len || 2;
if (typeof num == 'number'){
return num.toFixed(len);
}
return num;
}
module.exports = {
name:name,
age:age,
round:round
}
</wxs>
<!-- 通过 模块名.成员 方式访问 -->
<view>{{ myModule.name }}</view>
<view>{{ myModule.age }}</view>
<view>{{ myModule.round(num) }}</view>
<view>{{ myModule.round(num,2) }}</view>
<view>{{ myModule.round(num,3) }}</view>
<view>{{ myModule.round(num,1) }}</view>
<!--
全局脚本
-->
<view class="title">全局脚本</view>
<!-- 引入时只能使用相对路径,不能使用绝对路径 -->
<wxs src="../../utils/tools.wxs" module="tools"></wxs>
<view>{{ tools.round(num,4) }}</view>
js示例代码:
Page({
data:{
num:1.23456789
}
})
wxs示例代码:
// 直接定义脚本代码
function round(num,len){
len = len || 2;
if (typeof num == 'number'){
return num.toFixed(len);
}
return num;
}
module.exports = {
round:round
}