微信小程序,前端大梦想(三)

微信小程序的事件及生命周期

继续下节课,今天我们还是从四个方面来了解小程序:

●常用事件和事件冒泡

●配置

●app生命周期及app对象的使用

●页面的生命周期

一、事件的绑定:

事件一方面可以理解成用户的行为,当用户对UI层做了某些操作时,程序可以捕捉到操作的类型。如:点击、长按、移动等。另一方面事件也是一种通讯方式,比如当程序运行时来电话、短信通知时会改变当前程序的生命周期。常用的事件类别主要有:

●点击事件:Tap

●长按事件:longTap

●触摸事件:touchstart、touchend、touchmove、touchcancel

●其他事件:submit input 等

点击事件、长按事件、触摸事件都属于冒泡事件,其他事件属于非冒泡事件。

冒泡事件即事件会从发生事件的组件向上传递。例:

事件的绑定方式:

1. bind    (会造成事件冒泡)

2. catch    (不会造成事件冒泡)

事件对象:

调用事件方法是可以传入event参数,通过控制台可以看出event中所包含的对象,如下图可以更好的看出事件的冒泡机制:

二、配置

微信小程序的配置文件是以.json为后缀,分为全局配置和页面配置,全局配置是在app.json中,页面配置是在每个文件夹下的*.json中,配置项相同是页面配置会覆盖全局配置,包括样式文件也是如此。app.json文件来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。如下图所示:

   app.json 配置项列表:

由于小程序版本更新迭代很快,具体配置项的使用方法请查看开发文档:

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

三、app生命周期及app对象的使用

App生命周期和对象是在全局app.js中定义的,如图所示做以下修改:

运行结果如下:

app生命周期说明:

属性 类型 描述 触发时机
onLaunch Function 生命周期函数--监听小程序初始化 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
onShow Function 生命周期函数--监听小程序显示 当小程序启动,或从后台进入前台显示,会触发 onShow
onHide Function 生命周期函数--监听小程序隐藏 当小程序从前台进入后台,会触发 onHide
其他 Any 开发者可以添加任意的函数或数据到 Object 参数中,用 this 可以访问  

前台、后台定义: 当用户点击左上角关闭,或者按了设备 Home 键离开微信,小程序并没有直接销毁,而是进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台。只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正的销毁。

获取应用实例app对象:

在全局js中通过App(appConfig)设置了app全局应用,在其他页面中可以通过getApp()方法获取此对象。下面以自定义全局数据为例,通过getApp()获取对象实例,再通过对象取得自定义数据。

在index.js中获取app对象及自定义数据:

全局数据最典型的应用场景就是保存或获取用户的信息,在以后的课程中会以案例来讲解。

四、页面的生命周期

Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。

属性 类型 描述
data Object 页面的初始数据
onLoad Function 生命周期函数--监听页面加载
onReady Function 生命周期函数--监听页面初次渲染完成
onShow Function 生命周期函数--监听页面显示
onHide Function 生命周期函数--监听页面隐藏
onUnload Function 生命周期函数--监听页面卸载
onPullDownRefreash Function 页面相关事件处理函数--监听用户下拉动作
其他 Any 开发者可以添加任意的函数或数据到 object 参数中,用 this 可以访问

Index.js代码如下:

  生命周期函数

· onLoad: 页面加载

o 一个页面只会调用一次。

o 参数可以获取wx.navigateTo和wx.redirectTo及中的 query。

· onShow: 页面显示

o 每次打开页面都会调用一次。

· onReady: 页面初次渲染完成

o 一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。

o 对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。

· onHide: 页面隐藏

o 当navigateTo或底部tab切换时调用。

· onUnload: 页面卸载

o 当redirectTo或navigateBack的时候调用。

  页面相关事件处理函数

· onPullDownRefresh: 下拉刷新

o 监听用户下拉刷新事件。

o 需要在config的window选项中开启enablePullDownRefresh。

o 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

  事件处理函数

除了初始化数据和生命周期函数,Page 中还可以定义一些特殊的函数:事件处理函数。在渲染层可以在组件中加入事件绑定,当达到触发事件时,就会执行 Page 中定义的事件。

时间: 2024-10-31 15:31:19

微信小程序,前端大梦想(三)的相关文章

微信小程序,前端大梦想(一)

小程序框架MINA简介 微信公众平台"小程序"具有不是APP胜似APP的效果,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下即可打开应用.也体现了"用完即走"的理念,用户不用关心是否安装太多应用的问题.应用将无处不在,随时可用,但又无需安装卸载. 去年9月22日,微信公众平台向外发出200个"小程序"内测邀请函.该"小程序"即去年年初腾讯曾对外介绍的微信"

微信小程序 -- 前端技术API手册

