【微信小程序创作之路】- 小程序事件绑定、动态提示Toast、对话框 Modal
第六章 小程序事件绑定、动态提示Toast、对话框 Modal
前言
本章主要讲解小程序事件绑定、动态提示Toast、对话框 Modal,结合代码示例,我们来研究一下!
一、事件是什么?
事件是视图层到逻辑层的通讯方式
。事件是小程序和用户互动的主要方式,通过事件将用户在视图层
的行为,反馈到逻辑层
进行业务处理。
这里引用小白白大佬文章的图片(渲染层======视图层)。
二、小程序中常用事件
微信官方文档给出的小程序常用事件------>
类型 | 绑定方式 | 事件描述 |
---|---|---|
tap | bindtap 或 bind:tap | 触摸后马上离开,类似于 HTML 中的 click 事件。 |
input | bindinput 或 bind:input | 文本框输入事件。 |
change | bindchange 或 bind:change | 状态改变时触发。 |
longpress | bindlongpress 或 bind:longpress | 触摸后,超过 350ms 再离开。如果指定了该事件的回调函数并触发了该事件,tap事件将不被触发。 |
touchstart | bindtouchstart 或 bind:touchstart | 触摸开始。 |
touchmove | bindtouchmove 或 bind:touchmove | 触摸后移动。 |
touchcancel | bindtouchcancel 或 bind:touchcancel | 触摸动作被打断,如来电提醒,弹窗等。 |
touchend | bindtouchend 或 bind:touchend | 触摸结束。 |
三、事件传播
🍉🍉🍉事件传播阶段
想学习事件的知识,可以看阮一峰老师的文章
当事件发生后,会在子元素和父元素之间进行传播。这种传播分为三个阶段。
①第一阶段:从window
对象传导至目标节点(上层传到底层),称之为捕获阶段(capture phase)
。
②第二阶段:在目标节点上触发,称之为目标阶段(target phase)
。
③第三阶段:从目标节点传导回window
对象(从底层传回上层),称之为冒泡阶段(bubbling phase)
。
🧀我们通过代码来演示
🏀🏀🏀通过两个元素来看触发几次
<div>
<p>点击</p>
</div>
如果两个节点都设置click事件监听函数
。对于<p>
点击,click
事件会触发四次:<div>
节点的捕获阶段和冒泡阶段各一次,<p>
节点的目标阶段触发了2次。
1、捕获阶段:事件从<div>
向<p>
传播时,触发<div>
的click
事件;
2、目标阶段:事件从<div>
到达<p>
时,触发<p>
的click
的时间;
3、冒泡阶段:事件从<p>
传回<div>
时,再次触发<div>
的click
事件。
注:其中<p>
节点有两个监听函数,所以他们都会因为click
事件触发一次,共两次。
事件传播的最上层对象是window
,接着依次是document
、html
、(document.documentElement)
和body(document.body)
。也就是说,上例的事件传播顺序,在捕获阶段依次为window
、document
、html
、body
、div
、p
,在冒泡阶段依次为p
、div
、body
、html
、document
、window
。
四、指定回调函数阶段
小程序可以通过属性指定各种事件的回调函数,并且可以指定在哪个阶段触发回调函数。
类型 | 事件描述 |
---|---|
capture-bind | 捕获阶段触发。 |
capture-catch | 捕获阶段触发,并中断事件,不再向下传播,即中断捕获阶段,并取消随后的冒泡阶段。 |
bind | 冒泡阶段触发。 |
catch | 冒泡阶段触发,并取消事件进一步向上冒泡。 |
五、event事件对象属性
详细属性列表如下:
属性 | 类型 | 事件描述 |
---|---|---|
type | String | 事件类型 |
timeStamp | Integer | 事件生成时的时间戳 |
target | Object | 触发事件的组件的一些属性值集合 |
currentTarget | Object | 当前组件的一些属性值集合 |
mark | Object | 事件标记数据 |
detail | Object | 额外的信息 |
touches | Array | 触摸事件,当前停留在屏幕中的触摸点信息的数组 |
changedTouches | Array | 触摸事件,当前变化的触摸点信息的数组 |
六、target和currentTarget的区别
target
:触发事件的源头组件。currentTarget
:当前事件所绑定的组件
🧀我们通过代码来演示
🏀🏀🏀通过代码来区分一下
<view >
<text class="title">hello </text>
<button bindtap="buttonHandler" type="primary">按钮</button>
</view>
js文件
buttonHandler(event) {
console.log("event" ,event);
console.log("源头组件" ,event.target);
console.log("当前事件所绑定的组件" ,event.target);
},
输出结果
分析结果:e.target
:内部<button>
按钮组件e.currentTarget
:当前的<view>
组件
七、代码示例
这里我们借用阮一峰老师的代码示例
🧀我们通过代码来演示
🏀🏀🏀点击按钮替换名称
contact.html
<view >
<text class="title">hello {{name}} </text>
<button bindtap="buttonHandler" type="primary">按钮</button>
</view>
contact.js
Page({
/**
* 页面的初始数据
*/
data: {
name: '张三'
},
buttonHandler(event) {
this.setData({
name: '李四'
})
}
})
点击前
点击后
1.函数前缀格式
<view >
<text class="title">hello {{name}} </text>
<button bindtap="buttonHandler" type="primary">按钮</button>
</view>
上面代码中,为按钮指定了触摸事件(tag
)的回调函数buttonHandler
,bind
前缀表示这个回调函数会在冒泡阶段触发。
🍉🍉🍉注:其实我们可以加上:
把bindtap
写为bind:tap
。
2.事件函数为全局数据赋值
buttonHandler(event) {
this.setData({
name: '李四'
})
}
上述代码中,通过调用this.setData(dataObject)
方法,可以给页面 data 中的数据重新赋值。
🍉🍉🍉注:修改页面配置对象的data
属性时,不要直接修改this.data
,这不仅无法触发事件绑定机制去改变页面,还会造成数据不一致,所以一定要通过this.setData()
去修改。详情可以参考官方文档.
3.事件函数传参
小程序的时间传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数
。
小程序中使用data-*
自定义属性传参,*代表的是参数的名字
。
在js文件中通过event.target.dataset.参数名
获得参数值
🧀我们通过代码来演示
🏀🏀🏀点击按钮通过事件传参,改变名称
contact.html
<view >
<text class="title">hello {{name}} </text>
<button bindtap="buttonHandler2" data-indo="{{3}}" type="primary">按钮</button>
</view>
contact.js
Page({
/**
* 页面的初始数据
*/
data: {
name: '张三'
},
buttonHandler2(event) {
this.setData({
name: event.target.dataset.indo
})
}
})
点击之前
点击之后
八、bindinput语法格式
小程序中可以通过input
事件来响应文本框的输入事件。
🧀我们通过代码来演示
🏀🏀🏀为文本框绑定输入事件
contact.hrml
<view >
<text class="title" wx:for="{{items}}">
{{index}},{{item}}
</text>
<input placeholder="输入新增内容" bindinput="inputHandler"/>
<button bind:tap="buttonHandler3">确定</button>
</view>
contact.js
inputHandler(e) {
this.setData({
inputValue: e.detail.value || ''
});
},
buttonHandler3(event){
const newItem = this.data.inputValue.trim();
if(!newItem) return;
const itemArr = [...this.data.items, newItem];
wx.setStorageSync('items', itemArr);
this.setData({items: itemArr});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
const itemArr = wx.getStorageSync('items') || [];
this.setData({items: itemArr});
},
上面代码中,输入框监听函数inputHandler(e)
,就是当用户输入内容时,通过事件对象event
的e.detail.value
方法拿到输入的内容。当用户没有输入时,设置为空字符串。
按钮监听函数buttonHandler3(event)
,当用户点击按钮时,它会先拿到inputValue
的值,赋给newItem
,再加上非空判断。如果非空的情况下,将新的值存入data.items
中,赋给itemArr。然后通过wx.setStorageSync(参数1,参数2)
,参数1代表键名,参数2代表键值,将items
数组存储在客户端。最后使用this.setData()
方法更新全局变量。
Page()
中配置对象中有一个onLoad()
对象。该方法属于页面的生命周期方法,页面加载后会自动执行该方法。它只执行一次,用于页面初始化。这里是通过wx.getStorageSync()
方法,从客户端取出数据,显示到页面上。
🍉🍉🍉注:事件的event
对象可以缩写为e
效果:
输入之前
输入后点击确定
九、动态提示 Toast
小程序提供了很多组件和方法,满足用户的需求。有时候我们操作完毕后,需要一个动态提示告诉我们执行完毕,这种效果叫做Toast
。
🧀我们通过代码来演示
🏀🏀🏀点击按钮后,提示操作完成
contact.html
<view >
<text class="title">hello {{name}} </text>
<button bindtap="buttonHandler" type="primary">按钮</button>
</view>
contact.js
buttonHandler(event) {
this.setData({
name: '李四'
}, function() {
wx.showToast({
title: '操作完成',
duration: 700
});
})
},
效果:
参数函数内部调用了wx.showToast()
方法,wx
是小程序的原生对象,包括所有客户端API。wx.showToast()
会展示微信内置的动态提示框,参数title
属性指定提示内容,duration
属性指定提示框的展示事件,单位为毫秒。
十、对话框 Modal
上面的动态提示 Toast展示点击按钮后提示“操作成功”,但是我们日常点击删除按钮时,需要我们再次确认,这种情况是怎么实现的呢?
🧀我们通过代码来演示
🏀🏀🏀点击按钮后,提示操作完成
contact.html
<view >
<text class="title">hello {{name}} </text>
<button bindtap="buttonHandler" type="primary">按钮</button>
</view>
contact.js
buttonHandler(event) {
const that = this;
wx.showModal({
title: '操作确认',
content: '你确认要删除吗?',
success (res) {
if (res.confirm) {
that.setData({
name: '李四'
}, function () {
wx.showToast({
title: '操作完成',
duration: 700
});
});
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
🍉🍉🍉注:
-
wx.showModal()
方法的参数是一个配置对象。title
表示提示框的标题,content
属性表示提示框内容。success
属性是提示框成功后显示的回调函数,fail
属性时失败时回调函数。 -
success
中需要判断一下用户点击的哪个按钮。confirm
值为true
表示是确定
按钮,cancel
的值为true
表示是取消
按钮。 -
上面代码修改值写的是
that.setData()
。如果直接写this.setData()
方法辉报错。这是因为setData()
方法定义在页面实例上,由于success()
函数不是直接定义在Page()
的配置对象下,导致this
不会指向页面实例,就会报错。想了解this
关键字的详细解释,可以参考阮一峰老师文章.
效果:
点击前:
点击后
点击取消,我们发现内容没有改变,并且控制台输出“用户点击取消”
点击确认,名称发生了改变,提示"操作完成"文章来源:https://www.toymoban.com/news/detail-620559.html
总结
以上就是今天要讲的内容,本文仅仅简单介绍了小程序事件绑定、动态提示Toast、对话框 Modal的使用,下一章我们将讲解如果请求后台获取数据
。文章来源地址https://www.toymoban.com/news/detail-620559.html
到了这里,关于【微信小程序创作之路】- 小程序事件绑定、动态提示Toast、对话框 Modal的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!