微信小程序的页面交互1

这篇具有很好参考价值的文章主要介绍了微信小程序的页面交互1。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、page()函数

每个页面的s代码全部写入对应的js文件的page()函数里面。点击编译,就可以显示js代码的运行效果。注意,每个页面的page()函数是唯一的。

page()函数格式如下:

page({
data{
//data里面写入页面初始数据
eg:msg:‘hello’;
}, //data的值是一个对象
//页面生命周期回调函数:以onload()函数为例【当不需要做特定的事情时它可以不写】
onload:function(){
console.log("onload()函数执行了")
}
//页面事件处理函数:以onPullDownRefresh()为例
onPullDownRefresh:function(){
console.log("onPullDownRefresh()函数执行了")
}
})

二、微信小程序的 页面生命周期

就是:加载-》渲染-》销毁的过程。

(1)每个页面都有生命周期。如果想要在某个特定的时机进行特定的处理可以通过页面生命周期回调函数来完成。

(2)页面生命周期回调函数用于实现在特定的时间点执行特定的操作,随着页面生命周期的变化,页面生命周期回调函数会自动执行。

(3)页面生命周期回调函数:

onLoad()  监听页面加载,且一个页面只会在创建完成后触发一次。就相当于出生
onShow() 监听页面显示,只要页面显示就会触发此函数
onReady()监听页面的初次渲染,一个页面只会调用一次
onHide()   监听页面隐藏,只要页面隐藏就会触发此函数
onUnload()监听页面卸载,只要页面被释放就会触发此函数

三、微信小程序的 页面事件处理函数

(1)上拉、下拉、滚动页面等都是通过页面事件处理函数来完成。它用于监听用户行为

(2)页面事件处理函数:

onPullDownRefresh()    监听用户下拉刷新事件
onReachBottom()          监听页面上拉触底事件
onPageScroll()              监听滚动会连续调用
onShareAppMessage()用户点击页面右上角分享按钮时触发

四、数据绑定

(1)微信小程序的数据绑定实现数据的显示与修改。通过组件绑定事件可以监听用户操作行为,然后在对应的事件处理函数中进行相应的业务处理。
在wxml里映射数据运用Mustache语法 又称双大括号语法  {{ }}

页面事件处理函数微信,微信小程序,小程序,前端页面事件处理函数微信,微信小程序,小程序,前端页面事件处理函数微信,微信小程序,小程序,前端

(2)绑定事件前要加上bind/catch

(3)常用绑定事件:
1》点击事件:       

tap   (手指触摸后马上离开)

页面事件处理函数微信,微信小程序,小程序,前端页面事件处理函数微信,微信小程序,小程序,前端页面事件处理函数微信,微信小程序,小程序,前端

点击"按钮一"后,控制台显示:

页面事件处理函数微信,微信小程序,小程序,前端
2》长按事件:

longpress     (手指触摸后,超过350ms再离开,如果指定了事件回调函数并且触3发了这个事件,tap事件将不再触发)

3》触摸事件:     

touchstart     (手指触摸动作开始)

touchmove    (手指触摸后移动)

touchcancel  (手指触摸动作被打断。例如来电提醒、弹窗)

touchend      (手指触摸动作结束)

4》其他事件

input             (键盘输入时触发)

submit          (携带form中的数据触发submit事件)

5》事件分类

冒泡事件:点击事件、长按事件、触摸事件  (bind不阻止事件冒泡)
非冒泡事件:其他事件   (catch阻止事件冒泡)

若要为组件绑定事件,可以通过组件添加“bind+事件名称”属性 或 “catch+事件名称”绑定

页面事件处理函数微信,微信小程序,小程序,前端页面事件处理函数微信,微信小程序,小程序,前端

点击"大家好",因为我们使用了catch阻止了向father冒泡,所以控制台不显示father,只有v1页面事件处理函数微信,微信小程序,小程序,前端页面事件处理函数微信,微信小程序,小程序,前端

6》如何获取输入框的值?
    wxml页面上:使用input事件或者change事件
    js上:输入e.detail.value

页面事件处理函数微信,微信小程序,小程序,前端页面事件处理函数微信,微信小程序,小程序,前端页面事件处理函数微信,微信小程序,小程序,前端页面事件处理函数微信,微信小程序,小程序,前端

五、setData()方法

完成数据的设置与更改 (也就是对数据值进行修改与新增)

页面事件处理函数微信,微信小程序,小程序,前端

页面事件处理函数微信,微信小程序,小程序,前端

页面事件处理函数微信,微信小程序,小程序,前端

六、条件渲染

根据不同的判断条件来渲染不同的结果

(1)通过标签wx:if  wx:elif  wx:else控制属性来完成 

页面事件处理函数微信,微信小程序,小程序,前端页面事件处理函数微信,微信小程序,小程序,前端页面事件处理函数微信,微信小程序,小程序,前端

