小程序快速入门：wxml的使用

基本语法

基本语法如下：

<标签名 属性名1="属性值1" 属性名2="属性值2" ...> 内容/其他wxml</标签名>

几个特点：
1.严格闭合
2.属性名和绑定数据大小写敏感
3.数据绑定必须使用双大括号
4.属性名除特殊属性外，都使用key＝ "value"，value使用双引号包含

数据绑定

什么是数据绑定：WXML 通过 {{变量名}} 来绑定 WXML 文件和对应的 JavaScript 文件中的 data 对象属性。

数据绑定的作用：动态渲染页面。

浏览器的web开发中，javascript可以通过调用dom对象来更新页面，比如document对象获取对应id的节点然后增删改对应的节点。但是，通过小程序的架构可以了解到，小程序中没有dom对象，所以通过操作dom来动态渲染，而是通过数据绑定+setData()+内部机制来动态渲染。

数据绑定的使用场景：
1、单纯的数据绑定
2、属性绑定
3、算数运算
4、逻辑运算

注意两点：
1.变量区分大小写，也就是说time和Time是两个变量;
2.没有被定义的变量的或者是被设置为 undefined 的变量不会被同步到 wxml 中；
3.属性需要使用双引号括起来；

举个栗子：
js文件：

// 定义一个本文件中的全局变量
var shouldRed = false;
Page({
  data: {
    // text:"这是一个页面"
    color: "window-red",
    msg: "hello world"
  },

  //文字点击函数 
  click: function () {
    shouldRed = !shouldRed;
    if(shouldRed) {
      this.setData({color: "window-red" });
    } else {
      this.setData({color: "window" });
    };
  }
})

wxml文件：

<view>
    //catchtap=catch+tap=不向下层传递的触摸时间
    <text catchtap="click" class="{{color}}">{{msg}}</text>
    // 变量绑定+逻辑运算
    <text>{{'\nhello' + 'world'}}</text>
    <text>{{'\nhello ' + (1+1)}}\n</text>
    <text>{{1+1}} + {{2*2}} = 6</text>
</view>

wxss文件：

// 蓝色文字的样式
.window {
  color: #4995fa
}

// 红色文字的样式
.window-red {
  color: #fa4961
}

结果：

数据绑定

条件语法(if else)

WXML 中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：

<view wx:if="{{condition1}}">condition1为ture</view>

使用 wx:elif 和 wx:else 来添加一个 else 块：

<view wx:if="{{length == 5}}">length为5</view>
<view wx:elif="{{length == 3}}">length为3</view>
<view wx:else="{{length == 1}}">length为1</view>

如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性：

<block wx:if="{{condition2 == false}}">
<view>condition2为false</view>
<view>condition2为false</view>
</block>

js文件中：

Page({
  data: {
    condition1: true,
    length: 3,
    condition2: false,
  }
})

结果：

条件语法

列表渲染(for循环)

可以使用for循环多次渲染一个组件，也就是创建多个组件。其中，默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。
举个例子：
js：

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }, {
      message: '123'
    }, {
      message: '123'
    }, {
      message: '123'
    },]
  }
})

wxml：

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

结果：

列表渲染

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

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

类似 block wx:if ，也可以将 wx:for 用在 <block/> 标签上，以渲染一个包含多节点的结构块。例如：

<block wx:for="{{['a', 'b', 'c']}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

结果：

block-for

列表渲染中key值的使用：

模板

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。使用 name 属性，作为模板的名字。template的定义如下：

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

使用template时，使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如下：

<template name="testTemplate">
  <view>
    <text>template测试\n</text>
    <text>{{index}}:{{msg}}\n</text>
    <text>time:{{time}}</text>
  </view>
</template>

<view>
  <template is="testTemplate" data="{{index,msg,time}}"></template>
</view>

js：

Page({
  data: {
    index: 0,
    msg: 'this is a template',
    time: '2016-06-18'
  }
})

结果：

template

template的动态渲染：

<template name="single">
  <view> single </view>
</template>

<template name="double">
  <view> double </view>
</template>

<block wx:for="{{[1,2,3,4,5]}}">
  <template is="{{item % 2 == 0 ? 'double' : 'single'}}"></template>
</block>

结果：

template动态渲染

引用

import：import 可以在该文件中使用目标文件定义的 template，但是import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件中 import 的 template，简言之就是 import 不具有递归的特性。
include：include 可以将目标文件中除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置

共同属性

所有wxml 标签都支持的属性称之为共同属性

共同属性