微信小程序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请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
下拉菜单点击实现连接跳转功能的js代码
May 19 Javascript
JavaScript 32位整型无符号操作示例
Dec 08 Javascript
浅析IE10兼容性问题(frameset的cols属性)
Jan 03 Javascript
js实现页面跳转重定向的几种方式
May 29 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
Sep 25 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
May 11 Javascript
DOM 事件的深入浅出(二)
Dec 05 Javascript
three.js实现围绕某物体旋转
Jan 25 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
javascript触发模拟鼠标点击事件
Jun 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
php miniBB中文乱码问题解决方法
2008/11/25 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
AngularJS中的模块详解
2015/01/29 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
JavaScript对Json的增删改属性详解
2016/06/02 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
JS继承实现方法及优缺点详解
2020/09/02 Javascript
python条件和循环的使用方法
2013/11/01 Python
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
python 简单备份文件脚本v1.0的实例
2017/11/06 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
Django通过json格式收集主机信息
2020/05/29 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
党员的自我评价范文
2014/01/02 职场文书
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
班主任班级寄语大全
2014/04/04 职场文书
班主任新年寄语
2014/04/04 职场文书
节能宣传周活动总结
2014/05/08 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
检讨书范文500字
2015/01/28 职场文书
纪检干部学习心得体会
2016/01/23 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL