小程序模板网

微信小程序获取用户头像昵称等信息

发布时间:2021-07-05 08:49 所属栏目:小程序开发教程
调用微信小程序封住的 wx.getUserInfo({ })
微信新创建的项目中自带获取功能的代码,但是代码量太多,所以给简化了一下方便以后在别的项目中使用
直接上代码>>>
先在app.js中声明一个全局变量userInfo
globalData: {
    userInfo: null
}
在需要现显示的wxml中
<view class="container">
    <view class="userinfo">
        <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image> //头像
        <text class="userinfo-nickname">{{userInfo.nickName}}</text>//昵称
    </view>
</view>
在需要现显示页面的wxss中定义一下显示的样式
.userinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.userinfo-avatar {
     width: 128rpx;
    height: 128rpx;
    margin: 20rpx;
    border-radius: 50%;
}

.userinfo-nickname {
    color: #aaa;
}
在需要现显示的js中
data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo')
}

onLoad: function () {     //页面加载监听函数
 wx.getUserInfo({
    success: res => {
      console.log(res)    //获取的用户信息还有很多,都在res中,看打印结果
      this.setData({
        userInfo: res.userInfo,
        hasUserInfo: true
      })
    }
  })
}
以上代码就可实现微信小程序获取用户信息
注意:微信小程序获取用户信息需用户授权,以上代码是用户已授权节省代码量,若需授权请在app.js加入如下代码:
onLaunch: function () {
// 登录
wx.login({
  success: res => {
    // 发送 res.code 到后台换取 openId, sessionKey, unionId
  }
})
// 获取用户信息
wx.getSetting({
  success: res => {
    if (res.authSetting['scope.userInfo']) {
      // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
      wx.getUserInfo({
        success: res => {
          // 可以将 res 发送给后台解码出 unionId
          this.globalData.userInfo = res.userInfo

          // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
          // 所以此处加入 callback 以防止这种情况
          if (this.userInfoReadyCallback) {
            this.userInfoReadyCallback(res)
          }
        }
      })
    }
  }
 })
},


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/26989.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询