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




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

 

  ●常用事件和事件冒泡

  ●配置

  ●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 中定义的事件。

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

  1. 微信小程序,前端大梦想(六)

    微信小程序,前端大梦想(六) 微信小程序之联合百度API实现定位 定位功能对于我们都不陌生,在移动端的应用中更是不可或缺的功能,小程序中也提供了对应的API帮助我们完成定位的实现,但是目前小程序的定位 ...

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

    小程序框架MINA简介       微信公众平台"小程序"具有不是APP胜似APP的效果,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用 ...

  3. 微信小程序,前端大梦想(二)

    微信小程序的视图与渲染  今天我们从四个方面来了解小程序:   •组件的基本使用  •数据绑定  •渲染标签  •模板的使用     一.组件的基本使用:  微信小程序为我们的开发提供了丰富的UI组件 ...

  4. 微信小程序前端页面书写

    微信小程序前端页面书写 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 一.数据绑定 1. 普通写法 <view ...

  5. 微信小程序前端样式WXSS书写

    微信小程序前端样式WXSS书写 一. WXSS的简单介绍 WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式. 与 CSS 相比,WXSS 扩展的特性有: ...

  6. 关于微信小程序前端Canvas组件教程

    关于微信小程序前端Canvas组件教程 微信小程序Canvas接口函数 ​ 上述为微信小程序Canvas的内部接口,通过熟练使用Canvas,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些 ...

  7. 微信小程序前端与myeclipse的数据交换过程(SSH)

    这是我个人探究微信小程序前端与后端之间的数据交换的过程,再结合个人所学的SSH框架, 编程工具用myEclipse2014工具.当然,前提是后台的项目要部署到tomcat服务器上才行, 然后总结了从后 ...

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

    看完微信小程序的前端代码真的让我热血沸腾啊,代码逻辑和设计一目了然,没有多余的东西,真的是大道至简. 废话不多说,直接分析前端代码.个人观点,难免有疏漏,仅供参考. 文件基本结构: 先看入口app.j ...

  9. 《微信小程序七日谈》- 第三天:玩转Page组件的生命周期

    <微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 前两篇 ...

  10. 当微信小程序遇到AR(三)

    当微信小程序遇到AR,会擦出怎么样的火花?期待与激动...... 通过该教程,可以从基础开始打造一个微信小程序的AR框架,所有代码开源,提供大家学习. 本课程需要一定的基础:微信开发者工具,JavaS ...

随机推荐

  1. ajax 做登录 实现页面免刷新

    结合之前学的知识,可以用ajax来传递数据,实现页面不用刷新,仅数据刷新,来看一下ajax是怎么来实现页面免刷新的 方的是客户端,圆的是服务器 如果没有ajax的话,客户端直接把数据传给服务器,服务器 ...

  2. Nginx支持Socket转发过程详解

    序言 一网友在群中问,nginx支持socket转发吗? 实话说,我没做过socket转发,但是我知道socket跟http一样都是通过tcp或者udp通信的,我猜测啦一下nginx应该支持吧,然后又 ...

  3. 【2017-02-24】循环嵌套、跳转语句、异常语句、迭代穷举、while

    一.循环嵌套 1.格式 for() { for() { } } 2.执行顺序 先执行外边循环进到循环体发现里面的循环,开始执行里面的循环.等到里面的循环执行完毕,再执行外边的循环. 在外面循环第一次, ...

  4. 徒手用Java来写个Web服务器和框架吧<第三章:Service的实现和注册>

    徒手用Java来写个Web服务器和框架吧<第一章:NIO篇> 徒手用Java来写个Web服务器和框架吧<第二章:Request和Response> 这一章先把Web框架的功能说 ...

  5. C++:基础篇-32位和64位系统区别及字节数

    今儿面试了一个刚刚毕业的,但是不知道一个int.long.double这几个都是多少位,我给你们总结一下哈: 常用数据类型对应字节数  可用如sizeof(char),sizeof(char*)等得出 ...

  6. 解决https证书验证不通过的问题

    1.报错信息 java.security.cert.CertificateException: No name matching api.weibo.com found; nested excepti ...

  7. canvas小球动画原理

    随着html5发展,canvas标签作为h5革命性的发展标志也越来越流行.canvas标签的强大之处,不仅在于它可以作为一个独立的画布,也可以利用canvas做一些动画而不用导入flash文件.同时, ...

  8. java实现多叉树查找

    package tree; import java.util.List; import java.util.ArrayList; import java.io.Serializable; public ...

  9. java如何在一个范围内产生多个不等的随机数

    import java.util.Random; //随机产生0-max之间num个不重复的整数 public class 产生多个不同随机数 { private static int num,max ...

  10. vue入门 vue与react和Angular的关系和区别

    一.为什么学习vue.js vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/ ...