WXML语法

本文主要是介绍WXML语法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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 -->
<pickermode="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
}

这篇关于WXML语法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---