微信小程序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 $.ajax各个事件执行顺序
Oct 15 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
Dec 29 Javascript
了解Javascript的模块化开发
Mar 02 Javascript
Json解析的方法小结
Jun 22 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
微信小程序之圆形进度条实现思路
Feb 22 Javascript
JS实现十分钟倒计时代码实例
Oct 18 Javascript
Angular单元测试之事件触发的实现
Jan 20 Javascript
vue 实现动态路由的方法
Jul 06 Javascript
jquery插件实现图片悬浮
Apr 16 jQuery
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
php过滤XSS攻击的函数
2013/11/12 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
很全的显示阴历(农历)日期的js代码
2009/01/01 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
jQuery为动态生成的select元素添加事件的方法
2016/08/29 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
JS表单传值和URL编码转换
2018/03/03 Javascript
JS实现倒计时图文效果
2018/11/17 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
Python中顺序表的实现简单代码分享
2018/01/09 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
python3的UnicodeDecodeError解决方法
2019/12/20 Python
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
面向对象编程的优势是什么
2015/12/17 面试题
党员自我评价分享
2013/12/13 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
银行委托书范本
2014/09/28 职场文书
挂靠协议书
2015/01/27 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书
运动会广播稿50字
2015/08/19 职场文书
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang