微信标签语言之页面结构文件--数据绑定、条件渲染

页面结构文件

WXML(weixin markup language)是框架设计的一套标记语言，用于渲染界面，WXML的渲染原理，通过一套标记语言，在不同平台被解析为不同端的渲染文件。

WXML具有数据绑定、列表渲染、条件渲染、模板、事件等能力。

1. 数据绑定

小程序中页面渲染时，框架会将WXML文件同对应Page的data进行绑定。

1.1 简单绑定

<view>{{text}}</view>

<!--pages/static/third/third.wxml-->
<text>数据绑定</text>
<!--作为内容-->
<view>{{content}}</view>
<!--作为组件属性-->
<view id="item-{{id}}" style="border:{{border}}">作为渲染属性</view>
<!--作为控制属性-->
<view wx:if="{{showContent}}">作为渲染属性</view>
<!--关键字-->
<view>{{2}}</view>
<checkbox checked='{{false}}'></checkbox>

/**
   * 页面的初始数据
   */
  data: {
    border:'solid 1px #000',
    id:1,
    content:'内容',
    showContent:false
  }

1.2 运算

在{{}}内可以做一些简单的运算，支持的运算有三元运算、算数运算、逻辑判断、字符串运算，这些运算均符合js规则。

1.3 组合

data中的数据可以在模板再次组合成新的数据结构，这种组合常常在数组或对象中使用。

2. 条件渲染

2.1 wx：if="{{判断条件}}"

<view wx:if="{{number1>23}}">你的年龄大于23</view>
<view wx:elif="{{number1==23}}">你的年龄等于23</view>
<view wx:else>你的年龄小于23</view>

2.2 block wx：if

wx: if是一个控制属性，可以添置在任何组件标签上，但如果需要包装多个组件，又不影响布局，这时就需要使用<block/>标签将需要包装的组件放置在里面，通过wx：if作判断。<block/>不是一个组件，仅仅是一个包装元素，页面渲染过程中不做任何渲染，由属性控制。

2.3 wx：if与hidden

两者都可以决定组件是否显示，两者之间的区别在于：wx：if控制是否渲染条件块内的模板，当其条件值切换时，会触发局部渲染以确保条件块在切换时销毁或重新渲染。而hidden控制组件是否显示，组件始终会被渲染，只是简单控制显示与隐藏，并不会触发重新渲染和销毁。

由于wx：if会触发框架局部渲染过程，在频繁切换状态的场景中，会产生较大的消耗，此时应尽量使用hidden；在运行时条件变动不大的场景中我们使用wx：if，这样能够给保证页面的高效的渲染，而不用把所有组件都渲染出来。

2.4 列表渲染

wx：for=“{{}}” 组件的wx:for控制属性用于遍历数组，重复渲染该组件，遍历过程中当前项的下标变量名默认为index，数组当前项变量名默认为item

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


data: {
    myArray:['xu','shuai']
  }

wx：for-index

wx：for-item

<view wx:for="myArrayObject" wx:for-item="myItem" wx:for-index="myIndex">{{myIndex}}:{{myItem}}</view>


data: {
    myArrayObject:[{name:'xushuai'},{name:'zhudapang'}]
  }

<view wx:for="{{myArrayObject}}" wx:for-item="myItem" wx:for-index="myIndex">{{myIndex}}:{{myItem.name}}</view>

须知，一般我们不必修改index、item变量名，当当wx:for出现多层嵌套使用时，就有必须要设置变量名。

<view wx:for="{{mySecArray}}" wx:for-index="myIndex" wx:for-item="myItem">
  <block wx:for="{{myItem}}" wx:for-index="subIndex" wx:for-item="subItem">
    {{subItem}}
  </block>
</view>


mySecArray:[['ww','rr','tt'],['ff','gg','tr']]

微信标签语言之页面结构文件--数据绑定、条件渲染

猜你喜欢