微信小程序详解(5 wxml:条件渲染,模板,引用,wxs:模块)

最新推荐文章于 2025-02-09 16:25:20 发布

success_on

最新推荐文章于 2025-02-09 16:25:20 发布

阅读量816

点赞数

分类专栏：微信小程序

原文链接：https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/02variate.html

版权

微信小程序专栏收录该内容

7 篇文章

订阅专栏

条件渲染

介绍:
顾名思义,也就是对条件进行渲染,使得条件可以拥有各种各样的功能和样式判断.
wx:if
在框架中，使用 wx:if="" 来判断是否需要渲染该代码块：

<view wx:if="{{condition}}"> True </view>

也可以用 wx:elif 和 wx:else 来添加一个 else 块：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

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

<view wx:if="{{condition}}"> True </view>

也可以用 wx:elif 和 wx:else 来添加一个 else 块：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

block wx:if
因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

(注意：并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。)
这里的几个区别还是要详细讲一下

因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。
同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。
一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

模板

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

定义模板
使用 name 属性，作为模板的名字。然后在内定义代码片段，如：

<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

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

<template is="msgItem" data="{{...item}}"/>
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板
模板的作用域
模板拥有自己的作用域，只能使用 data 传入的数据以及模板定义文件中定义的模块。

引用

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

import
import可以在该文件中使用目标文件定义的template，如：

在 item.wxml 中定义了一个叫item的template：

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

在 index.wxml 中引用了 item.wxml，就可以使用item模板：

<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

import 的作用域

(注意:import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template)

include
include 可以将目标文件除了外的整个代码引入，相当于是拷贝到 include 位置.

WXS 模块

WXS 代码可以编写在 wxml 文件中的标签内，或以 .wxs 为后缀名的文件内。

模块
每一个 .wxs 文件和标签都是一个单独的模块。

每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。

一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。

.wxs 文件
在微信开发者工具里面，右键可以直接创建 .wxs 文件，在其中直接编写 WXS 脚本。

module 对象
每个 wxs 模块均有一个内置的 module 对象。

属性
exports: 通过该属性，可以对外共享本模块的私有变量与函数。

require函数
在.wxs模块中引用其他 wxs 文件模块，可以使用 require 函数。

引用的时候，要注意如下几点：

只能引用 .wxs 文件模块，且必须使用相对路径。
wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。
标签
在这里插入图片描述
module 属性
module 属性是当前标签的模块名。在单个 wxml 文件内，建议其值唯一。有重复模块名则按照先后顺序覆盖（后者覆盖前者）。不同文件之间的 wxs 模块名不会相互覆盖。