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

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

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

 

  ●常用事件和事件冒泡

  ●配置

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