uniapp登录小程序和app

<!-- 第三方登录 -->
<!-- #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'
				}
			})
		}
	})
},
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值