问题描述:

  1. //app.js
  2. App({
  3. globalData:{
  4. nickname:''
  5. },
  6. onLaunch: function () {
  7. let that=this;
  8. //假设已经授权成功
  9. wx.getUserInfo({
  10. success(res){
  11. //获取用户信息并赋值给globalData
  12. that.globalData.nickname=res.userInfo.nickName;
  13. }
  14. })
  15.  
  16. }
  17. })
  18.  
  19. //index.js
  20. const app = getApp()
  21. Page({
  22. data: {
  23. myNickName:''
  24. },
  25. onLoad: function (option) {
  26. console.log(app.globalData.nickname); //结果:""
  27. this.setData({
  28. myNickName:app.globalData.nickname
  29. })
  30. //由于wx.getUserInfo()是异步请求,不知道什么时候成功返回数据,导致获取失败
  31. }
  32. })

时序图描述:

解决方案

  1. //app.js
  2. App({
  3. globalData:{
  4. nickname:''
  5. },
  6. onLaunch: function () {
  7. let that=this;
  8. //假设已经授权成功
  9. wx.getUserInfo({
  10. success(res) {
  11. let tmp=res;
  12.  
  13. setTimeout(()=>{//更清楚的模拟异步环境,设置5秒后执行代码
  14. //获取用户信息并赋值给globalData
  15. that.globalData.nickname = res.userInfo.nickName;
  16. if (that.userInfoReadyCallback) {
  17. console.log('call back')
  18. that.userInfoReadyCallback(res.userInfo.nickName)
  19. }
  20. },5000)
  21.  
  22. }
  23. })
  24.  
  25. }
  26. })
  27.  
  28. //index.js
  29. const app = getApp()
  30. Page({
  31. data: {
  32. myNickName:''
  33. },
  34. onLoad: function (option) {
  35. let that = this;
  36. let mynickname = app.globalData.nickname;
  37. //如果app.onLaunch中的wx.getUserInfo()返回够快
  38. //在app.onLoad之前就已经初始化了app.globalData.nickname则直接更新本界面的this.data.nickname
  39. if(mynickname.length){
  40. this.setData({
  41. nickname:mynickname
  42. })
  43. //定义回调函数,一旦app.onLaunch的wx.getUserInfo获取到用户信息的时候,立即运行该回调函数
  44. }else{
  45. app.userInfoReadyCallback=res=>{
  46. this.setData({
  47. nickname:res
  48. })
  49. }
  50. }
  51. }
  52. })

解决方案时序图:

总结

1.巧用回调函数

参考:https://blog.csdn.net/zjw_python/article/details/80641963

小程序app.onLaunch中获取用户信息,index.onLoad初次载入时取不到值的问题的更多相关文章

  1. 微信小程序~App.js中获取用户信息

    (1)代码:主要介绍下获取用户信息部分 onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('logs') || [] l ...

  2. 微信小程序-form表单-获取用户输入文本框的值

    微信小程序-form表单-获取用户输入文本框的值 <input name='formnickname' class="textarea" placeholder=" ...

  3. 微信小程序在组件中获取界面上的节点信息wx.createSelectorQuery

    节点信息查询 API 可以用于获取节点属性.样式.在界面上的位置等信息. 最常见的用法是使用这个接口来查询某个节点的当前位置,以及界面的滚动位置. 示例代码: const query = wx.cre ...

  4. 明令禁止下,哪些APP在违规获取用户信息?

    2019年4月28日消息  移动互联网时代各大APP大行其道,用户为了更便捷地享受互联网服务,常常需要让渡部分个人信息.在信息获取不透明的情况下,不少APP运营企业出现过度获取乃至违规获取用户信息的情 ...

  5. 微信小程序app.js中设置公有变量

    初始化GlobalData 在App.js的最上方可以设置GlobalData的初始值. App({ globalData:{ appid: '1wqas2342dasaqwe232342xxxxxx ...

  6. 小程序使用wx.chooseAddress获取用户手机号码,微信chooseAddress接口获取用户收货信息

    通常用户在商城购买产品后,需要填写他的收货信息,方便我们发货,但是在手机上写字非常不方便,一个客户的收货信息包括:姓名,地址和手机号码这些内容全部填写的话,至少要写20个字. 地址 所以有些客户在手机 ...

  7. 微信小程序~App.js中登录

    (1)初始化项目中App.js登录代码 // 登录 wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, u ...

  8. 微信小程序---app.json中设置背景色不生效解决办法

    按照官方文档的说明,backgroundColor应该可以设置窗口的背景色. "window":{ "backgroundTextStyle":"li ...

  9. uniapp 在h5和小程序上使用高德获取用户城市位置

    开发文档 https://lbs.amap.com/api 错误状态 https://lbs.amap.com/api/webservice/guide/tools/info/ 虽然用的高德但是你还需 ...

随机推荐

  1. 0412ooday01.txt=============对象和类(上)

    对象和类(上) 面向对象程序设计:面向过程的结构化程序设计.什么是抽象数据类型.什么是类 定义一个类:定义类的成员变量.定义类的方法 创建并使用对象:使用new关键字创建对象.引用类型变量.访问对象的 ...

  2. 自定义shiro实现权限验证方法isAccessAllowed

    由于Shiro filterChainDefinitions中 roles默认是and, admin= user,roles[system,general] 比如:roles[system,gener ...

  3. 转化.vdi到.vmdk

    OracleVirtualBox转化.vdi到.vmdk E:\Genymotion-deployed\CentOS_7_64>"D:/Program Files/Oracle/Vir ...

  4. JAVA进阶18

    间歇性混吃等死,持续性踌躇满志系列-------------第18天 1.飞机游戏小项目 ①创建窗口 package cn.xfj.game; import javax.swing.*; import ...

  5. 关于lnmp下 phalcon和tp框架下的nginx文件配置

    vim /etc/nginx/sites-available/default   进入修改目录 1.正常项目配置 server { listen 80 default_server; listen [ ...

  6. Python自动化中的鼠标事件

    1)form selenium.webdriver.common.action_chains import ActionChains  导入该模块 2)ActionChains(driver) :用于 ...

  7. python制作串口工具

    # coding:utf-8import timeimport serialimport stringimport binasciiimport linecache FilePath="G: ...

  8. find your present (2) hdoj 2095

    /* author:谦智 find your present (2) hdoj 2095 法一:用暴力 法二:用map 法三: 符号是^. 异或是个位运算符号,具体是怎么操作的请百度,这里有个特性使得 ...

  9. multiwan 脚本

    以下为校区ACM实验室多拨脚本,使用了macvlan模块,具体策略路由和连接标记等思路就不解释了. #! /bin/bash getip() { |grep -o -e 'inet addr:[^ ] ...

  10. 如何使用npm构建一个react demo项目

    方法一: 1) 安装node.js环境  点我进入nodejs官网 1.1) 下载LTS(Long term support)版本,安装 1.2) 在cmd中使用以下命令查看node是否安装成功 no ...