微信小程序开发之——用户登录-获取用户信息(5)

一 概述

小程序中，获取用户信息的两种方式：

• 使用<open-data>组件，不需要用户授权，就可以获取用户头像、昵称，性别等，适合只用来展示的情况
• 单击按钮，用户授权，获取用户信息数据

二 <open-data>组件获取用户信息

2.1 pages/index/index.wxml

<view class="container">
  <view class="userinfo">
      <!--用户头像-->
      <open-data type="userAvatarUrl"  class="userinfo-avatar"></open-data>
       <!--用户昵称-->
      <open-data type="userNickName"></open-data>
       <!--用户性别-->
       <open-data type="userGender" lang="zh_CN"></open-data>
  </view>
</view>

说明：

type 的合法值

取值	说明
groupName	拉取群名称
userNickName	用户昵称
userAvatarUrl	用户头像
userGender	用户性别
userCity	用户所在城市
userProvince	用户所在省份
userCountry	用户所在国家
userLanguage	用户的语言

lang的合法值

取值	说明
en	英文
zh_CN	简体中文
zh_TW	繁体中文

2.2 pages/index/index.wxss

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
}
.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

2.3 效果图

三 点击获取用户信息

3.1 布局文件(pages/user/user.wxml)

<view class="container">
<view class="userinfo">
  <button wx:if="{{!hasUserInfo}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取头像昵称</button>
  <block wx:else>
    <!--用户头像-->
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
    <!--用户昵称-->
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    <!--用户所在城市-->
    <text class="userinfo-nickname">{{userInfo.city}}</text>
    <!--用户性别-->
     <text class="userinfo-nickname">{{userInfo.gender==0?"未知":userInfo.gender==1?"男":"女"}}</text>
  </block>
</view>
</view>

说明：

• open-type=“getUserInfo”：获取用户信息，可以从bindgetuserinfo回调中获取到用户信息（小程序插件中不能使用）

3.2 样式文件(pages/user/user.wxss)

.container{
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}
.userinfo{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.userinfo-avatar{
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
.userinfo-nickname{
  color:#f00;
}

3.3 逻辑文件(pages/user/user.js)

const app = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    userInfo: {},
    hasUserInfo: false
  },
  getUserInfo: function (e) {
    console.log(e.detail.userInfo)
    if (e.detail.userInfo) {
      this.setData({
        userInfo: e.detail.userInfo,
        hasUserInfo: true
      })
    }
  },
})

3.4 效果图

输出信息说明

取值	说明
avatarUrl	用户头像的URL地址
nickName	用户昵称
gender	用户的性别，0表示未知，1表示男，2表示女
country	用户所在的国家
provice	用户所在的省份
city	用户所在的城市

四 登录获取用户信息优化

4.1 问题

• 需要在pages/user/user.wxml中点击按钮才能获取用户信息
• 小程序启动时应用授权后，保存用户信息
• 指定页面的onLoad函数，调用app.js中保存的用户信息

4.2 app.js 授权时保存用户数据

App({
  onLaunch() {
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          //执行到此处表示用户已经授权，可以直接获取到用户信息
          wx.getUserInfo({
            success: res => {
              console.log(res.userInfo);
              this.globalData.userInfo = res.userInfo
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null,
    token: null //保存token
  },
})

4.3 pages/user/user.js中onLoad中获取用户授权

 onLoad: function (options) {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: e.detail.userInfo,
        hasUserInfo: true
      })
    } else {
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    }
  },

4.4 优化后效果——重新编辑后无需点击按钮自动获取用户信息显示

五 参考源码

• 参考源码