微信小程序_3,WXML模板语法

已于 2022-06-19 13:09:38 修改
阅读量268 收藏
点赞数
分类专栏： 微信小程序 前端 文章标签： 微信小程序 小程序
于 2022-06-16 22:24:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ice_stone_kai/article/details/125323347
版权

事件绑定:

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

在这里插入图片描述

小程序中常用的事件:

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

事件对象的属性列表:

当事件出回调触发的时候,会受到一个事件对象event,它的详细属性如下表所示:

属性类型说明
typeString事件类型
timeStampInteger页面打开到触发事件所经过的毫秒数
currentTargetObject当前组件的一些属性值集合
detailObject额外的信息
touchesArray触摸事件,当前停留在屏幕中的触摸点信息的数组
changedTouchesArray触摸事件,当前变化的触摸点信息的数组

在开发中,用的比较多的是:target,detail

target和currentTarget的区别:

target是触发该事件的源头组件,而currentTarget则是当前事件所绑定的组件,举例如下:
在这里插入图片描述
点击内部的按钮,点击事件以冒泡的方式向外扩散,也会触发外层view的tap事件处理函数

  • e.target指向的是触发事件的源头组件,因此,e.target是内部的组件按钮
  • ecurrentTarget指向的是当前正在触发事件的那个组件,因此,e.currentTarget是当前的view组件

bindtap语法格式:

在小程序中,不存在HTML中的onclick鼠标点击事件,而是通过tap事件来响应用户的触摸行为
1.通过bindtap,可以为组件绑定tap触摸事件,语法如下:
WXML:

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

.js:

Page({
  btnTapHandler(e) {
    console.log(e);
  },
  })

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

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

WXML:

  <button type="primary" bindtap="changeCount">count+1</button>

.js:

  changeCount() {
    this.setData({
      count: this.data.count + 1
    })
  },

事件传参:

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

<view>
  下面的代码不能正常工作:
  <button type="primary" bindtap="btnHandler(123)">
    事件传参
  </button>
</view>

.js:

  btnHandler(str) {
    console.log('btn click' + str);
  },

运行并点击,调试器这里会报错:
在这里插入图片描述
因为小程序会把bindtap的属性值,统一当做事件名称来处理,相当于要调用一个名称为btnHandler(123)的事件处理函数

可以为组件提供data-*自定义属性传参,其中*代表的是参数的名称,实例代码如下:
WXML:

<button type="primary" bindtap="btnHandler" data-info="{{2}}">
    事件传参
  </button>

.js:

  btnHandler(str) {
    console.log(str);
  },

运行并点击:
在这里插入图片描述
最终:

  • info会被解析为参数的名字
  • 数值2会被解析为参数的值

bindinput语法格式:

在小程序里面,通过input事件来响应文本框的输入内容,语法格式如下:

1.通过bindinput,可以为文本框绑定输入事件:
WXML:

  <text>
    获取文本框数据:
  </text>
  <input bindinput="inputHandler"></input>

.js:

  inputHandler(e) {
    console.log(e.detail.value);
  },

运行:
在这里插入图片描述

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

实现步骤:
1.定义数据
2.渲染结构
3.美化样式
4.绑定input事件处理函数

WXML:

  {{msg}}
  <text>
    文本框输入并复制给data
  </text>
  <input value="{{msg}}" bindinput="iptHandler"></input>

.js:

  iptHandler(e) {
    this.setData({
      msg: e.detail.value
    })
  },
  data: {
    msg: "test msg"
  },
条件渲染:

wx:if

在小程序中,使用wx:if="{{condition}}"来判断是否需要渲染该代码块:

<text wx:if="{{flag}}">测试flag为true,显示该区域</text>

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

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

.js:

  data: {
    array:['asdasd','as2s','asdasdsa3','4sdfsdfad','5asdsad',6,7]
  },

运行:
在这里插入图片描述

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

手动指定索引和当前项的变量名:

  • 使用wx:for-index可以指定当前项的索引的变量名
  • 使用wx:for-item可以指定当前项的变量名
    示例代码如下:
    WXML:
  <text>
    指定索引和当前项的变量名:
    <text wx:for="{{array}}" wx:for-index="inde" wx:for-item="it">
      当前的索引是:{{inde}},
      当前的项是:{{it}}
    </text>
  </text>

