小程序已授权之后，自动获取用户信息

index.wxml:

<view class="Box">
<button wx:if="{{canIUser && !hasUserInfo}}" size="mini" type="primary" plain="true" loading="true" open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取用户信息</button>
	<view wx:else>
		<image class="avatar" src="{{userInfo.avatarUrl}}"></image>
		<text>{{userInfo.nickName}}</text>
	</view>
</view>

index.wxss:

.Box,
.Box>view {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.avatar {
	width: 200rpx;
	height: 200rpx;
	margin-top: 250rpx;
}

.Box text {
	margin-top: 250rpx;
}

.Box button {
	margin-top: 750rpx;
}

index.js

var app = getApp();
data: {
    userInfo: null,
    // 防止微信版本过低不能使用open-type属性
    canIUser: wx.canIUse("button.open-type.getUserInfo"),
    // 用于条件渲染：判断页面信息按钮是否显示
    hasUserInfo: false
},
/* 获取用户信息 */
getUserInfo(res) {
    this.setData({
	userInfo: res.detail.userInfo,
	hasUserInfo: true
    })
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
    if (app.globalData.userInfo) {				//获取用户信息是一个异步操作，在onLoad函数加载的时候app.js中的onLaunch可能还没有加载，所以需要判断是否获取成功
        this.setData({
            userInfo: app.globalData.userInfo,
            hasUserInfo: true
        })
    } else if (this.data.canIUser) {				//判断canIUser的值是否为true，实则在判断微信小程序版本是否支持相关属性		
        app.userInfoReadyCallback = (res) => {			// userInfoReadyCallback：userInfo的回调函数，声明一个回调函数，将回调函数传给app.js，userInfo加载完成后会执行这个回调函数，这个回调函数会将获取的getUserInfo的结果直接传回来
	// 在app.js中获取用户信息之后调用这个函数，结果放在函数的参数中
            this.setData({
                userInfo: res.userInfo,
                hasUserInfo: true
            })
        }
    } else {											
			                          wx.getUserInfo({						//在老的版本中是可以直接调用授权接口并获取用户信息
		success: (res) => {
			this.setData({
				userInfo: res.userInfo,
				hasUserInfo: true
			})
		}
	 })
    }
},

app.js:

App({
    // 全局数据，供小程序内的个页面以及组建使用
    globalData: {
        userInfo: null,
    },

    onLaunch: function() {
    /* 已授权之后，自动获取用户信息 */

        // 判断是否授权
        wx.getSetting({
            success: (res) => {				    //箭头函数为了处理this的指向问题	
                if (res.authSetting["scope.userInfo"]) {
                    console.log("已授权");
                    // 获取用户信息
                    wx.getUserInfo({
                        success: (res) => { 			    //箭头函数为了处理this的指向问题
                            //console.log(res); 用户信息结果
                            this.globalData.userInfo = res.userInfo;
                            if (this.userInfoReadyCallback) {	    //当index.js获取到了globalData就不需要回调函数了，所以回调函数需要做做一个判断，如果app.js中有和这个回调函数，那么就对这个函数进行调用，并将请求到的结果传到index.js中
								    this.userInfoReadyCallback(res);
                            }
                        }
                    })
                }
            }
        })
    }
})