uniapp登录小程序和app

最新推荐文章于 2024-08-23 11:03:15 发布

小小前端不开心

最新推荐文章于 2024-08-23 11:03:15 发布

阅读量212

点赞数

分类专栏： uniapp 文章标签： uni-app

本文链接：https://blog.csdn.net/hum1108/article/details/116940575

版权

uniapp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!-- 第三方登录 -->
<!-- #ifdef APP-PLUS -->
<view class="third_wrapper">
	<view class="third_line">
		<text class="txt">第三方账号登录</text>
	</view>
	<view class="third_icon_wrapper">
		<image src="../../static/icons/weixin.png" @click="appLogin('weixin')" class="third_icon" mode=""></image>
		<image src="../../static/icons/QQ.png" @click="appLogin('qq')" class="third_icon" mode=""></image>
		<image src="../../static/icons/weibo.png" @click="appLogin('sinaweibo')" class="third_icon" mode=""></image>
	</view>
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<button open-type="getUserInfo" @getuserinfo="wxLogin" class="wx_login">微信一键登录</button>
<!-- #endif -->

.third_wrapper{
	margin-top: 50upx;
	.third_line{
		position: relative;
		margin: auto;
		width: 90%;
		text-align: center;
		&::after{
			content: '';
			position: absolute;
			top: 20upx;
			left: 0;
			right: 0;
			z-index: -1;
			width: 100%;
			height: 1px;
			background-color: #ccc;
		}
		.txt{
			color: #999;
			font-size: 14px;
			letter-spacing: 0.1em;
			padding: 0 20upx;
			background-color: #F8F8F8;
		}
	}
	.third_icon_wrapper{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 40upx;
		.third_icon{
			width: 80upx;
			height: 80upx;
			margin-right: 60upx;
			&:last-child{
				margin-right: 0;
			}
		}
	}
}
.wx_login{
	width: 90%;
	margin-top: 30upx;
}

appLogin(loginType){
	uni.login({
		provider:loginType,
		success:res=>{
			uni.getUserInfo({
				provider:loginType,
				success:info=>{
					// 成功获取用户信息
					console.log(info)
					const {userInfo}=info
					let avatar,name,id
					switch(loginType){
						case 'weixin':{
							avatar=userInfo.avatarUrl
							name=userInfo.nickName
							id=userInfo.openId
						};break;
						case 'qq':{
							avatar=userInfo.figureurl_qq_2
							name=userInfo.nickName
							id=userInfo.openId
						};break;
						case 'sinaweibo':{
							avatar=userInfo.avatar_large
							name=userInfo.nickName
							id=userInfo.id
						};break;
						default:null
					}
					console.log(avatar,name,id)
					// 登录请求
					uni.request({
						
					})
				}
			})
		}
	})
},
// 微信端登录
wxLogin(e){
	const userData = e.detail.userInfo
	console.log(userData)
	uni.login({
		provider:'weixin',
		success:res=>{
			// 获取用户的授权码-code
			const {code} = res
			// 此处为模拟获取到用户信息后进行登录
			uni.setStorage({ //缓存
				key:'userInfo',
				data:{
					avatar:userData.avatarUrl,
					username:userData.nickName,
					ID:code,
					sex:-1,
					birthday:'2020-05-20'
				}
			})
		}
	})
},