一、应用生命周期:

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 生命周期 & 事件的更多相关文章

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

    [未经作者本人同意,请勿以任何形式转载] 上一篇介绍微信小程序开发工具使用和项目目录结构. 这一章节介绍微信小程序的生命周期,什么是生命周期呢? 通俗的讲,生命周期就是指一个对象的生老病死. 从软件的 ...

  2. 教你理解微信小程序的生命周期和运行原理

    转自:http://blog.csdn.net/tsr106/article/details/53052879  写微信小程序,他的生命周期不能不知道,不知道小程序就会出现各种bug而无法解决.小助君 ...

  3. [转] 微信小程序之生命周期

    本篇文章介绍小程序的生命周期,由于小程序分为应用和页面两个部分,所以小程序的生命周期就涉及到三个部分,分别是: 应用的生命周期 页面的生命周期 应用的生命周期对页面生命周期的影响 一.应用的生命周期 ...

  4. 理解微信小程序的生命周期和运行原理

    写微信小程序,他的生命周期不能不知道,不知道小程序就会出现各种bug而无法解决.小助君公众号带你学习小程序的生命周期和运行原理. 小程序由两大线程组成:负责界面的线程(view thread)和服务线 ...

  5. 微信小程序-APP生命周期与运行机制

    QQ讨论群:785071190 开发微信小程序之前需要先了解微信小程序运行机制以及其生命周期,小程序APP生命周期需要先从app.js这个文件开始. 阅读过"微信小程序-代码构成" ...

  6. 微信小程序APP生命周期

    小程序APP生命周期需要先从app.js这个文件开始,App() 必须在 app.js 中调用,必须调用且只能调用一次,app.js中定义了一些应用的生命周期函数 onLaunch----当小程序初始 ...

  7. 微信小程序-Page生命周期

    QQ讨论群:785071190 微信小程序开发之前我们还需认识一下小程序页面的生命周期,丛"微信小程序-代码构成"一文中我们可以了解到小程序页面中有一个.js的文件,这篇博文我们来 ...

  8. 微信小程序的生命周期和APP对象的使用

    1.生命周期和APP对象的使用: //app.js App({ onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSy ...

  9. 对微信小程序的生命周期进行扩展 – Typescript 篇

    最近利用业余时间倒腾了一个微信小程序,主要目的是横向比较一些业界小程序平台的架构和做法.因为有在其他平台长期的开发经验,对于小程序的一些机制做了一些辩证的思考.例如,小程序的页面,其实不是一个页面,而 ...

  10. 原生微信小程序的生命周期

    小程序的生命周期函数:onLaunch:function(){当启动小程序时触发小程序只会启动1次,一般为初次打开时一般只会触发一次},onShow:function(){当小程序从后台切入到前台时触 ...

随机推荐

  1. react 数据请求分层

    封装一个接口请求类 数据模型 请求uri配置设置 数据统一存储于redux中,在本项目中创建一个store目录,此目录中就是redux仓库源 定义仓库入口 reducer methods方法 acti ...

  2. Mysql常见安装失败的解决方法

    问题一:安装时出现Initializing database失败 解决方法: 1.关闭安装页面并卸载MySQL Installer与MySQL Server (如果卸载不掉需要重启电脑) 2.查看并勾 ...

  3. 判断一个数n是不是快乐数

    引言 题目:编写一个算法来判断一个数n是不是快乐数 来源:网友分享的面试算法题 题目描述 [快乐数定义] 对于一个正整数,每一次将该数替换为它每个位置上的数字的平方和. 然后重复这个过程直到这个数变为 ...

  4. AI赋能ITSM:企业运维跃迁之路

    随着企业信息化建设的深入,IT运维管理作为保证企业信息系统稳定运行的重要工作,越来越受到重视. 那么,什么是IT运维呢? 简单地说,IT运维是一系列维护.管理和优化企业IT基础设施.系统和应用程序的活 ...

  5. mysql 判断字符串结尾

    mysql 判断字符串结尾 CREATE TABLE `tbl_str` ( `id` INT DEFAULT NULL, `Str` VARCHAR(30) DEFAULT NULL) INSERT ...

  6. redis锁定商品解决并发售卖问题 RedisUtil工具类

    redis锁定商品解决并发售卖问题 RedisUtil工具类 redis数据类型介绍: //伪代码,基本思路 //1.出redis,每次在选定商品之后,先检查redis是否已经锁定该商品,避免超卖.S ...

  7. AgileConfig-1.9.4 发布,支持 OpenTelemetry

    Hello 大家好,最新版的 AgileConfig 1.9.4 发布了.现在它可以通过 OpenTelemetry 对外提供 logs,traces,metrics 三个维度的数据.用户可以自由选择 ...

  8. WebApi 接口参数不再困惑

    从网上看了WEBAPI理解感觉不错分享一下 前言:还记得刚使用WebApi那会儿,被它的传参机制折腾了好久,查阅了半天资料.如今,使用WebApi也有段时间了,今天就记录下API接口传参的一些方式方法 ...

  9. OpenTelemetry 深度定制:跨服务追踪的实战技巧

    背景 在上一篇<从 Dapper 到 OpenTelemetry:分布式追踪的演进之旅>中在最后提到在做一些 Trace 的定制开发. 到现在差不多算是完成了,可以和大家分享一下. 我们的 ...

  10. Java 将Markdown文件转换为Word和PDF文档

    Markdown 凭借其简洁易用的特性,成为创建和编辑纯文本文档的常用选择.但某些时候我们需要更加精致的展示效果,例如在专业分享文档或打印成离线使用的纸质版时,就需要将Markdown文件以其他固定的 ...