【小程序】中WXML的语法详解

不念不忘少年蓝@ 2024-04-27 15:55 64阅读 0赞

#### 文章目录 ####

*   *  WXML语法详解
     *   *  ?Mustache语法
         *  ?列表渲染wx:for
         *  ?条件渲染wx:if
         *  ?hidden属性

### WXML语法详解 ###

#### ?Mustache语法 ####

**WXML基本格式**：

> 类似于HTML代码：比如自定义组件, 可以写成单标签，也可以写成双标签；
> 
> 必须有严格的闭合：没有闭合会导致编译错误
> 
> 大小写敏感： class和Class是不同的属性

**开发中, 界面上展示的数据并不是写死的, 而是会根据服务器返回的数据，或者用户的操作来进行改变**.

> 如果使用原生JS或者jQuery的话, 我们需要通过操作DOM来进行界面的更新.
> 
> 小程序和Vue一样, 提供了插值语法: Mustache语法(双大括号)

<view>{
       {message}}</view>
    <view>{
       {name}}</view>
    <view>{
       {date}}</view>

Page({
        
    	data: {
        
    		message: "Hello World",
    		name: "chenyq",
    		date: new Date().toLocaleDateString()
    	}
    })

--------------------

#### ?列表渲染wx:for ####

在组件上使用 `wx:for` 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

**在组件上使用 `wx:for` 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件**。

> 默认数组的当前项的下标变量名默认为 `index`，数组当前项的变量名默认为 `item`

<view wx:for="{
         { arr }}">
    	<view>{
       { index }}: {
       { item }}</view>
    </view>

data: {
        
      arr: [10, 30, 40, 60, 80, 90, 101, 110, 130]
    }

**某些情况下, 我们不希望使用默认的下标和当前项变量名**

> 可以使用 `wx:for-item` 可以指定数组当前元素的变量名，
> 
> 可以使用 `wx:for-index` 可以指定数组当前下标的变量名

**block**

**block类似于Vue当中的template, 是不会渲染的, 一般使用`wx:for`我们都在block上进行**

> 将 `wx:for` 用在`<block/>`标签上，以渲染一个包含多节点的结构块。

<block wx:for="{
         { arr }}">
    	<view>{
       { index }}</view>
      <view>{
       { item }}</view>
    </block>

**注意：** `<block/>` 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

**wx:key**

> 同Vue中的v-for一样, 我们需要绑定一个唯一的标识符`key`
> 
> 如不提供 `wx:key`，会报一个 `warning`， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略

**`wx:key` 的值以两种形式提供**

> 字符串，代表在 for 循环的目标 array 中 item 的某个 属性，该 属性的值需要是列表中唯一的字符串或数字，且不能动态改变。
> 
> 保留关键字 `*this` 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

*  `*this`形式

<block wx:for="{
         { arr }}" wx:key="*this">
    	<view>{
       { item }}</view>
    </block>

Page({
        
    	data: {
        
    		arr: [10, 20, 30]
    	}
    })

*  字符串形式

<block wx:for="{
         { students }}" wx:key="id">
    	<view>{
       { item.name }}</view>
    	<view>{
       { item.age }}</view>
    </block>

Page({
        
    	data: {
        
    		students: [
    			{
        
    				id: 101,
    				name: "chenyq",
    				age: 18
    			},
    			{
        
    				id: 102,
    				name: "kaisa",
    				age: 19
    			}
    		]
    	}
    })

--------------------

#### ?条件渲染wx:if ####

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

> 当条件为true时, view组件会渲染出来
> 
> 当条件为false时, view组件不会渲染出来

data: {
        
      isShow: true		
    }

**`wx:if`也可以使用bolck标签**

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

**`wx:if`–`wx:elif` – `wx:else`结合使用**

Page({
        
    	data: {
        
    		isShow: true,
    		score: 91
    	}
    })

--------------------

#### ?hidden属性 ####

**hidden属性**:

> hidden是`所有的组件都默认拥有的属性`；
> 
> 当hidden属性为true时, 组件会被隐藏；
> 
> 当hidden属性为false时, 组件会显示出来；

**hidden和wx:if的区别**

> wx:if是控制组件是否渲染的, 同时 `wx:if` 也是**惰性的**，如果在初始渲染条件为 `false`，框架什么也不做，在条件第一次变成真的时候才开始局部渲染
> 
> 相比之下，`hidden` 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏, 本质在设置display属性。

**因此, wx:if相对来说是更消耗性能的**

> 当我们需要频繁的切换时, 使用`hidden`属性
> 
> 当不需要频繁的切换时, 就使用`wx:if`
> 
> 类似于Vue中`v-if`和`v-show`的区别