WXML（WeiXin Markup Language）是框架设计的⼀套标签语⾔，结合基础组件、事件系统，可以构建出⻚⾯的结构。

1. 数据绑定

1.1 普通写法

1. view 相当于 html中的div 标签，text 相当于html标签中的span标签。

<view>
    {{msg}}
</view>

 data: {
        msg: "hello mina"
}

1.2 组件属性

  <view id="item-{{id}}"> </view>

Page({
    data: {
        id: 0
    }
})

1.3 bool类型

1. 不要直接写 checked= false ，其计算结果是⼀个字符串

 <!--  这样的写法将被当成是字符串处理 - ->
<checkbox checked="{{false}}"> </checkbox>

2. 运算

2.1 三元运算

<!-- 三元运算符 -->
<view>
    {{ 11 % 2 ===0 ? '偶数' : '奇数' }}
</view>

2.2 算数运算

<view> {{a + b}} + {{c}} + d </view>

Page({
    data: {
        a: 1,
        b: 2,
        c: 3
      }
})

2.3 逻辑判断

  <view wx:if="{{length > 5}}"> </view>

2.4 字符串运算

    <!--  字符串运算  -->
    <view>
      {{ '1' + '1'}}
    </view>

2.5 注意

1. 花括号和引号之间如果有空格，将最终被解析成为字符串;

3. 列表渲染

3.1 wx:for

1. 项的变量名默认为 item wx:for wx:for-item 可以指定数组当前元素的变量名。

2. 下标变量名默认为 index wx:for wx:for- index 可以指定数组当前下标的变量名。

3. wx:key ⽤来提⾼数组渲染的性能。

3.2 wx:key 绑定的值有如下选择:

1. String类型，表示循环项中的唯一属性，如:

  list:[{id:0,name:"炒饭"},{id:1,name:"炒面"}]
  wx:key="id"

2. 保留字 this ，它的意思是 item 本⾝ ，this 代表的必须是 唯⼀的字符串和数组。

    list:[1,2,3,4,5]
    wx:key="*this"

3. wx:for 列表渲染代码 :

    <!-- 
    8 . 列表循环 
        wx:for = "{{数组或者对象}}"
        wx:key 绑定一个普通字符串的时候那么这个字符串名称肯定是循环数组中的对象的唯一属性
            wx:key="*this" 就表示你的数组是一个普通的数组 *this 表示是循环项
        当出现数组的嵌套循环的时候尤其注意以下绑定的名称不要重名
        默认情况下我们不写 wx:for-item="item" wx:for-index="index" 小程序也会将循环项的名称和索引名称分别 表示为 item 和 index  
 -->

 <view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="*this">
     索引 {{index}} ---> 值:{{item}}
 </view>


<!--  9. 对象循环 
        wx:for="{{对象}}" wx:for-item="对象的值" wx:for-index="对象的属性"
  -->

  <view wx:for="{{person}}" wx:for-index="value"  wx:for-item="key" wx:key="">
      属性:{{key}} --->
      值:{{value}}
  </view>

  <!--  10. fragment
            是一个占位符标签
            写代码的时候是存在的
            页面渲染的时候就会将其移除掉  -->
<block wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="*this">
     索引 {{index}} ---> 值:{{item}}
 </block>

    Page({

    /**
     * 页面的初始数据
     */
    data: {
        person: {
            age: 123,
            name: "张三",
            height: 1.66
        }
    },
})

3.3 block 标签

1. 渲染⼀个包含多节点的结构块�block最终不会变成真正的dom元素。

<block wx:for="{{[1, 2, 3]}}" wx:key="*this" >
      <view> {{index}}: </view>
      <view> {{item}} </view>
</block>

4 条件渲染

4.1 wx:if

1.在框架中，使⽤ wx:if="{{condition}}" 来判断是否需要渲染该代码块：

     <!--  11. 条件渲染  
            wx:if="{{true/false}}"
            if else if else 
            wx:if
            wx:elif
            wx:else

            hidden 属性
                在标签上直接加入属性hidden
                hidden = "true" 
            什么场景下用哪个
                当标签㐊频繁切换显示优先使用wx:if
                    直接将标签从页面结构中移除
                当标签频繁的切换显示的时候优先使用 hidden 
                    通过添加样式的方式进行显示和隐藏的
                    hidden属性不要和样式属性 display属性使用
 -->    

 <view>
     
     <view> 条件渲染</view>

     <view wx:if="{{false}}">
        显示
    </view>

     <view wx:elif="{{false}}">
         隐藏
     </view>
     
     <view wx:else>
         最终的
     </view>
       
 </view>

4.2 hidden

<view>
    <view hidden>隐藏</view>
    <view hidden="{{false}}">显示</view>
</view>

1. 类似 wx:if。
2. 频繁切换 ⽤ hidde。
3. 非频繁切换使用 wx:if。

5. ⼩程序事件的绑定

1. 小程序中绑定事件，通过bind关键字来实现。如bindtap bindinput bindchange等，不同的组件支持不同的事件，具体看组件说明。

5.1 在wxml中编写

<input type="text" bindinput="handleinput"/>
<view>
  {{num}}
</view>

5.2 在js中编写

    Page({
    /**
     * 页面的初始数据
     */
    data: {
        num: 0
    },
    handleinput(e) {
        this.setData({
            num: e.detail.value
           });
      }
  })

5.3 微信小程序中的双向绑定实现点击 +或者-实现数字的加减。

5.3.1 wxml

   <!--  
   需要为input标签绑定一个input事件
     绑定关键字 bindinput
   如何获取输入框的值？
     通过函数传递的事件源对象获取 e.detail.value
   把输入框的值赋值到data中
     不能直接 使用 this.num = e.detail.value 或者 this.data.num = e.detail.num
   正确的赋值方式 :
     this.setData(
         num:e.detail.num
     ) 
-->

<input type="text" bindinput="handleinput"/>
<view>
 {{num}}
</view>

<!-- 
   需要加入一个点击事件 
     1. bindtap 表示单击事件
     2. 无法在小程序的事件中直接传递参数
     3. 需要通过自定义属性的方式来传递参数
     4. 事件源获取自定义属性
 -->

<button bindtap="handleTap" data-operation="{{1}}">+</button>
<button bindtap="handleTap" data-operation="{{-1}}">-</button>

5.3.2 js

    Page({
    /**
     * 页面的初始数据
     */
    data: {
        num: 0
    },
    handleinput(e) {
        this.setData({
            num: e.detail.value
        });
    },
    handleTap(e) {
        const operation = e.currentTarget.dataset.operation
        console.log(operation);
        this.setData({
            /*  注意这里面的 num 不能是 this.num 而是 this.data.num  */
            num: this.data.num + operation
        })
    }
})