WXML 模板语法-

Fade_VV
82 阅读5分钟

数据绑定

  • 1.数据绑定的基本原则
    • 1.在data中定义数据
    • 2.在WXML中使用数据
  • 2.在data中定义页面的数据
    • 在页面对应的.js文件中，把数据定义到data对象中即可： image.png
  • 3.Mustache 语法的格式
    • 把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可。语法格式为 image.png
  • 4.Mustache 语法的应用场景
    Mustache 语法的主要应用场景如下：
    • 绑定内容
    • 绑定属性
    • 运算（三元运算、算术运算等）
  • 5.动态绑定内容

image.png

  • 6.动态绑定属性

image.png

  • 7.三元运算

image.png

image.png

image.png 数字是8.01 > 5

  • 8.算数运算 image.png

image.png

事件绑定

  • 1.什么是事件

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

  • 2.小程序中常用的事件 image.png

  • 3.事件对象的属性列表 当事件回调触发的时候，会收到一个事件对象event,它的详情属性如下表所示。

image.png

  • 4.target和currentTarget的区别
    target是触发事件的源头组件。而currentTarget则是当前事件所绑定的组件。举例如下

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

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

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

  • 5.bindtap的语法格式 在小程序中，不存在HTML中的onclick鼠标点击事件，而是通过tap事件来响应用户的触摸行为。

    • 1.通过bindTap，可以为组件绑定tap触摸事件，语法如下
      <button type="primary" bindtap='btnTapHandler'>按钮</button>

    • 2.页面的.js文件中定义对应的事件处理函数，事件参数通过形参event(一般简写成e)来接收：
      image.png

    • 3.实际操作，创建按钮并绑定事件 image.png <button type="primary" bindtap="btnTapHandler">按钮</button> 事件响应函数并打印。 image.png 在调试器的console中可以查看到点击的具体信息。

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

    • 通过调用this.setData(dataObject)方法，可以给页面data中的数据重新赋值，实例如下：
      image.png
    • data.wxml 创建一个+1按钮 image.png
    • data.js 设置数据和绑定事件 image.png
    • 结果打印查看 image.png

  • 7.事件传参

    • 小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。例如，下面的代码将不能正常工作。
      <button type="primary" bindtap='btnHandler(123)'>事件传值</button>
      因为小程序会把bindtap的属性值，统一当作事件名称来处理，相当于调用了一个名称为btnHandler(123)的事件处理函数。
      可以为组件提供data-*自定义属性传参，其中* 代表的是参数的名字，实例代码如下：<button type="primary" bindtap="btnHandler" data-info="{{2}}">事件传参</button> 最终：
      • info会被解析为参数的名字
      • 数值2会被解析为参数的值
    • 在事件处理函数中，通过event.target.dataset参数名即可获取到具体参数的值，实例代码如下：
    btnHandler(event){
//dataset 是一个对象 包含了所有通过data-*传递过来的参数项
    console.log(event.target.datastr)
    //通过 dataset 可以访问到具体参数的值
     console.log(event.target.dataset.info)
     this.setData({
         count:this.data.count + event.target.dataset.info
     })
},

  • 8.bindinput的语法格式
    在小程序中通过input事件来响应文本框的输入事件:

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

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

    • 1.定义数据 
      data.js

Page({
/**
* 页面的初始数据
*/
    data: {
       
        msg:"你好",
    },
})
    • 2.渲染结构
    data.wxml 
<input value="{{msg}}" bindinput='iptHandler'></input>
    • 3.美化样式
    data.wxss

input{
    border: 1px solid #eee;
    padding: 5px;
    margin: 5px;
    border-radius: 3px;
}
    • 4.绑定input事件处理函数
    data.js
iptHandler(e){
    console.log(e.target.dataset.info)
    this.setData({
    msg:e.detail.value
    })
},

结果： image.png

条件渲染

  • 1.wx:if 在小程序中,使用wx:if="{{condtion}}" 来判断是否需要渲染该代码块:
<view wx:if="{{condtion}}">True</view>

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

Page({
/**
* 页面的初始数据
*/
data: {
        type:1
    },
)}

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

结果

image.png

  • 2.结合使用 wx:if
    一次性控制多个组件的展示与隐藏，可以使用一个标签将多个组件包装起来，并在标签上使用wx:if控制属性。

block标签(类似vue中的tempate)不会被渲染出来

view1 view2 - 3.hidden 在小程序中 直接使用hidden="{{condition}}"也能控制元素的显示与隐藏 条件为true隐藏 条件为false显示 if和hidden的对比 
Page({
/**
* 页面的初始数据
*/
data: {
        type:1,
        flag:true
    },
 )}    

<view hidden="{{flag === false}}">条件为true隐藏 条件为false显示</view>
  • 4.wx:if 与 hidden 的对比
    • 1.运行方式不同
      wx:if 以动态创建和移除元素的方式 控制元素的展示与隐藏
      hidden 以切换样式的方式(display:none/block),控制元素显示与隐藏
      使用建议 频繁切换时,建议使用hidden 控制条件复杂时,建议使用wx:if 搭配wx:elif wx:else 进行展示与隐藏的切换
<view hidden="{{!flag}}">条件为true隐藏 条件为false显示</view>
<view wx:if="{{flag}}">这里使用wx:if控制元素</view>

列表渲染

  • 1.循环 wx:for

通过wx:for 可以根据指定的数组 循环渲染重复的组件结构 语法示例如下

data: {
    array: ['1','2','3'],
},    

<view wx:for="{{array}}">
    索引是: {{index}} 当前项是:{{item}}
</view>

image.png

默认情况下，当前循环项的索引用index表示；当前循环项用item表示。

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

3.wx:key的使用

类似Vue列表渲染中的:key，小程序在实现列表渲染时，建议为渲染出来的列表指定唯一的key,提高渲染效率

//data 数据
data:{
userList:[
    {id:1,name: 'zs'},
    {id:2,name: 'ls'},
    {id:3,name: 'ww'},
]}

//wxml结构

<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>

image.png

avatar
文章
阅读
粉丝