WXML编译

WXML语法结构

网页编程一般采用的是HTML + CSS + JS的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。

同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。打开 pages/index/index.wxml目录后，你会看到如下的内容:

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <block wx:if="{{canIUseOpenData}}">
      <view class="userinfo-avatar" bindtap="bindViewTap">
        <open-data type="userAvatarUrl"></open-data>
      </view>
      <open-data type="userNickName"></open-data>
    </block>
    <block wx:elif="{{!hasUserInfo}}">
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
      <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
      <view wx:else> 请使用1.4.4及以上版本基础库 </view>
    </block>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

这是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。 WXML 文件后缀名是 .wxml ，简单的 WXML语句在语法上同 HTML 非常相似。WXML 要求标签必须是严格闭合的，没有闭合将会导致编译错误。属性也是大小写敏感的，也就是说class和 Class 在 WXML 中是不同的属性。

所有的标签都有一些相同的行内属性

• id
• style
• class
• data-*
• hidden
• bind*/catch*

数据绑定

在 Web 开发中，开发者使用 JavaScript 通过 Dom 接口来完成界面的实时更新。 在小程序中，使用 WXML 语言所提供的数据绑定功能，来完成此项功能。WXML 通过 来绑定 WXML 文件和对应的javaScript文件中的data对象属性。

逻辑语法

通过 语法可以使得 WXML 拥有动态渲染的能力，除此外还可以在 内进行简单的逻辑运算。

• 三元运算
• 算数运算
• 字符串的拼接
• 放置常量（数字、字符串或者是数组）

条件逻辑

WXML 中，使用if-else来判断是否需要渲染该代码块：

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

列表渲染

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为 item。

模板

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

引用

WXML 提供两种文件引用方式import和include。

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