【微信小程序每日学习记录02】WXML模板语法

二、模板与配置

2.1 WXML 模板语法

2.1.1 数据绑定

1. 数据绑定的基本原则

• 在 data 中定义数据
• 在 WXML 中使用数据

2. 在 data 中定义页面的数据

在页面对应的 .js 文件中，把数据定义到 data 对象中即可：

// pages/list/list.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        // 字符串数据
        info: 'init data',
        // 数组类型数据
        msgList: [{msg: 'hello'},{msg: 'world'}]
    }
})

==注意：==js文件初始化数据时无需数据格式

3. Mustache 语法的格式

把data中的数据绑定到页面中渲染，使用 Mustache 语法（双大括号）将变量包起来即可。语法格式为：

<view>{{ 要绑定的数据名称 }}</view>

4. Mustache 语法的应用场景

• 绑定内容
• 绑定属性
• 运算（三元运算、算术运算等）

5. 动态绑定内容

// pages/list/list.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        // 字符串数据
        info: 'init data'
    }
})

<view>{{ info }}</view>

6. 动态绑定属性

// pages/list/list.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        // 图片网址数据
        imgSrc: "http://www.itheima.com/images/logo.png"
    }
})

<image src="{{imgSrc}}"></image>

7. 三元运算

// pages/list/list.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        // 生成 10 以内的随机数
        randomNum: Math.random() * 10
    }
})

<view>{{ randomNum >= 5 ? '大于等于5' : '小于5' }}</view>

8. 算数运算

// pages/list/list.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        // 生成一个带两位小数的随机数
        randomNum2: Math.random().toFixed(2)
    }
})

<view>生成100以内的随机数：{{ randomNum2 * 100 }}</view>

2.1.2 事件绑定

1. 事件

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理

2. 常用事件

3. 事件对象的属性列表

当事件回调触发的时候，会收到一个事件对象 event ，其详细属性如下：

4. target 和 currentTarget 的区别

target 是触发该事件的源头组件，而 currentTarget 则是当前事件所绑定的组件

点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层 view 的 tap 事件处理函数。

此时，对于外层的 view 来说：

• e.target 指向的是触发事件的源头组件，因此，e.target 是内部的按钮组件

• e.currentTarget 指向的是当前正在触发事件的那个组件，因此，e.currentTarget 是当前的 view 组件

5. bindtap 的语法格式

在小程序中，不存在 HTML 中的 onclick 鼠标点击事件，而是通过 tap 事件来响应用户的触摸行为

• 通过 bindtap ，可以为组件绑定 tap 触摸事件

  <button type="primary" bindtap="btnTapHandler">按钮</button>
  

• 在页面的 .js 文件中定义对应的事件处理函数，事件参数通过形参 event（一般简写成 e） 来接收

  Page({
      // 按钮的 tap 事件处理函数
      btnTapHandler(e){
          // 事件参数对象 e
          console.log(e)
      }
  })
  

6. 在事件处理函数中为data中的数据赋值

通过调用 this.setData(dataObject) 方法，可以给页面 data 中的数据重新赋值，实例如下：

// 页面的 .js 文件
Page({
    data: {
        count:0
    },
    // 修改 count 的值，每点击一次，累加一次
    changeCount(){
        this.setData({
            count: this.data.count + 1
        })
        console.log(this.data.count);
    }
})

<!-- pages/list/list.wxml -->
<button type="primary" bindtap="changeCount">按钮</button>

点击 按钮 之后，触发事件，在控制台打印 count 数据，每点击一次，累加一次

7. 事件传参

小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数，如下面的代码将不能正常工作：

<button type="primary" bindtap="btnHandler(123)">
    事件传参
</button>

这是因为小程序会把 bindtap 的属性值，统一当做事件名称来处理，相当于调用了一个名称为： btnHandler(123) 的事件处理函数

事件传参的方式可以为：

为组件提供 data-* 自定义属性传参，其中 * 代表的是参数名字

示例如下：

<!-- info 会被解析为参数的名字 -->
<!-- 数值2会被解析为参数的值 -->
<button bindtap="btnHandler" data-info="{{2}}">
    事件传参
</button>

而在事件处理函数中，通过 event.target.dataset.参数名 即可获取到 具体参数的值

示例代码如下：

btnHandler(event){
	// dataset 是一个对象，包含了所有通过 data-* 传递过来的参数项
    console.log(event.target.dataset);
    // 通过 dataset 可以访问到具体参数的值
    console.log(event.target.dataset.info);
}

示例结果如下：

点击按钮后，控制台会打印出 info 的值

8. bindinput 的语法格式

在小程序中，通过 input 事件来响应文本框的输入事件，语法格式如下：

<input bindinput="inputHandler"></input>

inputHandler(e){
    // e.detail.value 是变化过后，文本框最新的值
    console.log(e.detail.value);
}

测试结果如下：

9. 实现文本框和 data 之间的数据同步

实现步骤：

• 定义结构

Page({
    data: {
        msg:'你好'
    }
})

• 渲染结构

<input value="{{msg}}" bindinput="iptHandler"></input>

• 美化样式

input{
    border: 1px solid #eee;
    padding: 5px;
    margin: 5px;
    border-radius: 3px;
}

• 绑定 input 事件处理函数

iptHandler(e){
	this.setData({
        // 通过 e.detail.value 获取到文本框最新的值
        msg: e.detail.value;
    })
}

测试结果如下：

2.1.3 条件渲染

1. wx:if

使用 wx:if=“{{condition}}” 来判断是否需要渲染该代码块：

<view wx:if="{{condition}}">True</view>

也可以用 wx:elif 和 wx:else 来添加 else 判断：

<view wx:if="{{type === 1}}"> 男 </view>
<view wx:elif="{{type === 2}}"> 女 </view>
<view wx:else> 保密 </view>

2. 结合<block> 使用 wx:if

若要一次性控制多个组件的展示与隐藏，可以使用一个 <block></block> 标签将多个组件包装起来，并在 <block> 标签上使用 wx:if 控制属性，实例如下：

<block wx:if="{{true}}">
	<view> view1 </view>
    <view> view2 </view>
</block>

注意：<block>并不是一个组件，只是一个包裹性质的容器，不会在页面中做任何渲染

3. hidden

直接使用 hidden=“{{ condition }}” 也能控制元素的显示与隐藏

<view hidden="{{ condition }}"> 条件为 true 隐藏，条件为 false 显示</view>

4. wx:if 与 hidden 的对比

• 运行方式不同
  • wx:if 以 动态创建和移除元素的方式 ，控制元素的展示与隐藏
  • hidden 以 切换样式 的方式 (display:none/block) ,控制元素的显示与隐藏
• 使用建议
  • 频繁切换时，建议使用 hidden
  • 控制条件复杂时，建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换