获取用户的头像和昵称
wxml 代码
<view wx:if="{{!openId}}">
<button type="primary" wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" class="btn">授权登录</button>
<view wx:else>请升级微信版本</view>
</view>
<view wx:if="{{openId}}">
<view class="user">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover" />
<view class="userinfo-nickname">{{userInfo.nickName}}</view>
<view class="user-motto">{{motto}}</view>
</view>
</view>
这里用的是微信小程序提供的wx:if和wx.else来实现按钮和头像昵称的显示和隐藏,判断的标准是是否获得openId.注意:userInfo和openId要事先定义在页面的JS页面中,这样才可以作为判断的依据
这里是用微信开发文档提供的方法获取用户信息
请参考微信开发文档 wx.getUserInfo
一键点击弹出授权询问
bindGetUserInfo(e) {
const that = this;
wx.getSetting({
success(res) {
if (res.authSetting["scope.userInfo"]) {
wx.getUserInfo({
success: function (res) {
//授权成功
//云函数调用
wx.cloud.callFunction({
name: "login",
success: res => {
console.log("云函数调用成功");
that.setData({
openId: res.result.openid,
userInfo: e.detail.userInfo
}),
that.data.userInfo.openId = that.data.openId
console.log('userInfo', that.data.userInfo)
wx.setStorageSync("userInfo",that.data.userInfo)
},
fail: res => {
console.log("云函数调用失败");
}
})
}
})
}
}
})
},
这里因为要获取openid,所以用到了云函数
授权成功之后将获取的userInfo 存到缓存中,这里用到wx.setStorageSync 方法
然后在页面的JS中添加
onLoad: function (options) {
//页面加载
const ui = wx.getStorageSync("userInfo");
this.setData({
userInfo: ui,
openId: ui.openid
})
},
这样就可以实现再次登录的时候,不需要再从服务器请求用户数据了