.js:

  data: {
    array:['asdasd','as2s','asdasdsa3','4sdfsdfad','5asdsad',6,7]
  },

运行:

在这里插入图片描述

wx:key的使用:

类似于Vue列表渲染中的key,小程序在实现列表渲染时,也建议为渲染出来的列表项指定唯一key值,从而提高渲染的效率,示例代码如下:
WXML:

<text wx:for="{{list}}" wx:key="id">
    <text user-select="text">
      当前的index是:{{index}},
      filename:{{item.filename}},
      email:{{item.userEmail}},
      email:{{item.description}},
      key:{{item.id}}
    </text>
  </text>

.js:

 data: {
    list: [
      {
          "id": 1,
          "userEmail": "2714351312@qq.com",
          "filename": "测试文章名称",
          "fileData": "这里是测试文章数据",
          "states": null,
          "postTime": null,
          "description": "des",
          "praise": null,
          "view": null,
          "tag1": null,
          "tag2": null,
          "tag3": null,
          "createdAt": "2022-06-12T03:10:33.000Z",
          "updatedAt": "2022-06-12T03:10:33.000Z"
      },
      {
          "id": 2,
          "userEmail": "2714351312@qq.com",
          "filename": "测试文章名称",
          "fileData": "这里是测试文章数据",
          "states": null,
          "postTime": null,
          "description": "测试文章des",
          "praise": null,
          "view": null,
          "tag1": null,
          "tag2": null,
          "tag3": null,
          "createdAt": "2022-06-12T03:10:34.000Z",
          "updatedAt": "2022-06-12T03:10:34.000Z"
      },
      {
          "id": 3,
          "userEmail": "2714351312@qq.com",
          "filename": "测试文章名称",
          "fileData": "这里是测试文章数据",
          "states": null,
          "postTime": null,
          "description": null,
          "praise": null,
          "view": null,
          "tag1": null,
          "tag2": null,
          "tag3": null,
          "createdAt": "2022-06-12T03:10:34.000Z",
          "updatedAt": "2022-06-12T03:10:34.000Z"
      },
      {
          "id": 4,
          "userEmail": "2714351312@qq.com",
          "filename": "测试文章名称",
          "fileData": "这里是测试文章数据",
          "states": null,
          "postTime": null,
          "description": null,
          "praise": null,
          "view": null,
          "tag1": null,
          "tag2": null,
          "tag3": null,
          "createdAt": "2022-06-12T03:10:35.000Z",
          "updatedAt": "2022-06-12T03:10:35.000Z"
      },
      {
          "id": 5,
          "userEmail": "2714351312@qq.com",
          "filename": "测试文章名称",
          "fileData": "这里是测试文章数据",
          "states": null,
          "postTime": null,
          "description": null,
          "praise": null,
          "view": null,
          "tag1": null,
          "tag2": null,
          "tag3": null,
          "createdAt": "2022-06-12T03:10:35.000Z",
          "updatedAt": "2022-06-12T03:10:35.000Z"
      },
      {
          "id": 6,
          "userEmail": "2714351312@qq.com",
          "filename": "测试文章名称",
          "fileData": "这里是测试文章数据",
          "states": null,
          "postTime": null,
          "description": null,
          "praise": null,
          "view": null,
          "tag1": null,
          "tag2": null,
          "tag3": null,
          "createdAt": "2022-06-12T03:10:36.000Z",
          "updatedAt": "2022-06-12T03:10:36.000Z"
      },
      {
          "id": 7,
          "userEmail": "2714351312@qq.com",
          "filename": "测试文章名称",
          "fileData": "这里是测试文章数据",
          "states": null,
          "postTime": null,
          "description": null,
          "praise": null,
          "view": null,
          "tag1": null,
          "tag2": null,
          "tag3": null,
          "createdAt": "2022-06-12T03:10:36.000Z",
          "updatedAt": "2022-06-12T03:10:36.000Z"
      },
      {
          "id": 8,
          "userEmail": "2714351312@qq.com",
          "filename": "测试文章名称",
          "fileData": "这里是测试文章数据",
          "states": null,
          "postTime": null,
          "description": " ",
          "praise": null,
          "view": null,
          "tag1": " ",
          "tag2": " ",
          "tag3": " ",
          "createdAt": "2022-06-12T07:29:31.000Z",
          "updatedAt": "2022-06-12T07:29:31.000Z"
      }
  ]
  },

