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);
}
}
})
}
}
})
}
})