小时候随手拿着英语小本子,在厕所或者路上随时翻看的场景大家还记得吗? 现在它有回来了,本次工程主要收录前端各项技术API,整合在微信小程序中,在首页选择要学习的技术就可以进到相关页面. 小程序长这样:               目前的进展是 jQuery API 收录到一半,预计下周 小程序 会先上线,其他内容后续进行补充. 大家有兴趣或者想贡献自己力量的可以联系我,在公众号底部菜单中有联系方式. 如果有想学习微信小程序开发的也可以联系我. 广播: 关注微信公众号 "jQuery每日经典&qu

微信小程序用户身份-微信小程序前端开发工具

一个团队进行小程序的开发,那么团队成员的身份管理是很有必要的. 管理员可在小程序管理后台统一管理项目成员(包括开发者.体验者及其他成员).设置项目成员的权限,包括:开发者/体验者权限.登录小程序管理后台.开发管理.查看小程序数据分析等. 管理入口位于:小程序管理后台 - 用户身份 – 成员管理 权限 说明 开发者权限 可使用小程序开发者工具及开发版小程序进行开发 体验者权限 可使用体验版小程序 登录 可登录小程序管理后台,无需管理员确认 数据分析 使用小程序数据分析功能查看小程序数据 开发管理

网易云易盾推出面向微信小程序的大数据反作弊产品

近日,国内领先的业务风控服务网易云易盾对外推出面向微信小程序的大数据反作弊产品,源于网易20年的核心业务风控技术与全面稳健的策略模型,有机整合了设备指纹.IP画像.规则引擎等八大能力,可广泛应用电商营销.金融支付.生活服务类小程序场景,帮助企业防范微信小程序端的黑灰产作弊侵害. 易盾安全调查显示,小程序已成为企业业务风险环节新缺口 易盾安全经过调查发现,相比App,大部分互联网开发者还没有足够的能力利用小程序的特性建立起有效的风控策略."羊毛党"通过自己养号或着批量购买的大量微信号,就

微信小程序前端源码逻辑和工作流

看完微信小程序的前端代码真的让我热血沸腾啊,代码逻辑和设计一目了然,没有多余的东西,真的是大道至简. 废话不多说,直接分析前端代码.个人观点,难免有疏漏,仅供参考. 文件基本结构: 先看入口app.js,app(obj)注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等.其他文件可以通过全局方法getApp()获取app实例,进而直接调用它的属性或方法,例如(getApp().globalData) //app.js App({ onLaunch: function ()

关于微信小程序下拉出现三个小点

包子这天看美团外卖的小程序,再瞅瞅自己的背景色,发现,美团下拉的时候有三个小点,但是我自己的校车徐下拉的时候没有三个小点,很是郁闷,于是各种的找各种的找,发现,这三个小点是微信小程序自带的,你只需要设置一下全局的背景色就ok了,设置全局的背景色在app.json里面设置就行,记住,是设置这个属性backgroundColor,不是这个属性:navigationBarBackgroundColor.....谨记谨记......这个定位我在上次说过了,接了百度地图的api.....

微信小程序之生命周期(三)

上一篇介绍微信小程序开发工具使用和项目目录结构. 这一章节介绍微信小程序的生命周期,什么是生命周期呢? 通俗的讲,生命周期就是指一个对象的生老病死. 从软件的角度来看,生命周期指程序从创建.到开始.暂停.唤起.停止.卸载的过程. 下面从一下三个方面介绍微信小程序的生命周期: 应用生命周期 页面生命周期 应用生命周期影响页面生命周期 >>>应用生命周期 用户首次打开小程序,触发 onLaunch(全局只触发一次). 小程序初始化完成后,触发onShow方法,监听小程序显示. 小程序从前台进

微信小程序开发大神牛样本

微信小程序的推出,让很多App开发者忧喜参半.喜的是终于出现了一种全新的应用生态,不必再纠结于高昂开发成本的App:忧的是微信小程序开发人员需要增加学习成本,而非技术人员则更是无从下手开发具体流程如下:  1. 获取微信小程序的 AppID登录微信公众平台,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID .2. 创建项目我们需要通过开发者工具,来完成小程序创建和代码编辑.开发者工具安装完成后

程序与页面—微信小程序前端开发工具

你可以观察到 pages/logs/logs 下其实是包括了4种文件的,微信客户端会先根据 logs.json 配置生成一个界面,顶部的颜色和文字你都可以在这个 json 文件里边定义好.紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式.最后客户端会装载 logs.js,你可以看到 logs.js 的大体内容就是: Page({ data: { // 参与页面渲染的数据 logs: [] }, onLoad: function () { // 页面渲染后 执行 } }) Page

微信小程序-开心大转盘(圆盘指针)代码分析

大转盘是比较常见的抽奖活动 .以前做过h5的大转盘,最近小程序比较火,客户要求做小程序的大转盘.我们就来分析下代码.先上几个图:     界面效果还是很不错的. 做界面还是比较容易的,只要有前端基础没啥难度. 关键是 抽奖的动画,我们就是要小程序本身的动画: 界面加载的时候定义一个动画对象: onLoad(opt) { this.setPlateData(); //执行设置转盘表面的文字 let that = this; let aniData = wx.createAnimation({ //