微信小程序获取用户信息 getUserProfile

getUserInfo和getUserProfile区别

• wx.getUserInfo 不在返回用户授权的头像昵称，只返回匿名信息，但 wx.getUserProfile 会返回用户授权的头像和昵称。     
• wx.getUserInfo 授权成功后，当下次调用时，不会再次弹窗，可以直接获取授权成功返回数据，但 wx.getUserProfile 每次都会弹窗，用户确认允许后才可以拿到用户信息
• wx.getUserProfile 可以获取用户信息和昵称后，可以存在自己服务器，不然弹窗太多影响用户体验

使用

index.wxml

<!-- 未登录 -->
<view wx:if="{{!hasUserInfo}}">
    <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
    <button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
</view>
<!-- 已登录 -->
<view wx:else>
    <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
    <view class="userinfo-nickname">{{userInfo.nickName}}</view>
</view>

index.js

Page({
    data: {
        userInfo: {},
        hasUserInfo: false,
        canIUseGetUserProfile: false,
    },
    onLoad() {
        if (wx.getUserProfile) {
            this.setData({
                canIUseGetUserProfile: true
            })
        }
    },
    getUserProfile(e) {
        // 使用wx.getUserProfile获取用户信息 开发者每次通过该接口获取用户个人信息均需用户确认
        // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
        wx.getUserProfile({
            // 声明获取用户个人信息后的用途，后续会展示在弹窗中 谨慎填写
            desc: '用于完善会员资料',
            success: (res) => {
                // console.log(res.userInfo); 
                this.setData({
                    userInfo: res.userInfo,
                    hasUserInfo: true
                })
            }
        })
    },
    getUserInfo(e) {
        // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，且返回匿名的用户个人信息
        this.setData({
            userInfo: e.detail.userInfo,
            hasUserInfo: true
        })
    },
})