[小程序开发] wxml语法

一、声明和绑定数据

        小程序中使用的数据均需要在Page()方法的data对象中进行声明定义。

        在WXML使用Mustache语法（双大括号{{  }}）将变量包起来，从而进行数据绑定。

在{{  }}语法中，只能写表达式，不能写语句，也不能调用js相关的语法。

<!-- 展示数据 -->
<view>{{ name }}</view>

<!-- 绑定属性值 -->
<checkbox checked="{{true}}"/>

 二、修改数据

        通过调用setData()方法进行修改，setData()接收对象作为参数，key是需要修改的数据，value是最新的值。

        setDate()方法作用：

           1、更新数据

           2、驱动视图更新

        不推荐使用赋值的方法进行修改，通过赋值的方式修改数据无法改变页面的数据。

•  修改/新增

this.setData({
            //如果对象新增属性，可以将key写成数据路径的方式
            'userInfo.name':"tom",
            'userInfo.age':10
        })

简化新增和修改，使用ES6提供的展开运算符或Object.assign()方法 。

         //ES6提供的展开运算符...
        //通过展开运算符能够将对象中的属性复制给另一个对象，后面的属性会覆盖前面的属性
        const userInfo={
            ...this.data.userInfo,
            name:"jerry",
            age:18
         }
        this.setData({userInfo:userInfo}) //键和值一样可简写为this.setData({userInfo})

        //Object.assign()方法
        //将多个对象合并为一个对象
        const userInfo=Object.assign(this.data.userInfo,{name:"tom"},{age:18})
        this.setData({userInfo:userInfo})//键和值一样可简写为this.setData({userInfo})

• 删除

        //删除单个属性
        delete this.data.userInfo.age
        this.setData({
            userInfo:this.data.userInfo
        })
        //删除多个属性，可以使用ES6提供的rest剩余参数
        const{name,age,...rest}=this.data.userInfo
        this.setData({
            userInfo:rest
        })

 三、修改数组类型数据

•   新增

updateList(){
        // 新增数组元素
        // push方法
        this.data.list.push(6)
        this.setData({list:this.data.list})
        // concat方法
        const newList=this.data.list.concat(7)
        this.setData({list:newList})
        // 使用展开运算符
        const newList=[...this.data.list,8]
        this.setData({list:newList})
    }

• 修改

        // 修改数组元素
        //方法一
        this.setData({"list[1]":6})
        //方法二
        this.setData({"list[0].name":"jerry"})
 

• 删除

        // 删除数组元素
        // 方法一
        this.data.list.splice(1,2)
        this.setData({list:this.data.list})
        //方法二
        const newList=this.data.list.filter(item=> item!==2)
        this.setData({list:newList})

四、双向数据绑定

         即用户输入的数据可以改变页面，在对应属性之前添加model:前缀。

<!-- 数据单向绑定，数据能够影响页面，但是页面更新不会影响到数据 -->
<input type="text" value="{{value}}"/>
 
<!-- 数据双向绑定，数据能够影响页面，页面更新也会影响到数据 -->
<!-- 添加model:属性 -->
<input type="text" model:value="{{value}}"/>

五、列表渲染

        通过循环遍历一个数组或对象，将其中的每个元素渲染到页面上。可通过使用wx.for属性绑定一个数组或对象，可使用每一项数据重复渲染当前组件，每一项的变量名默认为item，下标变量名默认为index。

<!-- 渲染数组，item：数组的每一项，index：下标 -->
<view wx:for="{{numList}}">{{item}}-{{index}}</view>
<!-- 渲染对象，item:对象属性的值，index：对象属性 -->
<view wx:for="{{obj}}">{{item}}-{{index}}</view>

使用wx.for遍历时，建议加上wx:key属性，添加wx:key属性值时，不需要使用双大括号语法，直接使用遍历的array中item的某个属性。

wx.key的值以两种形式提供：

1、字符串：代表需要遍历的array中item的某个属性，该属性的值需要是列表中唯一的字符串或数字，且不能动态改变。

2、保留关键字*this代表在for循环中的item本身，当item本身是一个唯一的字符串或数字时可以使用。

<!-- wx:key两种添加方式 -->
<!-- 方式1，写成字符串，需要是遍历的数组中item的某个属性，要求该属性是列表中唯一的字符串或数字，不能进行动态改变。 -->
<view wx:for="{{fruitList}}" wx:key="id">{{item.name}}</view>
<!-- 方式2，保留关键字*this，*this代表的是item本身，item本身是唯一的字符串或数字。 -->
<view wx:for="{{numList}}" wx:key="*this">{{item}}</view>

六、更改默认的变量名和下标

        可以使用wx:for-item和wx:for-index对默认的变量名和下标进行更改。

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

<!-- 更改默认的变量名和下标(数组) -->
<view wx:for="{{fruitList}}" wx:key="id" wx:for-item="fruitItem" wx:for-index="fruitIndex">
	{{fruitIndex}}-{{fruitItem.name}}
</view>
<!-- 更改默认的变量名和下标(对象) -->
<view wx:for="{{obj}}" wx:key="index" wx:key="id" wx:for-item="value" wx:for-index="key">	
	{{key}}-{{value}}
</view>

七、渲染一个包含多个节点的结构块

        在<block/>标签上使用wx:for。

• <block/>并不是一个组件，仅是一个包装元素，不会在页面上做任何渲染，只接受控制属性（可以在页面中展示，但是在调试器WXML中不展示）
• <block/>在wxml中可用于组织代码结构，支持列表渲染、条件渲染等。

<block wx:for="{{fruitList}}" wx:key="id" wx:for-item="fruitItem" wx:for-index="fruitIndex">
	<view >名字：{{fruitItem.name}}</view>
	<view>价格：{{fruitItem.price}}</view>
</block>

八、条件渲染

        主要用来控制页面结构的展示和隐藏，在微信小程序中实现条件渲染有两种方式：

        1、使用wx:if 、wx:elif、wx:else属性组

<view wx:if="{{num===1}}">num等于{{num}}</view>
<view wx:elif="{{num===2}}">num等于{{num}}</view>
<view wx:else>num大于2，num等于{{num}}</view>

        2、使用hidden属性

<!-- 定义isFlag为true -->
<view hidden="{{ !isFlag }}">如果isFlag是true则展示结构，否则隐藏结构</view>

两者区别：

1、wx:if：当条件为true时将结构展示出来，否则结构不会进行展示，通过移除/新增节点的方式实现。

2、hidden：当条件为true时会将结构隐藏，否则结构会展示出来，通过display样式属性来实现(display:none)。