微信小程序_文档_03_框架_视图层_WXML_数据绑定_列表渲染_事件处理

视图层

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。

将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。

WXML(WeiXin Markup language) 用于描述页面的结构。

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

WXSS(WeiXin Style Sheet) 用于描述页面的样式。

组件(Component)是视图的基本组成单元。

WXML

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

用以下一些简单的例子来看看 WXML 具有什么能力：

数据绑定

<!--wxml-->
<view> {
  {message}} </view>

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

列表渲染

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

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

条件渲染

<!--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'
  }
})

模板

<!--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'}
  }
})

事件

<view bindtap="add"> {
  {count}} </view>

Page({
  data: {
    count: 1
  },
  add: function(e) {
    this.setData({
      count: this.data.count + 1
    })
  }
})

具体的能力以及使用方式在以下章节查看：

数据绑定、列表渲染、条件渲染、模板、事件、引用

数据绑定

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

简单绑定

数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：

内容

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

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

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

<view id="item-{
    {id}}"> </view>

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

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

<view wx:if="{
    {condition}}"> </view>

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

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

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>

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

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

逻辑判断

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

字符串运算

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

Page({
  data:{
    name: 'MINA'
  }
})