三.微信小程序 WXML

ゝ一纸荒年。 2023-07-03 06:02 18阅读 0赞

# 微信小程序 WXML #

### 文章目录 ###

*  微信小程序 WXML
 *   *  WXML
     *   *  1.数据绑定
         *   *  1.1数据绑定
             *   *  1.1.1数据绑定
                 *  1.1.2 简单绑定
                 *  1.1.3 组件属性(需要在双引号之内)
                 *  1.1.4 控制属性(需要在双引号之内)
                 *  1.1.5关键字(需要在双引号之内)
             *  1.2 运算
             *   *  1.2.1 三元运算
                 *  1.2.2 算数运算
                 *  1.2.3 逻辑判断
                 *  1.2.4 字符串运算
                 *  1.2.5 数据路径运算
             *  1.3组合
             *   *  1.3.1 数组
                 *  1.3.2 对象
         *  2.列表渲染
         *   *  2.1 wx:for
             *  2.2 block wx:for
             *  2.3 wx:key
             *  注意: 当\`wx:for\`的值为字符串时, 会将字符串解析成字符串数组
         *  3.条件渲染
         *  4.模板

框架的视图层由WXML与WXSS编写,由组件来展示.

WXS(WeiXin Script)是小程序的一套脚本语言,结合`WXML`,可以构建出页面的结构.

组件(Component)是视图的基本组成单位.

## WXML ##

WXML(WeiXin Markup Language)是框架设计的一套标签语言, 结合基础组件、事件系统, 可以构建出页面的结构.

### 1.数据绑定 ###

#### 1.1数据绑定 ####

##### 1.1.1数据绑定 #####

WXML中的动态数据均来自对应Page的data

##### 1.1.2 简单绑定 #####

数据绑定使用Mustache语法(双大括号) 将变量包起来.

<view> {
       {message}} </view>

Page({ 
        data:{ 
            message:'Hello'
        }
    })

##### 1.1.3 组件属性(需要在双引号之内) #####

Page({ 
        data:{ 
            id:0
        }
    })

##### 1.1.4 控制属性(需要在双引号之内) #####

Page({ 
        data:{ 
            condition:true
        }
    })

##### 1.1.5关键字(需要在双引号之内) #####

`true`:boolean类型的true,代表真值,

`false`:boolean类型的false,代表假值

***特别注意: 不要直接写\`checked=“false”, 其计算结果是一个字符串, 转成 boolean 类型后代表真值.***

#### 1.2 运算 ####

可以在`{ {}}`内进行简单的运算, 支持的有如下几种方式:

##### 1.2.1 三元运算 #####

<view hidden="{ {flag ? true : false }}">Hidden</view>

##### 1.2.2 算数运算 #####

Page({ 
        data:{ 
            a: 1,
            b: 2,
            c: 3
        }
    })

view中的内容为`3 + 3 + d`

##### 1.2.3 逻辑判断 #####

##### 1.2.4 字符串运算 #####

<view>{
       {"hello" + name}}</view>

Page({ 
        data:{ 
            name:"张三"
        }
    })

##### 1.2.5 数据路径运算 #####

<view>{
       {object.key}} {
       {array[0]}}</view>

Page({ 
        data:{ 
            object:{ 
    	        key:'Hello'
        	},
        	array:['MINA']
        }
    })

#### 1.3组合 ####

也可以在Mustache内直接进行组合, 构成新的对象或者数组.

##### 1.3.1 数组 #####

Page({ 
        data:{ 
            zero:0
        }
    })

最终组合成数组 `[0,1,2,3,4]`

##### 1.3.2 对象 #####

1.  普通模式

Page({ 
        data:{ 
            a:1,
            b:2
        }
    })

最终组合成的对象是`{ for: 1, bar: 2}`

1.  也可以用扩展运算符`...`来将一个对象展开

Page({ 
        data:{ 
            obj1:{ 
                a: 1,
                b: 2
            },
            obj2:{ 
                c: 3,
                d: 4
            }
        }
    })

最终组合成的对象是`{a: 1, b: 2, c: 3, d: 4, e: 5}`

1.  如果对象的key和value相同, 也可以间接地表达

Page({ 
        data:{ 
            foo:'my-foo',
            bar:'my-bar'
        }
    })

最终组成的对象是`{foo: 'my-foo', bar: 'my-bar'}`

1.  花括号和引号之间如果有空格, 将最终被解析成为字符串

等同于

### 2.列表渲染 ###

#### 2.1 wx:for ####

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

默认数组的当前项的小标变量名默认为`index`, 数组当前项的变量名默认为`item`

<view wx:for="{ {array1}}">{
       {index}}:{
       {item}}</view>
    <view wx:for="{ {array2}}">{
       {index}}:{
       {item.message}}</view>

Page({ 
        data:{ 
            array1:[1,2,3,4,5],
            array2:[{ 
                message:'foo',
            },{ 
                message:'bar'
            }]
        }
    })

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

<view wx:for="{ {array}}" wx:for-index="idx" wx:for-item="itemName">
    	{
       {idx}}: {
       {itemName.message}}
    </view>

2.1.3 `wx:for`也可以嵌套, 下边是一个九九乘法表

#### 2.2 block wx:for ####

类似`block wx:if`, 也可以将`wx:for`用在`<block/>`标签上, 以渲染一个包含多节点的结构块.

<block wx:for="{ {[1,2,3]}}">
    	<view>{
       {index}}</view>
        <view>{
       {item}}</view>
    </block>

#### 2.3 wx:key ####

如果列表中项目的位置会动态改变或者有新的项目添加到列表中, 并且希望列表中的项目保持自己的特征和状态(如input中的输入内容, switch的选中状态), 需要使用`wx:key`来指定列表中项目的唯一标识符.

#### 注意: 当`wx:for`的值为字符串时, 会将字符串解析成字符串数组 ####

### 3.条件渲染 ###

<view wx:if="{ {view == 'w'}}">wang</view>
    <view wx:elif="{ {view == 's'}}">sheng</view>
    <view wx:else="{ {view == 'n'}}">nan</view>

Page({ 
        data:{ 
            view:'w'
        }
    })

### 4.模板 ###

<template name="staffName">
        <view>
        	FirstName:{
       {firstName}}, LastName:{
       {lastName}}
        </view>
    </template>
    <template is="staffName" data="{ {...staffA}}"></template>
    <template is="staffName" data="{ {...staffB}}"></template>
    <template is="staffName" data="{ {...staffC}}"></template>

Page({ 
        data:{ 
            staffA:{ firstName:'Hulk',lastName:'Hu'}
            staffB:{ firstName:'Shang',lastName:'You'}
            staffC:{ firstName:'Gideon',lastName:'Lin'}
        }
    })