⼩程序（WXML模板⽂件⼆）
【本节⼤纲】
（1）循环指令key属性补充
（2）wx:if条件变异指令
（3）标签
（4）hidden隐藏元素
（5）模板
（6）引⽤
（7）共同属性
循环指令key属性补充
Vue和React框架⽤遍历指令时的key值不建议⽤index
农业银行查余额1. key值在没有删除插⼊操作时只要是唯⼀值也⽆所谓，即此时为index索引也可以
2. 如果有删除或者插⼊的操作，后⼀位会继承删掉的index，这时的key写不如不写，本来key是为了让遍历性能优化的操作，这种可能
重复或者改变的key值，不仅不会优化还会影响性能
教师节贺卡书写格式3. index作为:key值，有可能导致第⼀次执⾏循环体初始化失败，正确的做法是尽量使⽤理想的 key 值，⽐如每项都有的唯⼀ id或者名
字
<block wx:for="{{switchList}}" wx:key="name">
<view>{{item.name}}--<switch></switch></view>
</block>
<button bindtap="add">添加</button>
view{
font-size:46rpx;
color: #ff5857;
font-weight: bold;
}
/**
* 页⾯的初始数据
*/
data:{
age:18,
switchList:[
{ name:"开关1", id:1},{ name:"开关2", id:2},{ name:"开关3", id:3},{ name:"开关4",id:4}
]
},
// 添加switch按钮
add(){
const newSwitch =[{
name:"开关"+(this.data.switchList.length+1)
}];
this.setData({
at(this.data.switchList)
})
},
WXML语法—条件渲染
wx:if数据：可以⽤ wx:elif 和 wx:else 实现多路分⽀
<view wx:if="{{age<18}}">未成年</view>
<view wx:elif="{{age == 18}}">刚成年</view>
<view wx:elif="{{age>18 && age<60}}">成年</view>
<view wx:elif="{{age>60}}">⽼年</view>
<view wx:else>⼈</view>
data:{
笔记本连不上wifi
age:18
},
渲染结果：<view>刚成年</view>
< block >标签
因为 wx:if 是⼀个控制属性，需要将它添加到⼀个标签上。如果要⼀次性判断多个组件标签，可以使⽤⼀个 标签将多个组件包装起来，并在上边使⽤ wx:if 控制属性。
<block wx:if="{{age<18}}">
<view>未成年</view>
<view>你不可以进⼊会场</view>
</block>
data初始化数据：age: 12
渲染结果：<view>未成年</view> <view>你不可以进⼊会场</view>
注意
< block /> 并不是⼀个组件，它仅仅是⼀个包装元素，不会在页⾯中做任何渲染，只接受控制属性。
hidden隐藏元素
除了wx:if可以控制元素显隐外，hidden属性也可以控制显隐
<view hidden="{{hiddenValue}}">
<text>⽂本标签1</text>
<text>⽂本标签2</text>
</view>
带鸟的诗句
data初始化数据中：hiddenValue:true,
注意局限性：hidden元素对块状布局才⽣效，对⾏内元素也⽣效，但不推荐使⽤。
wx:if vs hidden
1. wx:if 的条件值切换时，框架有⼀个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染
2. wx:if是惰性的，切换开销⼤，但初始化开销⼩
3. hidden组件始终会被渲染，只是简单的控制wxss显⽰与隐藏
4. ⼀般来说，wx:if 有更⾼的切换消耗⽽ hidden 有更⾼的初始渲染消耗。因此，如果需要频繁切换的情景下，⽤ hidden 更好，如果在
运⾏时条件不⼤可能改变则 wx:if 较好。
WXML语法—模板
WXML提供模板template，可以在模板中定义代码⽚段，然后在不同的地⽅调⽤。
例如：信息通报展⽰模板制作步骤
1. template.wxml定义模板并命名
例如在only.wxml中定义模板并命名
<template name="publicTemplate">
<view class="publicArea">
<text>{{showInfo}}</text>
冯德伦女友<text>{{nowDate}}</text>
</view>
</template>
2. 在其他页⾯通过import和include引⼊
例如在myself.wxml⽂件通过import引⼊
<import src="../myself/myself.wxml"/>
3. 使⽤ is 属性，声明需要的使⽤的模板，然后将模板所需要的 data 传⼊
使⽤ is 属性，声明模板，然后传⼊data
<template is="publicTemplate" data="{{...item}}"></template>
outlook怎么发邮件4. 最终渲染结果
同理，在别的页⾯也可以调⽤模板，然后传⼊数据
WXML语法—引⽤
WXML 提供两种⽂件引⽤⽅式import和include
1. import
import 可以⽂件中使⽤⽬标⽂件定义的 template，正如之前案例所⽰。
2. include
include可以将整个代码引⼊，相当于是拷贝到 include 位置
WXML语法—共同属性
所有wxml 标签都⽀持的属性称之为共同属性
属性名类型描述注解id String组件的唯⼀标识整个页⾯唯⼀
class String组件的样式类在对应的WXSS中定义的样式类
style String组件的内联样式可以动态设置的内联样式
hidden Boolean组件是否显⽰所有组件默认显⽰
data-*Any⾃定义属性组件上处罚的事件时，会发送给事件处理函数bind*/catch*EventHandler组件的事件
WXML语法—⾃定义属性
获取⾃定义属性值
event.currentTarget.dataset.***
event.currentTarget代表的是注册了监听点击事件的组件
<button bindtap="prompt" data-info="{{info}}" data-id="{{dataId}}">按钮</button>
data:{
info:"⾃定义属性相关数据",
dataId:"demo"
},
prompt(event){
/* event.currentTarget代表的是注册了监听点击事件的组件 */
console.log(event.currentTarget.dataset.info)
console.log(event.currentTarget.dataset.id)
},
渲染结果：