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

约定不等于承诺〃 2023-06-15 09:43 52阅读 0赞

【本节大纲】  
（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或者名字**

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({ 
        switchList:newSwitch.concat(this.data.switchList)
      })
    },

![在这里插入图片描述][20191121145715697.png]  
![在这里插入图片描述][20191121145732760.png]

# WXML语法—条件渲染 #

###### wx:if数据：可以用 wx:elif 和 wx:else 实现多路分支 ######

data: { 
        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属性也可以控制显隐

data初始化数据中：`hiddenValue:true,`  
![在这里插入图片描述][20191121150811209.png]

> **注意局限性**：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>

1.  **在其他页面通过import和include引入**  
    例如在myself.wxml文件通过import引入

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

1.  最终渲染结果  
    ![在这里插入图片描述][20191121152556181.png]  
    同理，在别的页面也可以调用模板，然后传入数据

# WXML语法—引用 #

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

1.  **import**  
    import 可以文件中使用**目标文件定义的 template**，正如之前案例所示。
2.  **include**  
    include可以将整个代码引入，相当于是拷贝到 include 位置  
    ![在这里插入图片描述][20191121152729724.png]

# WXML语法—共同属性 #

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

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>类型</th> 
   <th>描述</th> 
   <th>注解</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>id</td> 
   <td>String</td> 
   <td>组件的唯一标识</td> 
   <td>整个页面唯一</td> 
  </tr> 
  <tr> 
   <td>class</td> 
   <td>String</td> 
   <td>组件的样式类</td> 
   <td>在对应的WXSS中定义的样式类</td> 
  </tr> 
  <tr> 
   <td>style</td> 
   <td>String</td> 
   <td>组件的内联样式</td> 
   <td>可以动态设置的内联样式</td> 
  </tr> 
  <tr> 
   <td>hidden</td> 
   <td>Boolean</td> 
   <td>组件是否显示</td> 
   <td>所有组件默认显示</td> 
  </tr> 
  <tr> 
   <td>data-*</td> 
   <td>Any</td> 
   <td>自定义属性</td> 
   <td>组件上处罚的事件时，会发送给事件处理函数</td> 
  </tr> 
  <tr> 
   <td>bind*/catch*</td> 
   <td>EventHandler</td> 
   <td>组件的事件</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

# WXML语法—自定义属性 #

###### 获取自定义属性值 ######

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

data: { 
        info: "自定义属性相关数据",
        dataId: "demo"
      },
      prompt(event){ 
        /* event.currentTarget代表的是注册了监听点击事件的组件 */
        console.log(event.currentTarget.dataset.info)
        console.log(event.currentTarget.dataset.id)
      },

渲染结果：  
![在这里插入图片描述][20191121154131801.png]

[20191121145715697.png]: https://img-blog.csdnimg.cn/20191121145715697.png
[20191121145732760.png]: https://img-blog.csdnimg.cn/20191121145732760.png
[20191121150811209.png]: https://img-blog.csdnimg.cn/20191121150811209.png
[20191121152556181.png]: https://img-blog.csdnimg.cn/20191121152556181.png
[20191121152729724.png]: https://img-blog.csdnimg.cn/20191121152729724.png
[20191121154131801.png]: https://img-blog.csdnimg.cn/20191121154131801.png