微信小程序（WXML模板文件二）

循环指令key属性补充

Vue和React框架用遍历指令时的key值不建议用index

（1）key值在没有删除插入操作时只要是唯一值也无所谓，即此时为index索引也可以

（2）如果有删除或者插入的操作，后一位会继承删掉的index，这时的key写不如不写，本来key是为了让遍历性能优化的操作，这种可能重复或者改变的key值，不仅不会优化还会影响性能

（3）index作为:key值，有可能导致第一次执行循环体初始化失败，正确的做法是尽量使用理想的 key 值，比如每项都有的唯一 id或者名字

案例：用index作为wx:key值

//wxml

<block wx:for="{{switchList}}" wx:key="index">
<view>
{{item.id}}-<switch></switch>
</view>
</block>
<button bindtap="addSwitch">点击添加</button>

//js

data: {
    switchList:[
      { id: 1 },
      { id: 2 },
      { id: 3 },
      { id: 4 }
    ]
  },
  // 按钮事件
  
  addSwitch() {
    const newSwitch = [{
      id: this.data.switchList.length + 1
    }];
    this.setData({
      switchList: newSwitch.concat(this.data.switchList)
    })
  },

案例：用id作为wx:key值

//wxml

<block wx:for="{{switchList}}" wx:key="id">
<view>
{{item.id}}-<switch></switch>
</view>
</block>
<button bindtap="addSwitch">点击添加</button>

//js

 data: {
    switchList:[
      { id: 1 },
      { id: 2 },
      { id: 3 },
      { id: 4 }
    ]
  },
  // 按钮事件
  addSwitch() {
    const newSwitch = [{
      id: this.data.switchList.length + 1
    }];
    this.setData({
      switchList: newSwitch.concat(this.data.switchList)
    })
  },

WXML语法—条件渲染

wx:if在框架中，使用 wx:if="" 来判断是否需要渲染该代码块：

//wxml
<block wx:if="{{age<18}}">
 <view>未成年</view>
 <view>你不可以进入会场</view>
</block>
<view wx:elif="{{age == 18}}">刚成年</view>
<view wx:else>成年</view>

<block>标签
并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性

hidden隐藏元素
除了wx:if可以控制元素显隐外，hidden属性也可以控制显隐

<view hidden="{{hidden}}">
<text>文本标签1</text>
<text>文本标签2</text>
</view>

注意局限性：hidden元素对块状布局才生效，对行内元素也生效，但不推荐使用

wx:if vs hidden

①wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染

②wx:if是惰性的，切换开销大，但初始化开销小

③hidden组件始终会被渲染，只是简单的控制wxss显示与隐藏

④一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好

WXML语法—模板

WXML提供模板template，可以在模板中定义代码片段，然后在不同的地方调用

例如：信息通报展示模板制作步骤
**①template.wxml定义模板并命名 **

<template name="publicTemplate">
  <view class="publicArea">
    <text>{showInfo}</text>
    <text>{nowData}</text>
  </view>
</template>

②在其他页面通过import和include引入

③使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入

WXML语法—引用

WXML 提供两种文件引用方式import和include

（1）import
import 可以文件中使用目标文件定义的 template，正如之前案例所示。

（2）include
include可以将整个代码引入，相当于是拷贝到 include 位置

WXML语法—共同属性

所有wxml 标签都支持的属性称之为共同属性

WXML语法—自定义属性

获取自定义属性值

event.currentTarget.dataset.***
event.currentTarget代表的是注册了监听点击事件的组件