(2)hidden属性 控制某一组件的显示与隐藏
<!-- wx:if 条件渲染未显示的部分它的结构代码会彻底消失,但是hidden属性未显示的部分它的结构代码一直存在在wxml里 -->
<!-- 要频繁切换一个控件是否显示还是隐藏——使用hidden -->

页面事件处理函数微信,微信小程序,小程序,前端页面事件处理函数微信,微信小程序,小程序,前端页面事件处理函数微信,微信小程序,小程序,前端文章来源地址https://www.toymoban.com/news/detail-848810.html

到了这里,关于微信小程序的页面交互1的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序的页面滚动事件监听

    微信小程序中可以通过 Page 的 onPageScroll 方法来监听页面滚动事件。具体步骤如下: 在页面的 onLoad 方法中注册页面滚动事件监听器: 在 onPageScroll 方法中处理页面滚动事件。onPageScroll 方法会在页面滚动时被调用,参数 event 包含了当前页面滚动的位置信息,例如 event.scrollT

    2024年02月07日
    浏览(49)
  • 微信小程序事件和页面跳转

    一、页面跳转 1.非TabBar页面 一个小程序拥有多个页面,我们通过wx.navigateTo进入一个新的页面 我们通过下边点击事件实现页面跳转进行代码实现及参考 wx.navigateBack()回退到上一个页面 wx.redirectTo(url)删除当前页面跳转到指定页面 2.TabBar页面: wx.switchTab只能打开TabBar 3.其他

    2023年04月09日
    浏览(48)
  • 【微信小程序】-- 页面事件 - 下拉刷新(二十五)

    💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘   大家好,又见面了,

    2024年02月02日
    浏览(50)
  • 【微信小程序开发】小程序的事件处理和交互逻辑(最详细)

    在微信小程序中,事件处理和交互逻辑是开发过程中非常重要的环节,它们直接影响到用户体验和功能实现。今天为大家继续详解小程序的事件处理和交互逻辑 事件处理和交互逻辑在小程序开发中扮演着至关重要的角色。以下是几个原因: 提升用户体验:良好的事件处理和

    2024年02月08日
    浏览(94)
  • 微信小程序页面事件,下拉刷新事件和上拉触底事件

    下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。 开启下拉刷新有两种方式:全局和局部。一般的话是开启局部下刷新,哪里用到哪里开。 全局开启下拉刷新 ● 在 app.json 的 window 节点中,将 enablePullDownRefresh 设置为

    2024年02月16日
    浏览(48)
  • 微信小程序——页面事件,.启用下拉刷新监听页面的下拉刷新事件,上拉触底事件,停止下拉刷新的效果

    下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。 启用下拉刷新有两种方式: a.全局开启下拉刷新 在 app.json 的window 节点中,将 enablePullDownRefresh 设置为 true. b.局部开启下拉刷新 在页面的.json 配置文件中,将 enablePull

    2024年01月25日
    浏览(61)
  • 微信小程序事件点击跳转页面的五种方法

    第一种:标签 这是最常见的一种跳转方式,相当于html里的a标签 第二种:wx.navigateTo({})方法 1.前端wxml 2.js应用 第三种:wx.redirectTo({}) 功能描述: 关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。 类似于页面跳转时 重定向页面,类似于html中的 window.open(‘…

    2024年02月16日
    浏览(60)
  • 【微信小程序】使用WxNotificationCenter实现复杂的事件通信功能,在任意页面中订阅事件、发送事件和取消订阅事件

    在微信小程序中,如果需要实现复杂的事件通信功能,可以使用第三方库来辅助实现。以下是一些常用的第三方库示例: WxNotificationCenter Github地址(https://github.com/icindy/WxNotificationCenter) WxNotificationCenter是一个基于发布/订阅模式的事件通知库,可以在微信小程序中实现跨页面

    2024年02月16日
    浏览(44)
  • 微信小程序一对多个页面间传递数据进行通信,事件触发的实现方法

    在有些场景下,使用组件间通信或者组件和页面间通信并不可行。比如我需要只有一个websocket实例,并且需要向多个页面传递我接收到的消息。 下面的方法是一个页面向其它页面(触发事件)传递数据,其它页面也可以向这个页面传递数据。也就是可以互相传递。 缺点是,

    2024年02月07日
    浏览(46)
  • ⑥微信小程序--》小程序全局配置和详解下拉刷新和上拉触底页面事件

    目录 🏍️全局配置-window 🍇window小程序窗口的组成部分 🍇window节点常用的配置项 🍈window导航栏相关设置 设置导航栏标题 设置导航栏背景颜色  设置导航栏的标题颜色  🍉window下拉刷新  设置全局下拉刷新功能   设置下拉刷新的窗口背景色  设置下拉刷新的loading样式 

    2024年02月19日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包