微信公众号开发

【微信小程序】04 生命周期 & 事件

本文主要是介绍【微信小程序】04 生命周期 & 事件,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

一、应用生命周期:

https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

App(Object object)

注册小程序。接受一个 Object 参数,其指定小程序的生命周期回调等。

App() 必须在 app.js 中调用,必须调用且只能调用一次。不然会出现无法预期的后果。

参数

Object object


属性类型默认值必填说明最低版本
onLaunch function   生命周期回调——监听小程序初始化。  
onShow function   生命周期回调——监听小程序启动或切前台。  
onHide function   生命周期回调——监听小程序切后台。  
onError function   错误监听函数。  
onPageNotFound function   页面不存在监听函数。 1.9.90
onUnhandledRejection function   未处理的 Promise 拒绝事件监听函数。 2.10.0
onThemeChange function   监听系统主题变化 2.11.0
其他 any   开发者可以添加任意的函数或数据变量到 Object 参数中,用 this 可以访问

 

 

在页面中获取实例:

AppObject getApp(Object object)

获取到小程序全局唯一的 App 实例。

参数

Object object

属性类型默认值必填说明最低版本
allowDefault boolean false 在 App 未定义时返回默认实现。当App被调用时,默认实现中定义的属性会被覆盖合并到App中。一般用于独立分包 2.2.4

示例代码

// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data

注意事项

不要在定义于 App() 内的函数中,或调用 App 前调用 getApp() ,使用 this 就可以拿到 app 实例。
通过 getApp() 获取实例之后,不要私自调用生命周期函数。

 

二、页面生命周期:

https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

Page(Object object)

注册小程序中的一个页面。接受一个 Object 类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等。

参数

Object object

属性类型默认值必填说明
data Object     页面的初始数据
options Object     页面的组件选项,同 Component 构造器 中的 options ,需要基础库版本 2.10.1
onLoad function     生命周期回调—监听页面加载
onShow function     生命周期回调—监听页面显示
onReady function     生命周期回调—监听页面初次渲染完成
onHide function     生命周期回调—监听页面隐藏
onUnload function     生命周期回调—监听页面卸载
onPullDownRefresh function     监听用户下拉动作
onReachBottom function     页面上拉触底事件的处理函数
onShareAppMessage function     用户点击右上角转发
onShareTimeline function     用户点击右上角转发到朋友圈
onAddToFavorites function     用户点击右上角收藏
onPageScroll function     页面滚动触发事件的处理函数
onResize function     页面尺寸改变时触发,详见 响应显示区域变化
onTabItemTap function     当前是 tab 页时,点击 tab 时触发
其他 any     开发者可以添加任意的函数或数据到 Object 参数中,在页面的函数中用 this 可以访问

 

 

三、事件系统

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

 

事件详解

事件分类

事件分为冒泡事件和非冒泡事件:

  1. 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
  2. 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。

WXML的冒泡事件列表:

类型触发条件最低版本
touchstart 手指触摸动作开始  
touchmove 手指触摸后移动  
touchcancel 手指触摸动作被打断,如来电提醒,弹窗  
touchend 手指触摸动作结束  
tap 手指触摸后马上离开  
longpress 手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发 1.5.0
longtap 手指触摸后,超过350ms再离开(推荐使用longpress事件代替)  
transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发  
animationstart 会在一个 WXSS animation 动画开始时触发  
animationiteration 会在一个 WXSS animation 一次迭代结束时触发  
animationend 会在一个 WXSS animation 动画完成时触发  
touchforcechange 在支持 3D Touch 的 iPhone 设备,重按时会触发 1.9.90

注:除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件,如 form 的submit事件,input 的input事件,scroll-view 的scroll事件,(详见各个组件)

 

 

Dataset

在组件节点中可以附加一些自定义数据。这样,在事件中可以获取这些自定义的节点数据,用于事件的逻辑处理。

在 WXML 中,这些自定义数据以 data- 开头,多个单词由连字符 - 连接。这种写法中,连字符写法会转换成驼峰写法,而大写字符会自动转成小写字符。如:

data-element-type ,最终会呈现为 event.currentTarget.dataset.elementType ;
data-elementType ,最终会呈现为 event.currentTarget.dataset.elementtype 。

示例:

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>

JS:

Page({
  bindViewTap:function(event){
    event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
    event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
  }
})

 

 

这篇关于【微信小程序】04 生命周期 & 事件的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!