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

  • 相关阅读:
    png 图片的缩放
    数据结构>图的最短路径
    2007年7月25日在博客园的排名上升到前400名
    C# 汉字转拼音(全拼)
    修改 Linux 主机名
    C# 事件的继承
    一个实现了 IDisposable 接口的基类
    Windows 防火墙上也有端口映射功能
    网上邻居不能访问的问题
    令网站提速的7大秘方
  • 原文地址:https://www.cnblogs.com/remly/p/10706349.html
Copyright © 2011-2022 走看看