【小程序从0到1】模版与配置|数据绑定|事件绑定

欢迎来到我的博客
📔博主是一名大学在读本科生,主要学习方向是前端。
🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏
🛠目前正在学习的是🔥 R e a c t / 小程序 React/小程序 React/小程序🔥,中间穿插了一些基础知识的回顾
🌈博客主页👉codeMak1r.小新的博客

本文被专栏【小程序|原力计划】收录

🕹坚持创作✏️,一起学习📖,码出未来👨🏻‍💻!
在这里插入图片描述

上篇文章详细讲解了微信小程序的常用组件的一些基本使用,这篇文章将带领大家学习的是小程序的WXML模版语法 - 「数据绑定|事件绑定」

数据绑定的基本原则

  1. 在 data 中定义数据

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

Page({
	data: {
	  // 字符串类型的数据
	  info: 'init data',
	  // 数组类型
	  msgList: [{msg: 'hello'}, {msg: 'world'}]
	}
})
  1. 在 WXML 中使用数据

小程序的WXML模版中的数据绑定与 Vue 框架其实是相差不大的。
把 data 中的数据绑定到页面中渲染,使用 Mistache语法(差值表达式)将变量名包起来即可。语法格式为:

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

Mustache语法的应用场景

Mustache语法的主要应用场景如下:

  • 绑定内容
  • 绑定属性
  • 运算(三元运算、算术运算等等)

1.动态绑定内容

WXML

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

JS

Page({
  data: {
	  info: 'init data'
	}
})

2.动态绑定属性

WXML

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

JS

Page({
  data: {
	  imgSrc: 'http://www.itheima.com/images/logo.png'
	}
})

3.运算

Mistache中使用三元运算:

页面数据如下

Page({
  data: {
    info: 'hello world',
    imgSrc: "http://www.itheima.com/images/logo.png",
    randomNum: Math.random() * 10 // 生成10以内的随机数
  }
})

页面结构WXML如下

<view>
  {{ randomNumber >= 5 ? '随机数字大于或等于5' : '随机数字小于5' }}
</view>

那么此时,怎么查看当前这个随机数字的具体数值呢?

可以打开微信开发者工具的调试器,在调试器的AppData中可以查看当前页面中的数据。

在这里插入图片描述

可以看到此时我的randonNum随机数字为:3.4025……

3.算术运算

页面数据如下

Page({
  data: {
    randomNum: Math.random() * 10, // 生成10以内的随机数
    randomNum1: Math.random().toFixed(2),
    // 生成一个带两位小数的随机数,例如:0.34
  }
})

页面结构如下

<view>
  {{ randomNum >= 5 ? '随机数字大于或等于5' : '随机数字小于5' }}
</view>
<view>{{randomNum1 * 100}}</view>

此时我们就成功的将randomNum1这个随机数,乘上100后,渲染到了页面中。

事件绑定

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

在这里插入图片描述

小程序中比较常用的事件

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

事件对象的 属性列表

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

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

target以及currentTarget

target是触发该事件的源头组件,而currentTarget则是当前事件所绑定的组件。
举个🌰:
在这里插入图片描述

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

  • e.target指向的是触发事件的源头组件,因此,e.target 是内部的按钮组件;
  • 而e.currentTarget是当前事件绑定的组件,也就是外层的 view 组件。

bindtap的语法格式

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

  1. 通过bindmap,可以为组件绑定 tap 触摸事件,语法如下:
<button type="primary" bindtap="btnTapHandler">按钮</button>
  1. 在页面的 .js文件中定义对应的事件处理函数,事件参数通过形参 event(一般简写成 e)来接受:
Page({
	btnTapHandler(e) { // 按钮的 tap 事件处理函数
		console.log(e)  // 事件参数对象e
	}
})

在这里插入图片描述

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

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

WXML

<view>{{count}}</view>
<button type="primary" bindtap="changeCount">
  点我count+1
</button>

JS

Page({
  data: {
    count: 0
  },

  // 定义按钮的事件处理函数
  changeCount(e) {
    console.log(e);
    this.setData({
      count: this.data.count + 1
    })
  },
})

在这里插入图片描述

小新感觉这有点眼熟啊……
this.setState() (●--●)介不是一样的咩
属实是,天下技术一家亲啦

事件传参

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

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

因为小程序会把bindtap的属性值,统一当作事件名称来处理,相当于要调用一个名称为 btnHandler(123)的事件处理函数。
可以为组件提供 data-*自定义属性传参,其中 * 代表的是参数的名字

正确的做法应该是:

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

最终,

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

在事件处理函数中,通过event.target.dataset.参数名即可获取具体参数的值,示例代码如下:

btnHandler(e) {
    console.log(e.target.dataset.info);
},

在这里插入图片描述

bindinput的语法格式

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

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

注意这里的是e.detail.value并不是react开发者熟悉的e.target.value

在这里插入图片描述

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

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

定义数据

Page({
  data: {
    mag: '你好!'
  }
})

渲染结构

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

美化样式

/**index.wxss**/
input {
  border: 1px solid red;
  padding: 5px;
  margin: 5px;
  border-radius: 3px;
}

绑定input事件处理函数

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

在这里插入图片描述

想必和小新一样的《资深前端》(不是)一下就看出来了吧,这丫不就是react的受控组件么……页面展现受到数据的控制。
我直呼好家伙啊

下篇文章内容:小程序条件渲染
专栏订阅入口【小程序|原力计划】

  • 48
    点赞
  • 46
    收藏
  • 打赏
    打赏
  • 72
    评论
©️2022 CSDN 皮肤主题:点我我会动 设计师:我叫白小胖 返回首页
评论 72

打赏作者

codeMak1r.小新

感谢大佬的资瓷!

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

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

打赏作者

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

抵扣说明:

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

余额充值