放置按钮,如果用于没有授权就显示授权按钮,否则就显示用户微信信息。
<template> <view> <view v-if="userInfo !=''"> <view> <image :src="userInfo.avatarUrl" mode=""></image> </view> <view> {{userInfo.nickName}} </view> </view> <view v-else> <button open-type="getUserInfo" @getuserinfo="onGotUserInfo">授权</button> </view> </view> </template>
js代码实现:获取用户信息操作,并赋值给数组。
<script> export default { data() { return { userInfo: [] } }, onLoad(){ this.changeLogin(); }, methods: { changeLogin(){ // 授权 // 获取用户详细信息, 可以获取到说明已经授权过, 直接拿到用户信息 uni.getUserInfo({ provider: 'weixin', //授权成功的回调 success(res) { // console.log(res) }, //第一次进入小程序 fail() { uni.showToast({ title: '请点击授权进行登录', icon: 'none' }); } }); }, /** * 用户同意授权个人微信信息 * @param {Object} e 用户的信息 */ onGotUserInfo(e) { var that =this that.userInfo = e.detail.userInfo console.info(e.detail.userInfo) } } } </script> <style> page{background-color: #f4f3f3;} .content{ display: flex; flex-direction: column; } .userinfo{ width: 100%;align-items: center; text-align: center; background-color: #31A3FB; padding-top: 80rpx; padding-bottom: 80rpx;} .userimg{ width: 150rpx; height: 150rpx; border-radius: 50%; overflow: hidden;margin: 0 auto; } .userimg image{ width: 150rpx; height: 150rpx; display: inline-block;} .nickName{font-size: 35rpx; color: #FFFFFF; margin-top: 20rpx;} .userinfo button{ width: 200rpx; height: 80rpx; margin: 0 auto; font-size: 35rpx;} </style>
文章评论(0)