2、视图-wxml

1、视图层

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

2、数据绑定

3、条件渲染**

3.1wx：if判断单个组件

1.wx:if="{{true/false}}"

wx:elif="{{}}"

wx:else ="{{}}"

2.hidden 也起到类似的作用，根据条件决定是否渲染

<view wx:if="{{false}}">显示</view>
<view wx:elif="{{true}}">不显示</view> 
<view hidden="{{false}}">hidden</view>

 

3.两者区别

前者通过直接把标签从页面结构移除来切换显示

后者是通过添加样式来切换显示，hidden属性不要和样式display一起使用

4、如果想控制多个组件标签，就用<block>给包起来，仅仅是一个包装元素，只接受控制属性。

4、列表渲染

4.1wx：for列表渲染单个组件

项的变量名默认为 item wx:for-item 可以指定数组当前元素的变量名

下标变量名默认为 index wx:for-index 可以指定数组当前下标的变量名

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

 

4.2列表渲染多个组件

想渲染一个包含多节点的结构快block，需要wx：dor应用在<block/>标签上

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

4.3wx:key指定唯一标识符

列表中的项目的位置会动态改变或者有新的项目添加到列表中，希望列表中的项目保持自己的特征，指定key可以唯一标识

5、定义模板

可以把一些共用、复用的代码，在模板中定义，然后在其他地方调用

5.1定义模板

在模板的下面新建一个template.wxml，</template>中定义代码片段，name属性命名模板

<template name="msgltem">
    <view class="xt">
    {{week}}:{{type}}
    </view>
</template>

 

5.2使用模板

在wxml文件中，用is属性，声明需要使用的模板，然后将模板所需要的data传入，需要import导入相对路径下的目标文件

<import src="../template/temp.wxml"/>
<template is="msgltem" data="{{...item}}"></template>
#注意那个...  
如果想给这个模板添加样式，可以在5.1中给class命名下，在在wxss中定义样式
.xt{
  font-size: 21px;
  text-align: center;
  margin-top: 20rpx;
}

 

is属性可以使用三元运算语法，来动态决定渲染哪个模板

<template name="msgltem">
    <view class="xt">
    aa
    </view>
</template>
<template name="msgitem">
    <view class="xt">
    bb
    </view>
</template>
​
<block wx:for="{{[1,2,3,4]}}">
        <template is="{{item%2==0?'msgltem':'msgitem'}}" ></template>
      </block>
#最近的item表示的是列表渲染中的变量名

6、wxml引用功能

wxml提供两种文件引用方式：import和include

区别：import引用模板文件，include可以将目标文件除了<template/>的整个代码引入，相当于是复制到include位置