zoukankan      html  css  js  c++  java
  • 【微信小程序】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 // 大写会转为小写
      }
    })
  • 相关阅读:
    基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
    BootStrap fileinput.js文件上传组件实例代码
    Bootstrap fileinput.js,最好用的文件上传组件
    JS组件系列——Bootstrap文件上传组件:bootstrap fileinput
    JS文件上传神器bootstrap fileinput详解
    ***文件上传控件bootstrap-fileinput的使用和参数配置说明
    很清晰的解读i2c协议【转】
    高并发的socket的高性能设计【转】
    android dm-verity 功能【转】
    ARM的Jazelle技术【转】
  • 原文地址:https://www.cnblogs.com/mindzone/p/15085952.html
Copyright © 2011-2022 走看看