微信APP生命周期及页面生命周期示例详解
目录
- 官方文档
- 小程序的启动流程
- app生命周期
- 页面的生命周期
- 页面的生命周期(图)
官方文档
小程序的启动流程
我们画一个图来表示一下,整个小程序的启动流程,我们就知道了:
app生命周期
执行App()函数也就是注册一个App
1 在注册app的时候,可以判断小程序的进入场景
2 我们可以在执行通过生命周期函数,做一些数据请求
3 可以在app中设置一个全局对象,让所有页面都能使用
页面的生命周期
Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log("onload") }, /** * 生命周期函数--监听页面显示 */ onShow: function () { console.log("onshow") }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { console.log("onReady") }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { console.log("onHide") }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { console.log("onUnload") }, //监听用户下拉动作, onPullDownRefresh :function(){ //如果要用到这个,必须把"enablePullDownRefresh": true console.log("下拉刷下") }, //页面上拉触底事件的处理函数 onReachBottom:function(){ console.log("上拉到底部") }, //页面滚动触发事件的处理函数 onPageScroll: function(e){ console.log("滚轮在懂",e) } })
1 在生命周期函数中发送网络请求,从服务端获取数据
2 初始化一些数据,在data里面,以方便wxml引用
3 监听wxml的事件,绑定对应的事件函数
4 还有页面滚动,上拉,下拉等
页面的生命周期(图)
以上就是微信APP生命周期及页面生命周期示例详解的详细内容,更多关于微信APP生命周期及页面生命周期的资料请关注我们其它相关文章!
相关推荐
-
微信小程序(四)应用生命周期详解
App() 函数用来注册一个小程序,注意必须在 app.js 中注册,且不能注册多个. 使用方式也跟Android中的Application中初始化一些全局信息以供使用. 方法: 应用生命周期代码: 相关文章: hello WeApp icon组件 Window text组件 switch组件 tabBar底部导航
-
微信小程序App生命周期详解
微信小程序App生命周期: onLaunch--当小程序初始化完成时,会触发 onLaunch(全局只触发一次) onShow --当小程序启动,或从后台进入前台显示,会触发 onShow onHide --当小程序从前台进入后台,会触发 onHide onError --当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息 //app.js App({ /** *当小程序初始化完成时,会触发 onLaunch(全局只触发一次) */ onLaunch: fun
-
微信小程序 生命周期函数详解
微信小程序 生命周期函数 小程序中 判断当前首页是从其他页面返回,还是由入口打开 由于小程序的数据在我们退出小程序时并没有得到释放,因此再次点击开来数据依然没有变成初始化 解决方法:在小程序 data 数据中声明一个变量 isClose 默认为 true 用于判断 是否为从入口打开,当点击跳转页面或者关闭小程序的时候,会触发 OnHide 函数在此函数中将判断 isClose is true 的时候即为关闭之后在打开,当跳转页面时首先将 isClose 设置为 false, 这样 触发 OnHi
-
微信小程序(五)页面生命周期详细介绍
这里只要熟悉页面的基本生命周期即可,业务在指定生命周期函数内书写. 以下是官网给出的生命周期函数方法和状态图 上面的生周期函数图对于做Android 或者IOS的来书理解起来应该不是难事,具体怎么掌握只有慢慢尝试和摸索 代码处理: 这里的代码主需要对使用创建项目时index目录下文件处理下就行,至于跳转后的页面用的还是logs不需要更改!下面贴下代码注释也比较详细 index.wxml <!--index.wxml--> <view class="container"
-
微信小程序页面生命周期详解
微信小程序页面生命周期介绍,具体如下 页面生命周期函数 onLoad--监听页面加载 onReady--监听页面初次渲染完成 onShow--监听页面显示 onHide--监听页面隐藏 onUnload--监听页面卸载 Page({ /** * 页面的初始数据 */ data: { banner_url:data.bannerList(), open:false }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log
-
微信小程序 生命周期和页面的生命周期详细介绍
微信小程序 生命周期和页面的生命周期详解: 1.小程序的生命周期--App.js App() 必须在 app.js 中注册,且不能注册多个.所以App()方法在一个小程序中有且仅有一个. App() 函数用来注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等.先上代码: App({ onLaunch: function () { console.log('App onLaunch'); }, onShow:function (){ console.log('App onS
-
SpringBoot2 整合FreeMarker实现页面静态化示例详解
一.页面静态化 1.动静态页面 静态页面 即静态网页,指已经装载好内容HTML页面,无需经过请求服务器数据和编译过程,直接加载到客户浏览器上显示出来.通俗的说就是生成独立的HTML页面,且不与服务器进行数据交互. 优缺点描述: 静态网页的内容稳定,页面加载速度极快: 不与服务器交互,提升安全性: 静态网页的交互性差,数据实时性很低: 维度成本高,生成很多HTML页面: 动态页面 指跟静态网页相对的一种网页编程技术,页面的内容需要请求服务器获取,在不考虑缓存的情况下,服务接口的数据变化,页面加载的
-
PHP与Web页面的交互示例详解二
前言 在<PHP学习笔记-PHP与Web页面的交互1>笔记中讲解了form表单的一些属性,包括它的输入域标记.选择域标记和文字域标记的写法,接下来的内容就是讲如何获取表单数据以及PHP数据的传递,包括对各种控件值的获取. 插入表单 提交表单之前一定得有表单,当我们的表单创建完毕后可以将表单插入Web页中,代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://w
-
PHP与Web页面的交互示例详解一
前言 这篇笔记记录的是Web表单的相关操作,Web表单主要用来在网页中发送数据到服务器.比如在日常开发中,提交注册时需要提交表单,表单从客户端传送到服务器,经过服务器处理后,再将用户所需要的信息传递回客户端,进而实现PHP与Web表单的交互. 表单 使用<form>元素,并在其中插入相关的表单元素,即可创建一个表单. 表单结构: <form name="form_name" method="method" action="url"
-
iOS app中无网络页面的添加方法详解
前言 大家应该都会遇到这样一个需求,在开发app的过程中,为了能有更好的用户体验,往往会加入没有网络时的页面展示,告诉用户当前的网络状态不可用,那么具体如何来实现实时监测网络状态的呢,就是我们接下来要讨论的问题了.话不多说了,来一起看看详细的介绍吧. 实现思路 我的实现思路大致如下:采用第三方库RealReachability监听网络状态的变化,然后在基类中添加监听,然后在基类中提供对外的方法,用来判断当前的网络状态,以便子类可以在不同的网络状态时做出对应的操作.最后自定义一个无网络界面,在没有
-
微信小程序对图片进行canvas压缩的方法示例详解
微信小程序其实自带一个图片压缩的API wx.compressImage,但是这玩意目前感受就是个垃圾.IOS大多数情况下据说还可以,安卓有的时候降低质量压缩后体积反而变大,而且没办法控制其压缩至具体指定的大小,压缩后多大看天意.所以需要使用画布去自己实现一个图片压缩方法. 简单来讲原理就是:找个不显示在页面上的画布画上去,再取出,如果体积还是太大,缩小尺寸后再画,再取,递归下去,直到体积满足要求.(所以限制的越小,图片越大,压缩越久,递归次数越多) 第一步:新建一个zipPic.js文件(名字
-
微信APP生命周期及页面生命周期示例详解
目录 官方文档 小程序的启动流程 app生命周期 页面的生命周期 页面的生命周期(图) 官方文档 https://developers.weixin.qq.com/doc/search.html?query=生命周期&doc_type=miniprogram&jumpbackUrl=%2Fdoc%2F 小程序的启动流程 我们画一个图来表示一下,整个小程序的启动流程,我们就知道了: app生命周期 执行App()函数也就是注册一个App 1 在注册app的时候,可以判断小程序的进入场景 2
-
详解微信小程序应用和页面生命周期
目录 什么是生命周期 生命周期的分类 小程序的页面生命周期函数 什么是生命周期 生命周期(Life Cycle)是指一个对象从创建→>运行>销毁的整个阶段,强调的是一个时间段.如: 张三出生,表示这个人生命周期的开始 张三离世,表示这个人生命周期的结束 中间张三的一生,就是张三的生命周期 我们可以把每个小程序运行的过程,也概括为生命周期: 小程序的启动,表示生命周期的开始 小程序的关闭,表示生命周期的结束 中间小程序运行的过程,就是小程序的生命周期 生命周期的分类 在小程序中,生命周期分为两类
-
Vue生命周期与后端交互实现流程详解
目录 表单控制 购物车案例 v-model进阶(了解) vue生命周期 与后端交互 电影案例 表单控制 1.input:checkbox(单选,多选),radio(单选) 2.代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="j
-
vue组件生命周期钩子使用示例详解
目录 组件生命周期图 组件生命周期钩子 1.beforeCreate 2.created 3.beforeMount 4.mounted 5.beforeUpdate 6.updated 7.activated 8.deactivated 9.beforeDestroy 10.destroyed 11.errorCaptured 组件生命周期图 组件生命周期钩子 所有的生命周期钩子自动绑定 一.组件的生命周期:一个组件从创建到销毁的整个过程 二.生命周期钩子:在一个组件生命周期中,会有很多特殊的
-
React的生命周期函数初始挂载更新移除详解
目录 概述 constructor 初始 挂载 更新 移除 概述 在React中,生命周期函数指的是组件在某一个时刻会自动执行的函数 constructor 在类或组件创建的时候被自动执行,我们可以说它是生命周期函数,但它并不是React所特有的,所有的Es6对象都有这个函数,所以并不能说它是React的生命周期函数 初始 当数据发生变化时,render函数会被自动执行,符合我们对React生命周期函数的定义,所以它是React的生命周期函数,但在初始阶段,并不会有任何的React生命周期函数被
随机推荐
- AngularJS中的API(接口)简单实现
- oracle 创建表空间详细介绍
- JS学习之一个简易的日历控件
- Dreamweaver基础教程 (一)之新功能简介
- cwRsync 错误 uid/gid 4294967295 (-1) is impossible to set on
- 从C语言过渡到C++之基本变化
- Xen虚拟机在CentOS系统中的安装和使用方法
- 为非IE浏览器添加mouseenter,mouseleave事件的实现代码
- bootstrap+jQuery实现的动态进度条功能示例
- 浅析Java类和数据结构中常用的方法
- 使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
- 深入HTTP head的使用详解
- jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
- Python中列表list以及list与数组array的相互转换实现方法
- 有趣的思路~~JS仿 WINXP 注销桌面渐隐效果
- jquery mobile开发常见问题分析
- 自动最大化窗口的Javascript代码
- android中WebView和javascript实现数据交互实例
- C#实现鼠标移动到曲线图上显示值的方法
- php数据库的增删改查 php与javascript之间的交互