微信小程序学习笔记（四）--框架-视图层

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

数据绑定

使用{{}}绑定数据。

简单绑定

<view class='first-container' bindtap='bindTapFunc'>
    FirstName:{{firstName}},lastName:{{lastName}}
  </view>

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

<view id='item-{{id}}' class='first-container' bindtap='bindTapFunc'>
    FirstName:{{firstName}},lastName:{{lastName}}
</view>

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

<view>
  <view wx:if="{{view==='WEBVIEW'}}">{{view}}</view>
  <view wx:elif="{{view==='APP'}}">{{view}}</view>
  <view wx:if="{{view==='MAC'}}">{{view}}</view>
</view>

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

true：boolean 类型的 true，代表真值。

false： boolean 类型的 false，代表假值。

<checkbox checked="{{false}}"> </checkbox>

特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。

运算

三元运算

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

算数运算

<view> {{a + b}} + {{c}} + d </view>

逻辑判断

<view wx:if="{{length > 5}}"> </view>

组合

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

参考文档

---

 

列表渲染

wx:for

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

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

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

这里页面上数据绑定的时候，试着把item换成了随便的字母，页面上就不能正常显示列表了，所以item应该是不可修改的值。

block wx:for

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

wx:key

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

参考文档

---

 

条件渲染

wx:if

在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块；也可以用 wx:elif 和 wx:else 来添加一个 else 块：

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

// page.js
Page({
  data: {
    view: 'MINA'
  }
})

block wx:if

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

wx:if vs hidden

参考文档

---

 

模板

定义模板

使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段，如：

<!--wxml-->
<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.js
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})

使用模板

<template>中的is用于确定需要套用哪一个template，data则为在template中展现的数据。

一个wxml文件里面可以定义多个<template></template>，用name来区分。

调用时，is取对应的name值即可引用对应的模板。

is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：

<!--index.wxml-->
<template name="staffName">
  <view class='first-container'>
    FirstName:{{firstName}},lastName:{{lastName}}
  </view>
</template>
<template name="anther">
  <view class='another-container'>
      FirstName:{{firstName}},lastName:{{lastName}}
  </view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="anther" data="{{...staffC}}"></template>

效果图：

模板的作用域

模板拥有自己的作用域，只能使用 data 传入的数据以及模版定义文件中定义的 <wxs /> 模块。