微信小程序中全局变量userInfo在其它页面不可用(wx.getUserInfo为异步获取信息)

app.js中获取用户的openid和userinfo,并存储为全局变量,当在index中调用getApp().globalData.userInfo时却返回为空值:

getUserInfo: function () {
    var that = this
    wx.getUserInfo({
        success: function (res) {
            console.log('用户信息', res.userInfo)
                that.globalData.userInfo = res.userInfo
            }
        })
    },

原因:

      微信小程序中wx.getUserInfo为异步获取信息

将getuserInfo改为回调函数:

getUserInfo: function (cb) {
        var that = this
        if (this.globalData.userInfo) {
            typeof cb == "function" && cb(this.globalData.userInfo)
        } else {
            wx.getUserInfo({
                success: function (res) {
                    console.log('用户信息', res.userInfo)
                    that.globalData.userInfo = res.userInfo
                    typeof cb == "function" && cb(that.globalData.userInfo)
                }
            })
        }
    },

在其他需要使用userinfo的页面中,可直接用以下代码:

getApp().getUserInfo(function(userinfo){
    console.log(userinfo);})

或在onload函数中:

onLoad: function (options) {
     var that = this
     getApp().getUserOpenid(function (openid) {
         that.setData({
             userName: getApp().globalData.userInfo.nickName,
             userOpenid: openid
         })
         console.log('用户openid', that.data.userOpenid)
     })
},
  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现微信小程序登录获取头像的代码如下所示: 1. 在小程序的 app.js 文件内定义全局变量 userInfo: ``` App({ globalData: { userInfo: null } }) ``` 2. 在小程序的 login 页面内,通过调用微信登录接口 wx.login(),获取用户登录凭证 code: ``` wx.login({ success: res => { if (res.code) { // 发起网络请求,获取用户信息 wx.request({ url: 'https://example.com/login', data: { code: res.code }, success: res => { // 将用户信息存储到全局变量 userInfo getApp().globalData.userInfo = res.data.userInfo } }) } else { console.log('登录失败!' + res.errMsg) } } }) ``` 3. 在小程序的个人信息页面内,通过调用微信用户信息接口 wx.getUserInfo(),获取用户信息: ``` wx.getUserInfo({ success: res => { // 将用户信息存储到全局变量 userInfo getApp().globalData.userInfo = res.userInfo } }) ``` 4. 在小程序的个人信息页面内,通过调用 wx:if 条件渲染,判断用户是否已经授权: ``` <view wx:if="{{userInfo}}"> <image src="{{userInfo.avatarUrl}}" /> <text>{{userInfo.nickName}}</text> </view> <view wx:else> <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取头像</button> </view> ``` 5. 在小程序的个人信息页面内,通过调用 bindgetuserinfo 事件,获取用户头像: ``` getUserInfo: function (e) { // 将用户信息存储到全局变量 userInfo getApp().globalData.userInfo = e.detail.userInfo } ``` 6. 最后,在小程序的个人信息页面内,通过调用全局变量 userInfo 的 avatarUrl 属性,显示用户头像: ``` <image src="{{userInfo.avatarUrl}}" /> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值