小程序 三、 wxml、组件

WXML是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。需要注意的是WXML中的属性是大小写敏感的，也就是说Class和class在WXML中是不同的属性。

一、与HTML的区别
       HTML，经常会用到div、p、span等，开发者会根据基础的标签组合出不一样的组件。
       在网页的一般开发流程中，通常会通过JS操作DOM(对应的HTML的描述产生的树)，以引起界面的一些变化相应用户的行为。例如，用户点击某个按钮的时候，JS会记录一些状态到JS变量里边，同时通过DOM API操控DOM的属性或者行为，进而引起界面的一些变化。当项目越来越大的时候，你的代码会充斥着非常多的界面交互逻辑和程序的各种变量，显然不是一个很好的开发模式。
       WXML，常用的标签是view、button、text等，还提供了地图、视频、音频等等组件能力。
       因为HTML的缺点，因此就有了MVVM的开发模式(React、Vue),提倡把渲染和逻辑分离，就是不要让JS直接操控DOM，JS只需要管理状态即可，然后通过一种模板语法来描述状态和页面结构的关系即可。
       通过{{}}语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要if/else、for等控制能力，在小程序里边，这些控制能力都用wx:开头的属性来表达。

1.wx:if条件选择，用于wxml

1.if搭配view
<view wx:if="{{boolean==true}}">
  <view class="bg_black"></view>
</view>
<view wx:elif="{{bloolean==false}}">
<view class="bg_red"></view>
</view>
2.if搭配block
<block wx:if="{{boolean==true}}">
  <view class="bg_block"></view>
</block>
<block wx:elif="{{boolean==false}}">
  <view class="bg_red"></view>
</block>
<block wx:else>
<view class="bg_red"></view>
</block>

2.wx:key wx:for
第一张:wx:key="string"，代表在for循环的array中的item的某个property。

共同属性
id                        String                组件的唯一标识
class                   String                组件的样式类
style                   String                组件的内联样式
hidden                Boolean            组件是否显示
data-XX              Any                   自定义属性
bindX/catchX      EventHandler   组件的事件