微信小程序云开发获取用户信息

微信小程序云开发获取用户信息

wx.getUserProfile 直接获取userInfo

//js代码
 data: {
    userName: '', //用户名
    userAvatar: '', //用户头像URL
    isLogin: false, //判断用户登录状态
  },
  onLoad(){
  },
  login() {
    //调用小程序登录接口，获取用户信息
    wx.getUserProfile({
      desc: '用于完善用户资料', 
      success: res => {
        let user = res.userInfo;
        //用户信息缓存到本地
        wx.setStorageSync('user', user);
        console.log('授权成功', user);
        this.setData({
          userName: user.nickName,
          userAvatar: user.avatarUrl,
          isLogin: true
        })

      },
      fail: res => {
        console.log('授权失败', res)
      }
    })
  },

wxml代码

<button type="primary" wx:if="{{!isLogin}}" bindtap="login">授权登录</button>
<view wx:else class="user-Info">
  <image src="{{userAvatar}}"></image>
  <text>用户名：{{userName}}</text>
  <text>电话号码：{{phone}}</text>
  <button type="warn" bindtap="logout">退出登录</button>
</view>

实现效果：

知识点： islogin用来判断用户是否登录，未登录显示授权登录按钮，登录则显示退出登录。 用户信息通过wx.setStorageSync存储在本地storage，如果用户已登录且未点击退出登录则重新编译时从本地获取用户信息，直接渲染到视图。