wxml模板语法

01 数据绑定

  • mustache语法，双大括号绑定数据，类似于view中的插值应用场景：
    • 绑定内容
    • 绑定属性
    • 运算（三元运算、算数运算）

<!-- 绑定内容 -->
<view>{{info}}</view>

<!-- 绑定属性 -->
<image src="{{imgSrc}}" mode="widthFix"></image>

<!-- 三元运算 -->
<view>{{randomNum1 > 5 ? "数字大于5":"数字小于5"}}</view>

<!-- 算数运算 -->
<view>100以内的小数：{{randomNum2 * 100}}</view>
data: {
    info: "data test",
    imgSrc: "https://www.baidu.com/img/pc_9c5c85e6b953f1d172e1ed6821618b91.png",
    randomNum1: Math.random() * 10,
    randomNum2: Math.random().toFixed(2) //保留2位小数
}

02 事件绑定

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

2.1 小程序中常用的事件

类型绑定方式事件描述
tapbindtap或bind:tap手指触摸后马上离开，类似于html中的click事件
inputbindinput或bind:input文本框的输入事件
changebindchange或bind:change状态改变时触发

2.2 事件对象的属性列表

  • 当事件回调触发的时候，会收到一个事件对象event，详细属性如下
属性类型说明
typeString时间类型
timeStampInteger页面打开到触发时间所经过的毫秒数
targetObject触发时间的组件的一些属性值集合
currentTargetObject当前组件的一些属性值集合
detailObject额外的信息
touchesArray触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouchesArray触摸事件，当前变化的触摸点信息的数组

  • target和currentTarget的区别

    • target是触发该时间的源头组件，而currentTarget是当前时间所绑定的组件。

  • 如下图，点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层view的tap事件处理函数。此时，对于外层的view来说：

    • e.target指向的是触发事件的源头组件，e.target是内部的按钮组件。
    • e.currentTarget指向的是当前正在触发时间的那个组件，e.currentTarget是当前的view组件。

2.3 bindtap语法格式

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

    • 通过bindtap，可以为组件绑定tap触摸事件。
    • 在页面的.js文件中定义对应的事件处理函数，事件参数通过形参event（一般简写成e）来接收
<button type="primary" bindtap="btnTapHandler">按钮</button>
//定义按钮的事件处理函数
btnTapHandler(e) {
    console.log("test");
    console.log(e)
},

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

  • 通过调用this.setData(dataObject)方法，给页面data中的数据重新赋值。
Page({
    data: {
        count: 0
    }, 

    //给data数据重新赋值
    changeCount(e) {
        this.setData({
            count: this.data.count + 1
        })
    }
}

2.3.2 事件传参

  • 小程序中的事件传参比较特殊，不能绑定事件的同时为事件处理函数传递参数。小程序会把bindtap的属性值，统一当做事件名来处理，相当于调用一个名称为btnHandler(123)的事件处理函数。
<!--这段代码在vue里可以正常使用，传入123的参数，但在小程序里不行-->
<button type="primary" bindtap="btnHandler(123)">事件传参</button>

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

    • info会被解析为参数的名字。
    • 数值2会被解析为参数的值。
<button type="primary" bindtap="btnHandler" data-info="{{2}}">事件传参</button>
  • 在事件处理函数中，通过event.target.dataset.参数名即可获取到具体参数的值。
<!--如果要传入的是数值，就需要{{3}}包围，不然就是传入字符串"3"-->
<button type="primary" bindtap="btnHandler" data-testinfo="{{3}}">事件传参</button>
Page({
    data: {
        count: 0
    }, 

    //事件传参 event.target.dataset.参数名，注意data-testInfo会被解析为testinfo，大写自动变小写
    btnHandler(event) {
        console.log(event.target.dataset.testinfo);
        this.setData({
            count: this.data.count + event.target.dataset.testinfo
        })
    }
}

2.4 bindinput语法格式

  • 小程序中，通过input事件来响应文本框的输入事件

    • 通过bindinput，可以为文本框绑定输入事件
    • 在页面的.js文件中定义事件处理函数
<input bindinput="inputHandler"/>
Page({
    //input
    inputHandler(e) {
        //e.detail.value是变化过后，文本框最新的值
        console.log(e.detail.value)
    }
}

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

  • 实现步骤

    • 定义数据
    • 渲染结构
    • 美化样式
    • 绑定input事件处理函数
<input bindinput="iptHandler" value="{{msg}}"/>
Page({
    data: {
        msg: "你好，"
    },    
    //实现文本框和data之间的数据同步
    iptHandler(e) {
        this.setData({
            msg: e.detail.value
        });
        console.log(e.detail.value)
    }
}

03 条件渲染

3.1 wx:if

  • 在小程序中，使用wx:if="{{condition}}"来判断是否需要渲染该代码块。
  • 也可以用wx:elif和wx:else来添加else判断
<!-- 条件渲染 -->
<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>保密</view>

3.2 结合block标签使用wx:if

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

    • 注意：<block>并不是一个组件，它知识一个包裹性质的容器，不会在页面中做任何渲染。
<!-- <block></block>标签的使用 -->
<block wx:if="{{true}}">
    <view>view1</view>
    <view>view2</view>
</block>

3.3 hidden

  • 在小程序中，直接使用hidden="{{condition}}"也能控制元素的显示与隐藏。
<!-- hidden -->
<view hidden="{{false}}"> 条件为true，隐藏；条件为false，显示</view>

3.4 wx:if与hidden的对比

  • 运行方式不同

    • wx:if以动态创建和移除元素的方式，控制元素的展示与隐藏
    • hidden以切换样式的方式（display:none/block），控制元素的显示与隐藏

  • 使用建议

    • 频繁切换时，建议使用hidden
    • 控制条件复杂时，建议使用wx:if搭配wx:elif和wx:else进行展示与隐藏的切换

04 列表渲染

4.1 wx:for

  • 通过wx:for可以根据指定的数组，循环渲染重复的组件结构。

    • 当前循环项的索引用index表示。
    • 当前循环项用item表示。
<!-- 列表渲染   -->
<view wx:for="{{arr1}}">
    索引是{{index}}，循环项是{{item}}
</view>

4.1.1 手动指定索引和当前想的变量名*

  • 使用wx:for-index可以指定当前循环项的索引的变量名
  • 使用wx:for-item可以指定当前项的变量名
<view wx:for="{{arr1}}" wx:for-index="idx" wx:for-item="itemName">
    索引是{{idx}}，循环项是{{itemName}}
</view>

4.1.2 wx:key的使用

  • 类似于Vue列表渲染中的:key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的key值，从而提高渲染的效率
<!-- wx:key的使用 key中不需要用{{}}表，Key为列表中的键值名-->
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>
Last modification：March 6th, 2022 at 09:05 pm
© 允许规范转载