# WXML语法结构
首先我们需要下载微信开发者工具。
打开开发者工具后，首先新建一个项目，选择左侧菜单中小程序按钮，点击右侧加号进行创建。
创建的时候需要填写一些信息，比如路径、APPID等。待创建完成后，你会看到和下方一样的官方界面。我们通过官方给的这个基础项目来慢慢的深入了解。
我们可以直接在微信开发者工具中查看到渲染出来的页面、项目目录结构、控制台等。此处的控制台操作与平常开发中使用的浏览器的控制台十分相似。
在项目目录结构中可以看到/pages中分为两个页面结构。index、logs。index则为上面看到的入口页面，点击头像会跳转至logs操作日志页面。
这里顺便提一下其中的app.js文件，打开根目录的小程序实例注册文件app.js。文件中App实例方法有绑定生命周期回调函数、错误监听和页面不存在监听函数、全局参数等等。结构如下：
可以看到除了生命周期之类的回调函数，调用了很多wx.xx的方法，开发过公众号h5点同学应该很熟悉，微信SDK API。微信集成了很多方法以SDK的方式开放给开发者来使用，正是以wx. 的方式调用。小程序中也是一样的，但是api多了很多，放这里一个传送门 。
在大概了解了基础目录结构之后，我们具体看一下WXML文件。
网页编程一般采用的是HTML + CSS + JS的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。
同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。打开 pages/index/index.wxml目录后，你会看到如下的内容:
一眼看上去之后，是不是有种感觉，文件结构与HTML类似，与VUE更像，一些语法类似wx:if 这样的写法也有很多，都是这样写在模版文件中的。
但是还有很多不一样的地方，可以很明显的看到的是<View />标签。我们没有在别的文件中见过这样的标签，再看看其他微信小程序自带的一些组件写法<block />、<text />等等。那么这些是什么呢。
这是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。 WXML 文件后缀名是 .wxml ，简单的 WXML语句在语法上同 HTML 非常相似。WXML 要求标签必须是严格闭合的，没有闭合将会导致编译错误。属性也是大小写敏感的，也就是说class和 Class 在 WXML 中是不同的属性。
WXML肯定是有自己独特的“个性”的，先看一下wxml具体的使用方式，通过具体的使用方式来对比一下和Web中html的区别。
# 行内属性
所有的标签都有一些相同的行内属性
idstyleclassdata-*hiddenbind*/catch*
# 数据绑定
在 Web 开发中，开发者使用 JavaScript 通过 Dom 接口来完成界面的实时更新。 在小程序中，使用 WXML 语言所提供的数据绑定功能，来完成此项功能。WXML 通过 {{变量名}} 来绑定 WXML 文件和对应的javaScript文件中的data对象属性。
# 逻辑语法
通过{ 变量名 } 语法可以使得 WXML 拥有动态渲染的能力，除此外还可以在 "{}" 内进行简单的逻辑运算。
三元运算算数运算字符串的拼接放置常量（数字、字符串或者是数组）
# 条件逻辑
WXML 中，使用if-else来判断是否需要渲染该代码块：
# 列表渲染
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为 item。
# 模板
WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。使用 name 属性，作为模板的名字。然后在<template />内定义代码片段。
