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

摘要:
● 常见事件和事件气泡● 配置● 应用程序生命周期和应用程序对象的使用● 页面生命周期1。事件绑定:确定页面文件的路径、窗口表示、设置网络超时、设置多个选项卡等。有关具体配置项的用法,请参阅开发文档:属性类型描述触发定时onLaunchFunction生命周期函数--当小程序初始化完成时,听取小程序初始化。
微信小程序的事件及生命周期


  继续下节课,今天我们还是从四个方面来了解小程序:
 
  ●常用事件和事件冒泡
  ●配置
  ●app生命周期及app对象的使用
  ●页面的生命周期

  一、事件的绑定:

  事件一方面可以理解成用户的行为,当用户对UI层做了某些操作时,程序可以捕捉到操作的类型。如:点击、长按、移动等。另一方面事件也是一种通讯方式,比如当程序运行时来电话、短信通知时会改变当前程序的生命周期。常用的事件类别主要有:

 ●点击事件:Tap
 ●长按事件:longTap
 ●触摸事件:touchstart、touchend、touchmove、touchcancel
 ●其他事件:submit input 等

  点击事件、长按事件、触摸事件都属于冒泡事件,其他事件属于非冒泡事件。
冒泡事件即事件会从发生事件的组件向上传递。例:

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

  事件的绑定方式:
  1. bind    (会造成事件冒泡)
  2. catch    (不会造成事件冒泡)

微信小程序,前端大梦想(三)第2张
  事件对象:
   调用事件方法是可以传入event参数,通过控制台可以看出event中所包含的对象,如下图可以更好的看出事件的冒泡机制:

微信小程序,前端大梦想(三)第3张
  二、配置

   微信小程序的配置文件是以.json为后缀,分为全局配置和页面配置,全局配置是在app.json中,页面配置是在每个文件夹下的*.json中,配置项相同是页面配置会覆盖全局配置,包括样式文件也是如此。app.json文件来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。如下图所示:

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

   app.json 配置项列表:

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

   由于小程序版本更新迭代很快,具体配置项的使用方法请查看开发文档:
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

  三、app生命周期及app对象的使用
 
   App生命周期和对象是在全局app.js中定义的,如图所示做以下修改:

微信小程序,前端大梦想(三)第6张
  运行结果如下:

微信小程序,前端大梦想(三)第7张
  app生命周期说明:

属性类型描述触发时机
onLaunchFunction生命周期函数--监听小程序初始化当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
onShowFunction生命周期函数--监听小程序显示当小程序启动,或从后台进入前台显示,会触发 onShow
onHideFunction生命周期函数--监听小程序隐藏当小程序从前台进入后台,会触发 onHide
其他Any开发者可以添加任意的函数或数据到 Object 参数中,用 this 可以访问 

  前台、后台定义: 当用户点击左上角关闭,或者按了设备 Home 键离开微信,小程序并没有直接销毁,而是进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台。只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正的销毁。

  获取应用实例app对象:

  在全局js中通过App(appConfig)设置了app全局应用,在其他页面中可以通过getApp()方法获取此对象。下面以自定义全局数据为例,通过getApp()获取对象实例,再通过对象取得自定义数据。


微信小程序,前端大梦想(三)第8张
  在index.js中获取app对象及自定义数据:

微信小程序,前端大梦想(三)第9张
  全局数据最典型的应用场景就是保存或获取用户的信息,在以后的课程中会以案例来讲解。
 
  四、页面的生命周期

 Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。

属性类型描述
dataObject页面的初始数据
onLoadFunction生命周期函数--监听页面加载
onReadyFunction生命周期函数--监听页面初次渲染完成
onShowFunction生命周期函数--监听页面显示
onHideFunction生命周期函数--监听页面隐藏
onUnloadFunction生命周期函数--监听页面卸载
onPullDownRefreashFunction页面相关事件处理函数--监听用户下拉动作
其他Any开发者可以添加任意的函数或数据到 object 参数中,用 this 可以访问


  Index.js代码如下:

微信小程序,前端大梦想(三)第10张
  生命周期函数

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

免责声明:文章转载自《微信小程序,前端大梦想(三)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇unity之初级工程师Spring Boot集成JPA的Column注解命名字段无效的问题下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

k8s集群搭建学习-部署一个自定义java服务

一、创建docker镜像 dockerFile FROM openjdk:13 LABEL by=jty name=docker_boot description="k8s测试" version="v1.0" RUN mkdir -p /usr/local/k8s/ RUN cd /usr/local/k8s/ WORKDIR /usr/local/k...

C#判断ContextMenuStrip右键菜单的来源(从哪个控件弹出来的) (转载)

有时候,为了提高性能和节约资源,我们会为多个控件,指定同一个右键弹出菜单,这时,通常会产生一个需求: 判断当前的弹出菜单是从哪个控件上弹出来,也就是“是由哪个控件的右键点击触发的”,以便于做进一步的控制。 在.NET当中,实现起来是非常简单的,假设弹出菜单为 ContextMenuStrip1,则只需要在 该菜单的 Opening 事件进行判断处理即可。...

Android多开/分身检测

原文:https://blog.darkness463.top/2018/05/04/Android-Virtual-Check/ 多开/分身原本用于方便有多个微信/QQ解决同时登录的问题,但近来年被各种黑产所利用,多见于薅羊毛,部分多开App甚至提供了篡改功能。对于普通用户根本不会有多开的需求的App,一旦检测到当前运行在多开环境下,有理由限制该用户的后...

第01组 Beta冲刺(1-5)

基本情况 队名:AIFS(Always In Final Status) 组长博客链接:戳这里 作业博客链接:戳这里 Github:戳这里 组员人数:11(其中一人负责拍照不参与代码学习部分) 冲刺概况汇报 苏艺淞(组长) 过去一天完成哪些任务 alpha冲刺总结 beta冲刺规划 云函数debug 接下来的计划 云函数写完 小程序端好好做,战...

Android开发 BottomNavigationView学习

前言  注意这个里介绍的是AndroidX的com.google.android.material.bottomnavigation.BottomNavigationView xml布局中 <com.google.android.material.bottomnavigation.BottomNavigationView and...

uniapp路由插件使用爬坑

插件官网地址:https://hhyang.cn/v2/start/quickstart.html 一.安装路由插件: npm install uni-simple-router 二.配置路由: 1.编写路由代码: //src/router/index.js import {RouterMount,createRouter} from 'uni-simpl...