以index.wxml为例解析WXML

一个小程序框架页面文件由4个文件组成，其中就包含wxml，wxml和js一样都是必填的。其作用是配置页面结构。
基本语法

<!-- 在此处写注释 -->

<标签名 属性名1="属性值1" 属性名2="属性值2" ...> ...</标签名>

所有组件的公共属性（我认为最常用的，也是写这个小程序用到的）：

结合我们的小程序看一看具体的用法：
数据绑定：

<view style='width:100%;margin:0 auto;text-align:center;font-size:34rpx;margin-bottom:10rpx;'>{{s_awards}}</view>

先解释一下 style 是组件的内联样式属性
text-align:cente 文字居中
font-size: 34rpx 行高=字的高度
那么，重要的是
数据绑定使用 Mustache 语法（双大括号）将变量包起来
在index.js层找到
所以此时，等价于<view>?</view>
显示是这样的

js层s_awards改变
s_awards: e.detail.end ? “？” : e.detail.s_awards,
显示也改变

在写小程序是，需要注意如下几点

1. {{}}内可以进行简单的逻辑运算
2. {{}}可以直接放置数字、字符串、或者是数组
3. 变量名是大小写敏感
4. 没有被定义的变量的或者是被设置为 undefined 的变量不会被同步到 wxml

条件渲染

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

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性，例如程序的两个button组件标签都用view给包装起来。
示例代码：

   <view class='juedinoption' wx:for='{{xiaojuedingArr}}' wx:key='key' wx:if='{{index<3 && share}}' bindtap='xiaojueding' data-idx='{{index}}'>{{item.option}}</view>
   <view class='share' wx:if='{{!share}}'>
      <button class="index__share" openType="share">
         转发给朋友
      </button>
      <button class="index__share" bindtap='generate'>
         分享到朋友圈
      </button>
   </view>

实现的效果呢，当share为true 且 index<3的时候：

share为false：

除此之外，还可以使用 wx:elif 和 wx:else 来添加一个 else 块。本项目中并没有使用。

列表渲染
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。
类似于编程语言数组遍历，具体的例子就是条件渲染的第一个中，用到了。