一、应用生命周期:

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. AGC043

    AGC043 A.Range Flip Find Route 简单DP B.123 Triangle 推性质. 利用模运算将减法变成加法(在绝对值0/1的情况下). Giant Graph 类似于博弈 ...

  2. 微博Lite版安装

    微博Lite版安装 前置条件,需要使用chrome,或chromium内核的浏览器. 1.浏览器输入:https://m.weibo.cn/ 2.在地址栏最右侧点击安装. --

  3. asp.net core mvc 使用quartz

    参照了:https://www.cnblogs.com/dangzhensheng/p/10496278.html 1.新建任务类ReportJob.cs,这个类里就是具体任务了. using Qua ...

  4. STM32 + RT-Thread + LVGL

    一.基本信息 MCU:STM32F103ZET6 RT-Thread:5.0.2 LVGL:8.3.11 LCD:ST7735s 编译环境:RTThread studio 二.LVGL 移植要求 16 ...

  5. koishi机器docker搭建

    硬件要求: 可用内存:1G以上 存储空间:1G以上 cpu:不限制 配置: 在docker的存储空间目录建立koishi文件夹 下载docker镜像 koishijs/koishi 建立容器,具体设置 ...

  6. Vue学习:4.v-model使用

    第一节算是对v-model的粗略了解,仅仅是将input的输入与Vue 实例的数据之间双向绑定.这一节将更详细的了解v-model在不同表单元素中的使用. v-model实例:找对象 实现功能: 使用 ...

  7. C++11智能指针 unique_ptr、shared_ptr、weak_ptr与定制删除器

    目录 智能指针 场景引入 - 为什么需要智能指针? 内存泄漏 什么是内存泄漏 内存泄漏的危害 内存泄漏分类 如何避免内存泄漏 智能指针的使用及原理 RAII 简易例程 智能指针的原理 智能指针的拷贝问 ...

  8. UniRx-unirx中的对象池

    UniRx-unirx中的对象池 对象池Unirxunity 对象池 一.对象池模式 <游戏设计模式-对象池模式> 1.概念 定义一个池对象,其包含了一组可重用对象. 其中每个可重用对象都 ...

  9. 记录一下tomcat报错日志分析(去重分类)

    #!/usr/bin/env python # coding=utf-8 import os folder_path = 'E:\\Desktop' output_file = 'E:\\Deskto ...

  10. Jenkins项目构建成功后,配置邮件

    6.1 配置信息 6.1.1 发给多个收件人 邮件要发送给多个人,要使用[,]分割 6.1.2. 项目构建引用Editable Email Notification,设置tigger 在项目构建后,引 ...