zoukankan      html  css  js  c++  java
  • 小程序app.onLaunch中获取用户信息,index.onLoad初次载入时取不到值的问题

    问题描述:

    //app.js
    App({
      globalData:{
        nickname:''
      },
      onLaunch: function () {
        let that=this;
        //假设已经授权成功
        wx.getUserInfo({
            success(res){
                //获取用户信息并赋值给globalData
                that.globalData.nickname=res.userInfo.nickName;
            }
        })
    
    
      }
    })
    
    //index.js
    const app = getApp()
    Page({
      data: {
        myNickName:''
      },
      onLoad: function (option) {
        console.log(app.globalData.nickname); //结果:"" 
        this.setData({
            myNickName:app.globalData.nickname
        })
        //由于wx.getUserInfo()是异步请求,不知道什么时候成功返回数据,导致获取失败
      }
    })

    时序图描述:

    解决方案

    //app.js
    App({
      globalData:{
        nickname:''
      },
      onLaunch: function () {
        let that=this;
        //假设已经授权成功
        wx.getUserInfo({
          success(res) {
            let tmp=res;
            
            setTimeout(()=>{//更清楚的模拟异步环境,设置5秒后执行代码
              //获取用户信息并赋值给globalData
              that.globalData.nickname = res.userInfo.nickName;
              if (that.userInfoReadyCallback) {
                console.log('call back')
                that.userInfoReadyCallback(res.userInfo.nickName)
              }
            },5000)
    
          }
        })
    
      }
    })
    
    //index.js
    const app = getApp()
    Page({
      data: {
        myNickName:''
      },
      onLoad: function (option) {
        let that = this;
        let mynickname = app.globalData.nickname;
        //如果app.onLaunch中的wx.getUserInfo()返回够快
        //在app.onLoad之前就已经初始化了app.globalData.nickname则直接更新本界面的this.data.nickname
        if(mynickname.length){
          this.setData({
            nickname:mynickname
          })
        //定义回调函数,一旦app.onLaunch的wx.getUserInfo获取到用户信息的时候,立即运行该回调函数
        }else{
          app.userInfoReadyCallback=res=>{
            this.setData({
              nickname:res
            })
          }
        }
      }
    })

    解决方案时序图:

    总结

    1.巧用回调函数

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

  • 相关阅读:
    个人管理:2,3月微薄整理
    ORM相关图片整理
    LmgORM项目 实体类转换器
    (转)Enterprise Architect 7.0入门教程
    禁止右键复制的代码
    UML示例图(转)学习
    Flash FMS Helloword
    模拟生成Guid
    Flash Media Server安装
    WebSphere创建删除概要文件
  • 原文地址:https://www.cnblogs.com/remly/p/10706349.html
Copyright © 2011-2022 走看看