标签:console 账号 res 用户 height 源码 userInfo 200rpx
在线直播系统源码,用户登录时获取到用户已有的账号信息
1、用户未授权(首次登录)
button open-type='getUserInfo'
2、用户已经授权(再次登录)
wx.getUserInfo
html文件:
<view class="indexContainer">
<image wx:if='{{userInfo.avatarUrl}}' class="avatarUrl" src="{{userInfo.avatarUrl}}"></image>
<button wx:else bindgetuserinfo='handleGetUserInfo' open-type="getUserInfo">获取用户信息</button>
<text class="userName">{{userInfo.nickName}}</text>
<!-- 测试事件绑定 -->
<!-- <view class="goStudy" catchtap="handleParent">
<text catchtap="handleChild">Hello World</text>
</view> -->
<view class="goStudy" catchtap="toLogs">
<text >Hello World</text>
</view>
</view>
css文件:
.indexContainer{
display: flex;
flex-direction:column;
align-items: center;
justify-content: center;
}
.avatarUrl{
width: 200rpx;
height: 200rpx;
border-radius: 50%;
margin:100rpx 0;
}
button{
width: 200rpx;
height: 200rpx;
border-radius: 50%;
margin: 100px 0;
font-size: 24rpx;
line-height: 200rpx;
text-align: center;
}
.userName{
font-size: 32rpx;
margin: 100rpx 0;
}
.goStudy{
width: 300rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
font-size: 28rpx;
border: 1rpx solid #333;
border-radius: 10rpx;
}
js文件:
Page({
/**
* 页面的初始数据
*/
data: {
msg:'初始化数据',
userInfo:{} //存放用户的基本信息
},
},
/**
* 生命周期函数--监听页面加载 页面加载就会执行
*/
onl oad: function (options) {
//修改msg数据 语法 this.setData() this代表当前页面的实例对象
// console.log(this.data.msg)
// this.setData({
// msg:'修改之后的数据'
// })
//console.log(this.data.msg)
//授权以后获取用户的信息
wx.getUserInfo({
success:(res)=>{
console.log(res);
this.setData({
userInfo:res.userInfo
})
},
fail:(err)=>{
console.log(err)
}
})
},
//获取用户信息的回调
handleGetUserInfo(res){
console.log(res)
if(res.detail.userInfo){ //允许修改userinfo的数据
this.setData({
userInfo:res.detail.userInfo
})
}
},
以上就是 在线直播系统源码,用户登录时获取到用户已有的账号信息,更多内容欢迎关注之后的文章
标签:console,账号,res,用户,height,源码,userInfo,200rpx 来源: https://www.cnblogs.com/yunbaomengnan/p/16348083.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。