小程序生命周期分析与注册流程回调
栏目: JavaScript · 发布时间: 5年前
内容简介:onLauch: 小程序初始化回掉,生命周期内只执行一次 onShow: 小程序打开或者从后台唤起时的回调 onHide: 小程序从前台进入后台时 onError: 小程序发生脚本错误,或者 api 调用失败时触发,会带上错误信息onLoad:注册页面的时候执行,只执行一次 onShow: 页面在前台展示时执行,显示一次执行一次 onReady: 页面初次渲染完成时执行,冷启动时不执行 onHide: 页面从前台进入后台 onUnload: 页面注销时执行个人觉得 小程序app中应该增加一个onUnloa
从小程序发布到现在,官方api 变动了好几个版本
首先我们先看一下小程序的生命周期
app.js 为小程序的启动入口文件
onLauch: 小程序初始化回掉,生命周期内只执行一次 onShow: 小程序打开或者从后台唤起时的回调 onHide: 小程序从前台进入后台时 onError: 小程序发生脚本错误,或者 api 调用失败时触发,会带上错误信息
页面生命周期:
onLoad:注册页面的时候执行,只执行一次 onShow: 页面在前台展示时执行,显示一次执行一次 onReady: 页面初次渲染完成时执行,冷启动时不执行 onHide: 页面从前台进入后台 onUnload: 页面注销时执行
个人觉得 小程序app中应该增加一个onUnload周期,页面的销毁现实场景个人还没有使用到
===========================================
下面我们来看一下 小程序的注册流程
针对小程序开发者看下图
1. 检查是否是登陆接口
2. 判断session
3. wx.login--》获取token
4. 执行原有回掉
好处:让后续开发者 忽略登陆流程逻辑
function doLogin(callback, obj) { if (obj.isLogin) { // 登录接口,直接放过 // 直接放过,让其走下去 typeof callback === "function" && callback(); } else if(session) { // 缓存中有session if(sessionExpireTime && new Date().getTime() > sessionExpire) { // 如果有设置本地session缓存时间,且缓存时间已到 session = ''; doLogin(callback, obj); } else { typeof callback === "function" && callback(); } } else if (logining) { // 正在登录中,请求轮询稍后,避免重复调用登录接口 flow.wait('doLoginFinished', function () { doLogin(callback, obj); }) } else { // 缓存中无session logining = true; obj.count++; // 记录调用wx.login前的时间戳 // 执行login 获取code obj._loginStartTime = new Date().getTime(); console.log('wx.login'); wx.login({ complete: function () { obj.count--; // 记录wx.login返回数据后的时间戳,用于上报 obj._loginEndTime = new Date().getTime(); if (typeof reportCGI === "function") { reportCGI('wx_login', obj._loginStartTime, obj._loginEndTime, request); } typeof obj.complete === "function" && obj.count == 0 && obj.complete(); }, success: function (res) { if (res.code) { var data; // codeToSession.data支持函数 // 上传服务器操作 if (typeof codeToSession.data === "function") { data = codeToSession.data(); } else { data = codeToSession.data || {}; } data[codeToSession.codeName] = res.code; obj.count++; requestWrapper({ url: codeToSession.url, data: data, method: codeToSession.method, isLogin: true, report: codeToSession.report || codeToSession.url, success: function (s) { session = s; sessionIsFresh = true; // 如果有设置本地session过期时间 if(sessionExpireTime) { sessionExpire = new Date().getTime() + sessionExpireTime; wx.setStorage({ key: sessionExpireKey, data: sessionExpire }) } // 执行回掉 typeof callback === "function" && callback(); wx.setStorage({ key: sessionName, data: session }) }, complete: function () { obj.count--; typeof obj.complete === "function" && obj.count == 0 && obj.complete(); logining = false; flow.emit('doLoginFinished'); }, fail: codeToSession.fail || null }); } else { fail(obj, res); console.error(res); // 登录失败,解除锁,防止死锁 logining = false; flow.emit('doLoginFinished'); } }, fail: function (res) { fail(obj, res); console.error(res); // 登录失败,解除锁,防止死锁 logining = false; flow.emit('doLoginFinished'); } }) } } 复制代码
处理页面登陆交互的两种方式
1. app.js 注册回掉函数,进入page 注册这个回掉函数,登陆完成执行app.logincallback
page.js const app = new getApp() onLoad(){ app.loginCallback = () => { this.init() } } 复制代码
这种方式可以,而且具有页面控制的灵活性,但灵活性带来的就是出错的几率会增大很多
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- [OC] 关于block回调、高阶函数“回调再调用”及项目实践
- 即使回调IsOneWay,WCF客户端也会因回调而死锁
- Java 回调机制解读
- 如何避免回调地狱
- 如何使用JPA回调?
- callback回调函数-python
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
智能家居:商业模式+案例分析+应用实战
陈国嘉 / 人民邮电出版社 / 2016-4 / 49.80元
作为万物互联的关键一环,智能家居的出现和普及已经势不可当,以移动互联网为核心的新技术正在重构智能家居。只有成为智能家居行业的先行者,才能抢占“风口”。 《智能家居:商业模式+案例分析+应用实战》紧扣“智能家居”,从3个方面进行专业、深层次的讲解。首要方面是基础篇,从智能家居的发展现状、产业链、商业分析、抢占入口等方面进行阐述,让读者对智能家居有个初步的认识;第二个方面是技术篇,从智能家居的控......一起来看看 《智能家居:商业模式+案例分析+应用实战》 这本书的介绍吧!