微信小程序onLaunch异步,首页onLoad先执行?


Posted in Javascript onSeptember 20, 2018

本来按照事件顺序,小程序初始化时触发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先执行?,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery 使用点滴函数代码
May 20 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
JS日期加减,日期运算代码
Nov 05 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
jquery实现全选、不选、反选的两种方法
Sep 06 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
jQuery表格的维护和删除操作
Feb 03 Javascript
JavaScript拖动层Div代码
Mar 01 Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 Javascript
Node.js 使用request模块下载文件的实例
Sep 05 Javascript
Element Collapse 折叠面板的使用方法
Jul 26 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 #Javascript
微信小程序使用gitee进行版本管理
Sep 20 #Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 #jQuery
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
Sep 20 #Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 #jQuery
Vuex 快速入门(简单易懂)
Sep 20 #Javascript
vue项目打包部署_nginx代理访问方法详解
Sep 20 #Javascript
You might like
Sony CFR 320 修复改造
2020/03/14 无线电
PHP学习笔记之二 php入门知识
2011/01/12 PHP
php中将数组存到文件里的实现代码
2012/01/19 PHP
PHP5各个版本的新功能和新特性总结
2014/03/16 PHP
php文件缓存方法总结
2016/03/16 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
详解Nuxt.js 实战集锦
2019/11/19 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python 命令行非阻塞输入的小例子
2013/09/27 Python
全面解读Python Web开发框架Django
2014/06/30 Python
基于Django的ModelForm组件(详解)
2017/12/07 Python
python测试mysql写入性能完整实例
2018/01/18 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
python 重定向获取真实url的方法
2018/05/11 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
用python批量移动文件
2021/01/14 Python
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
药学专业大学生个人的自我评价
2013/11/04 职场文书
暑期社会实践方案
2014/02/05 职场文书
社会公德演讲稿
2014/05/20 职场文书
体育节口号
2014/06/19 职场文书
mysql优化
2021/04/06 MySQL
Python中相见恨晚的技巧
2021/04/13 Python