这里的data是从数据库随便整的,无所谓

运行:
在这里插入图片描述
注意这里如果不给一个key值,它会在控制台提示:

在这里插入图片描述

无名之辈无名之辈
关注
专栏目录
微信小程序，bindtap 的语法格式
qq_46099629的博客
09-28 641
在上述代码中，通过 Page 函数定义了一个小程序页面。事件对象 e 包含了当前事件触发的一些信息，例如触摸点的坐标、事件类型等。在上述代码中，我们通过 console.log 打印事件对象 e，以便在开发调试中查看事件信息。在上述代码中，通过 button 组件的 bindtap 属性将事件处理函数 btnTapHandler 绑定到了按钮的 tap 事件上。值得注意的是，在小程序中，不同的组件支持的事件可能不同。在小程序中，可以通过 bindtap 为组件绑定 tap 触摸事件。
【微信小程序】基础篇 -- WXML 模板语法 - 事件绑定 -- tap & input （十）
JMFive的博客
02-27 3930
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第10篇文章;今天开始学习微信小程序的第五天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。【微信小程序开发教程】， 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。在一起学习小程序里事件怎么绑定之前，首先先来了解一下什么是事件？事件是渲染层到逻辑层的通讯方式。
微信小程序-页面bindtap绑定点击方法，传递当前被点击的数据信息（如id等）
莫宛的博客
12-13 6009
文章目录介绍wxml代码 bindtap绑定handleCheckbox方法js代码 通过e接收接收数据详细示例wxml页面代码js代码接收到的数据 介绍 可以通过在wxml页面标签内添加data-id="{{item.goods_id}}"属性，来向绑定的方法传递数据，通过方法的e.currentTarget.dataset.id获取 。 **注意：**标签中的属性名定义为data-id，则dataset中的属性名为id；如果标签中属性名定义为data-goodsId，则dataset中的属性名为goo
微信小程序bindtap事件传参
Smileyan's blog
02-23 1万+
1. 编写目的 介绍微信小程序中某个控件的点击事件bindtap触发时如何传参。 2. 例子 wxml文件中代码如下：这个图片点击事件会由img_smile函数来处理，并且传递过去一个参数smile，这个参数的值是smile every day。 &lt;image class="image" src="{{img}}" bindtap='img_smile' data-smile='smile...
微信小程序 button按钮怎么触发事件？ bindtap语法怎么使用？
贼厉害
02-13 1万+
在前端网页中我们需要触发一个事件如果按钮点击后调用函数，文本、图片、链接被点击后调用一个函数一个事件，我们都知道用click，可是微信小程序中的click是不存在的，他怎么才能和网页中一样的使用click的呢？这时候有人肯定会问，我不是来学习click的怎么教我bindtap语法使用了？其实不然，bindtap是微信小程序中的onclick鼠标点击事件在小程序中，不存在HTMLZ中的onclick鼠标点击事件，而是通过tap事件来响应用户的触摸行为。①通过bindtap。
微信小程序3——wxml模板语法
Phoenix1st的博客
02-07 541
简要介绍wxml模板语法
【微信小程序_8_WXML 模板语法-条件渲染和列表渲染】
最新发布
爱吃凉拌辣芒果的博客
10-11 172
本文主要介绍了小程序 WXML 模板语法中的条件渲染和列表渲染。条件渲染包括使用`wx:if`进行条件判断，可结合`wx:elif`和`wx:else`，还能结合``控制多个组件的显示隐藏；同时介绍了`hidden`属性控制元素显示隐藏，并对比了`wx:if`与`hidden`在运行方式和使用场景上的不同。列表渲染方面，通过wx:for根据数组循环渲染组件，可使用`wx:for-index`和`wx:for-item`指定索引和当前项变量名，以及使用wx:key为列表项指定唯一值提高渲染效率
B站首页界面设计：附详细教程_微信小程序_微信小程序设计设计B站首页_
09-29
通过学习这个教程，你将掌握微信小程序的基本语法和设计原则，同时了解如何利用其特性来创建一个动态、交互式的用户界面。 1. **微信小程序概述**： 微信小程序是腾讯公司推出的一种新型应用形态，它基于...
微信小程序 uni-app wxml-to-canvas 小程序内通过静态模板和样式绘制 canvas ，导出图片，可用于生成分
09-01
3. **转换与绘制**：`wxml-to-canvas`将WXML模板和CSS样式解析，然后在canvas上逐个渲染元素，模拟WXML和CSS的渲染效果。 4. **生成图片**：完成绘制后，可以调用canvas的`toDataURL`方法将canvas内容导出为一张图片...
【微信小程序---绑定事件bindtap跳转】
m0_56349322的博客
02-24 9916
1.所需要跳转的页面进行 bindtap=“f0” 绑定所需要的地方 2.在js页面进行 f0:function(event){函数指向功能}
【微信小程序】WXML模板语法 —— 事件绑定
JPengp的博客
08-28 1506
黑马前端小程序学习笔记
微信小程序-bindtap等事件传参
热门推荐
前端向朔
03-01 21万+
什么是事件 事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。 事件对象可以携带额外信息，如 id, dataset, touches。 看图，因为需要传递的数据比较多，所以我们通过dataset携带参数信息。如果只有一个参数，可以通过id来传递。详解（以常见的tap点击事情为例）
微信小程序点击触发事件bindtap
qq_39702981的博客
12-05 9633
微信小程序点击触发事件bindtap bindtap事件 在wxml文件中绑定bindtap事件，  &lt;view class='wel-list' bindtap='TZdown'&gt;     &lt;image src="/images/welcome_08.png"&gt;&lt;/image&gt;     &lt;text&gt;C语言资料下载&lt;/text&gt;  ...
微信小程序之bindtap事件传参
qq_33358062的博客
10-23 4万+
之前一直以为微信小程序按钮点击事件传参是和web端相同，即在事件中写明所传递的参数即可，但是这样尝试过以后发现小程序的控制台报错，报所写的bindtap中参数错误，之后百度发现，小程序按钮点击这类事件时一般的处理方法是指明元素所在的id，bindtap只是写明函数名，例如，bindtap='setNumber',而不是bindtap='setNumber(1)',在js中只要写function(e
微信小程序的bindtap事件
子钦加油的博客
11-23 2620
在微信小程序中，要想获取元素的属性值，需要用到 bindtap事件，如果想要正确获取到属性值，对属性的命名还有一定要求 如下是正确的方式data-money-Num="9.93"： <view class="weui-msg__desc msg_text">我的<text class="msg_text">余额9.93元，</text><na...
bindtap事件
竹映平昔
01-06 4万+
一、bindtap事件 在wxml文件中绑定bindtap事件， C语言资料下载 然后在js文件中进行响应 Page({ TZdown: function () { wx.navigateTo({ url: '../download/download' }); } })这样在单机view层的时候就会跳转到指定的UR
微信小程序中 三元表达式
林中明月间丶
06-03 1万+
<text class="viewpager-title {{current == 0 ? 'area-selected' : ''}}" <view>{{status==1?"微信小程序":"支付宝小程序"}}</view> style和三元表达式的结合使用 （注意单双引） <view style="display: {{ 条件? 'block...
微信小程序 - 绑定事件 bindtap（包括是否传入参数）
sunshime的博客
09-16 4万+
  小程序绑定事件的方式有很多种，这里我只对bindtap的绑定方式进行介绍，其他的绑定方式也是差不多这样的。 1、不带参数的绑定方式 index.wxml文件中：share表示绑定的事件名称 <view class='enjoy' bindtap='share'>立即分享</view> index.js文件中： share(){ console.log('分享。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无名之辈无名之辈

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值