本篇文章，带大家来了解一下，wxml基本语法，与html相同的部分就不说了，默认你已掌握了，如果没有掌握，那就先去学学，或者留言，我给你点资料。
wxml语法帮助文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/
1.数据绑定
WXML 中的动态数据来自对应 Page 的 data设置，使用 Mustache 语法，即双大括号模式
{{变量名}}
<view>{{test}}</view>
在index.js中键入如下代码：
Page({ data: { test: '老杨学堂' } })
保存，即可在模拟器中看到显示 老杨学堂 这几个字，如图示：
太简单了是吧，只要格式写对，括号没有问题，那就没有问题。
但这有何意义？在wxml页面直接写 “老杨学堂”几个字不香吗？为什么还要费用做数据绑定。这是因为，数据绑定技术，将js业务逻辑数据通过数据绑定显示到wxml页面，实现了动态数据，将来我们无论是网络获取的数据还是用户输入的数据，都将通过这种方式进行数据传递，实现动态交互。
数据绑定也可以是表达式
在index.wxml文件中键入
<view>{{age+10<30?'成家立业':'自由活动'}}</view>
在index.js文件中键入：
Page({ data: { test: '老杨学堂', age:22 } })
在页面显示什么，自由活动。
其他的各位可以参考文档自由测试一下。
补充一下，数据绑定可能会出现在标签的多个位置，包括属性值，样式值等，为标签的显示渲染提供了多种可能性，为wxml页面灵活控制提供了有力支持。
2.wx:if条件渲染
在wxml页面用到条件语句来控制组件显示时，需要用到wx:if语句，
格式是：
wx:if="{{逻辑语句}}"
示例：
<view wx:if="{{age>18}}"> 成人 </view> <view wx:elif="{{age<12}}"> 儿童 </view> <view wx:else> 青少年 </view>
还可以做另外一种写法，需要用到< block>标签，block标签本身并无实际意义，最终不会在页面留下任何东西，只是为了包装控制语句
<block wx:if="{{age>18}}"> <view> 成人 </view> </block> <block wx:elif="{{age<12}}"> <view> 儿童 </view> </block> <block wx:else> <view> 青少年 </view> </block>
以上种写法完全一样，你喜欢哪种写法呢？
3.wx:for列表渲染
列表展示是目前各种移动应用必备布局，需要熟练掌握应用
首先准备一下列表数据，即数组数据，在index.js页面，data节内进行如下配置
Page({ data: { test: '老杨学堂', age: 1, items: [{ text: 'red', color: '#f00' }, { text: 'green', color: '#0f0' }, { text: 'blue', color: '#00f' } ] } })
在index.wxml页面进行展示，代码如下：
<block wx:for="{{items}}" wx:key="*this"> <view style="color:{{item.color}}"> {{item.text}} </view> </block>
展示效果如图：
简单解释一下：
wxml页面中的wx:for="{{items}}"，items要与page中的items键对应，当然，你也可以用别的名字
item 代表是for循环中的每一项，这个不能换，如果要换成别的名字，必须显示指定。
wx:key是指定列表中项目的唯一的标识符，通常用*this表示，代表当前循环对象。
我们再来看，指定循环对象的名字和索引怎么做
在index.wxml页面代码如下：
<block wx:for="{{items}}" wx:key="*this" wx:for-item="style" wx:for-index="myIndex"> <view style="color:{{style.color}}"> {{myIndex+","+style.text}} </view> </block>
展示效果如图：
OK，这篇文章就到这了，有问题，请留言！