微信小程序onLaunch异步,首页onLoad先执行?
本来按照事件顺序,小程序初始化时触发App里的onLaunch,后面再执行页面Page里的onLoad,但是在onLaunch里请求获取是否有权限,等待返回值的时候Page里的onLoad事件就已经执行了。
//app.js App({ onLaunch: function () { console.log('onLaunch'); wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { }, success: function(res) { console.log('onLaunch-request-success'); // 将employId赋值给全局变量,提供给页面做判断 this.globalData.employId = res.employId; } }) }, globalData: { employId: '' } })
//index.js //获取应用实例 const app = getApp() Page({ data: { albumDisabled: true, bindDisabled: false }, onLoad: function () { console.log('onLoad'); console.log('onLoad app.globalData.employId = ' + app.globalData.employId); //判断是用户是否绑定了 if (app.globalData.employId && app.globalData.employId != '') { this.setData({ albumDisabled: false, bindDisabled: true }); } })
控制台打印的结果是
onLaunch
onLoad
onLoad app.globalData.employId =
onLaunch-request-success
要是能等完onLaunch请求完再执行Page的onLoad方法那该多好。
这里采用的方法是定义一个回调函数。
Page页面判断一下当前app.globalData.employId是否有值,如果没有(第一次)则定义定义一个app方法(回调函数)app.employIdCallback = employId => {...}。
App页面在请求success后判断时候有Page页面定义的回调方法,如果有就执行该方法。因为回调函数是在Page里面定义的所以方法作用域this是指向Page页面。
//app.js App({ onLaunch: function () { wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { }, success: function(res) { this.globalData.employId = res.employId; //由于这里是网络请求,可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 if (this.employIdCallback){ this.employIdCallback(res.employId); } } }) }, globalData: { employId: '' } })
//index.js //获取应用实例 const app = getApp() Page({ data: { albumDisabled: true, bindDisabled: false }, onLoad: function () { //判断是用户是否绑定了 if (app.globalData.employId && app.globalData.employId != '') { this.setData({ albumDisabled: false, bindDisabled: true }); } else { // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 app.employIdCallback = employId => { if (employId != '') { this.setData({ albumDisabled: false, bindDisabled: true }); } } } } })
这样的话,就能实现想要的结果。执行顺序就是:
[App] onLaunch -> [Page] onLoad -> [App] onLaunch sucess callback
下面看下小程序_onLaunch异步回调数据加载问题的两种解决方案
问题
小程序开发过程中,会遇到在App启动onLaunch的时候,发起登录请求获取微信用户信息,并注册到我妈自己的服务器上以便使用,然而,这个过程中,
app on launch -> request -> success -> page onload
是无法判断success和page onload哪个先来的,会导致页面初始化数据失败的情况。
解决方案一
就是在request success中处理,使用getCurrentPages方法获取是否页面先于success生成,如果生成我们就强制让页面再次渲染。
这显然是一种hack的方式, 在实际使用过程当中,如果登录逻辑比较复杂,这个方法不是十分便利,page onload在一些特殊情况也会被调用,这显然不是我们想看到的
if (getCurrentPages().length != 0) { getCurrentPages()[getCurrentPages().length - 1].onLoad() }
解决方案二
目前我在开发中使用的是这种方案,
在login的逻辑里,增加一个回调函数cbLoginCallBack。
Page页面判断一下当前app.globalData.sessionKey是否存在,如果没有(第一次)则定义定义一个app方法(回调函数)
// Login Request if (app.cbLoginCallBack) { typeof app.cbLoginCallBack == 'function' && app.cbLoginCallBack(cb_login.data) } // 逻辑页面 if (app.globalData.sessionkey) { // init data } else { app.cbLoginCallBack = res => { if (res) { // init data } } }
App页面在请求success后判断时候有Page页面定义的回调方法,如果有就执行该方法。因为回调函数是在Page里面定义的所以方法作用域this是指向Page页面。
总结
以上所述是小编给大家介绍的微信小程序onLaunch异步,首页onLoad先执行?,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- 打印机安全研究(一):不容乐观的网络打印机安全状况
- Apache Maven 入门篇
- hyperledger v1.0.5 区块链运维入门(一)
- 分析无线遥控器信号并制作Hack硬件进行攻击
- 第二章:Shiro入门——深入浅出学Shiro细粒度权限开发框架
- 在Apache Spark上跑Logistic Regression算法
- 第四章:Shiro的身份认证(Authentication)——深入浅出学Shiro细粒度权限开发框架
- 第五章:Shiro的授权(Authorization)——深入浅出学Shiro细粒度权限开发框架
- 第六章:Shiro的Realms——深入浅出学Shiro细粒度权限开发框架
- 第八章:Shiro和Spring的集成——深入浅出学Shiro细粒度权限开发框架
- 第九章:Shiro的Web——深入浅出学Shiro细粒度权限开发框架
- 第十章:Shiro的Cache——深入浅出学Shiro细粒度权限开发框架
- Appboy基于MongoDB的数据密集型实践
- 微信企业号登录授权Java实现获取员工userid根据userid换openid
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PYTHON替代MATLAB在线性代数学习中的应用(使用Python辅助MIT 18.06 Linear Algebra学习)
- C# TCP/IP 文件(图片、视频等)收发系统
- 反制面试官 | 14张原理图 | 再也不怕被问 volatile!
- Javascript之其实我觉得原型链没有难的那么夸张!
- 归纳一下:C#线程同步的几种方法
- C# 主界面的扁平化
- C# LINQ
- Oracle基本参数(DB_NAME)
- Oracle基本参数(DB_RECOVERY_FILE_DEST,DB_RECOVERY_FILE_DEST_SIZE)
- Oracle基本参数(DB_UNIQUE_NAME)
- Oracle基本参数(DB_DOMAIN)
- Oracle基本参数(INSTANCE_NUMBER)
- Oracle基本参数(LDAP_DIRECTORY_SYSAUTH)
- C#调用C++编写的DLL
- Oracle基本参数(LOG_ARCHIVE_DEST_n)