uniapp之登录（短信验证码，账号密码，第三方登录）

水深无声 2022-11-06 05:51 894阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 2][]

### [uni.getProvider(OBJECT)][uni.getProvider_OBJECT] ###

### [uni.login(OBJECT)][uni.login_OBJECT] ###

### [uni.getUserInfo(OBJECT)][uni.getUserInfo_OBJECT] ###

<template>
    	<view class="loginWrap ">
    		<view class="imgWrap">
    			<image  class="logo" style="width: 100upx;height: 100upx;" src="../../static/logo.png" mode=""></image>
    		</view>
    		
    		<form v-if="loginWay == '短信验证登录'" class="loginForm" @submit="formSubmit">
    			<view class="uni-form-item uni-column">
    				<u-input placeholder="请输入登录账号" v-model="value" type="number" clearable />
    			</view>
    			<view class="uni-form-item uni-column">
    				<u-input v-model="value" type="password"  password-icon="true" />
    				<text class="forgetText">忘记密码</text>
    			</view>
    			<button form-type="submit" class="loginbtn" type="default">登录</button>
    		</form>
    		
    		
    		<u-form class="loginForm" v-if="loginWay == '账号密码登录'" :model="form" ref="uForm">
    			<view class="uni-form-item uni-column">
    				<u-input placeholder="请输入手机号码" type="number" v-model="form.name" />
    			</view>
    			<view class="uni-form-item uni-column">
    				<u-input placeholder="请输入验证码" v-model="form.name" />
    				<view class="wrap">
    					<u-toast ref="uToast"></u-toast>
    					<u-verification-code 
    					:seconds="seconds" 
    					@end="end" 
    					@start="start" 
    					ref="uCode" 
    					@change="codeChange"
    					></u-verification-code>
    					<u-button type="success" @click="getCode">{
       {tips}}</u-button>
    				</view>
    			</view>
    			<button class="loginbtn" type="default">登录</button>
    		</u-form>
    		
    		<view class="action center">
    			<text @click="changeLoginWay" style="color: #71B6F7;">{
       {loginWay}}</text>
    		</view>
    		<view class="wechatLogin center">
    			<text>————社交账号登录————</text>
    			<button class="wechatLoginBtn" open-type="getUserInfo"  @getuserinfo="wechatLogin" ></button>
    		</view>
    		
    	</view>
    </template>
    
    <script>
    	export default{
    		data(){
    			return{
    				form:{
    					name:''
    				},
    				value:'',
    				loginWay:'短信验证登录',
    				seconds:60,
    				tips:''
    			}
    		},
    		methods:{
    			//登录提交
    			formSubmit(){
    				console.log("页面跳转")
    			
    			},
    			//微信登录
    			wechatLogin(){		
    				let _that = this;
    				uni.getSetting({
    				 success(res) {
    					console.log("授权：",res);
    				   if (!res.authSetting['scope.userInfo']) {
    						//这里调用授权
    						console.log("当前未授权");
    				   } else {
    						//用户已经授权过了
    						console.log("当前已授权");
    						//#ifdef MP-WEIXIN
    						uni.getProvider({
    						  service: 'oauth',
    						  success: function (res) {
    							   console.log(res.provider)
    							if (~res.provider.indexOf('weixin')) {
    								uni.login({
    									provider: 'weixin',
    									success: (res2) => {
    										
    										uni.getUserInfo({
    											provider: 'weixin',
    											success: (info) => {//这里请求接口
    												console.log("登录返回信息",res2);
    												console.log("获取用户信息",info);
    												
    												_that.$store.commit('login',info.userInfo);
    												uni.redirectTo({
    												    url: '../index/index'
    												});
    											},
    											fail: () => {
    												uni.showToast({title:"微信登录授权失败",icon:"none"});
    											}
    										})
    								
    									},
    									fail: () => {
    										uni.showToast({title:"微信登录授权失败",icon:"none"});
    									}
    								})
    								
    							}else{
    								uni.showToast({
    									title: '请先安装微信或升级版本',
    									icon:"none"
    								});
    							}
    						  }
    						});
    						//#endif
    						
    						
    						
    				   }
    				 }
    			   })
    				 
    			},
    			//点击切换登录方式
    			changeLoginWay(){
    				if(this.loginWay == '短信验证登录'){
    					this.loginWay = '账号密码登录'
    					console.log("222")
    				}else if(this.loginWay == '账号密码登录'){
    					console.log("111111")
    					this.loginWay = '短信验证登录'
    				}
    				
    			},
    			//
    			codeChange(text) {
    				// console.log("codeChange",text)
    				this.tips = text;
    			},
    			//点击获取验证码倒计时
    			getCode(){
    				console.log("aa")
    				if(this.$refs.uCode.canGetCode) {
    					// 模拟向后端请求验证码
    					uni.showLoading({
    						title: '正在获取验证码'
    					})
    					setTimeout(() => {
    						uni.hideLoading();
    						// 这里此提示会被this.start()方法中的提示覆盖
    						this.$u.toast('验证码已发送');
    						// 通知验证码组件内部开始倒计时
    						this.$refs.uCode.start();
    					}, 2000);
    				} else {
    					
    					this.$u.toast('倒计时结束后再发送');
    				}
    			},
    			end() {
    				this.$u.toast('倒计时结束');
    			},
    			start() {
    				console.log("aa1111111")
    				this.$u.toast('倒计时开始');
    			}
    			
    		}
    	}
    </script>
    
    <style lang="less">
    		
    	.loginWrap{
    		.imgWrap{
    			text-align: center;
    			padding: 50upx;
    		}
    		.loginForm{
    			padding: 30upx;
    			.uni-form-item{
    				display: flex;
    				align-items: center;
    				justify-content: space-between;
    				border-bottom: 1upx solid #DCDCDC;
    				padding: 10upx 30upx;
    				margin: 20upx;
    				u-input{
    					flex: 1;
    				}
    				.forgetText{
    					color: #C8C7CC;
    				}
    				
    			}
    				
    			.wrap{
    				height: auto;
    			}
    			.loginbtn{margin: 20upx; margin-top: 60upx;background: #2CA800;color: #fff;}
    		}
    		.wechatLogin{
    			margin-top: 60upx;
    			text{
    				color: #CCCCCC;
    			}
    			.wechatLoginBtn{
    				background-image: url(../../static/img/wechat.png);
    				border: none;
    				width: 32px;
    				height: 32px;
    				&::after{
    					border: none;
    				}
    			}
    			image{
    				width: 54upx;
    				height: 54upx;
    				margin-top: 30upx;
    			}
    		}
    	}
    </style>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 3][]

微信登录成功页面

<template>
    	<view class="content-wrapp">
    		<view v-if="loginStatus" class="content">
    			<image class="logo" :src="userInfo.avatarUrl"></image>
    			<view class="text-area">
    				<text class="title">{
       {userInfo.nickName}}</text>
    			</view>
    		</view>
    		<view class="content" v-else>
    				<button @click="tapLoginBtn" type="default">请先登录</button>
    		</view>
    		
    	</view>
    </template>
    
    <script>
    	import {mapState} from 'vuex'
    	export default {
    		data() {
    			return {
    				title: 'Hello'
    			}
    		},
    		computed:{
    			...mapState({
    				loginStatus:state=>state.loginStatus,
    				userInfo:state=>state.userInfo
    			})
    		},
    		onLoad() {
    		
    		},
    		onShow(){
    			console.log("打印登录状态",this.loginStatus)
    			console.log("打印登录后的用户信息",this.userInfo)
    		},
    		methods: {
    			tapLoginBtn(){
    				uni.navigateTo({
    					url:'../login/index'
    				})
    			}
    		}
    	}
    </script>
    
    <style>
    	.content {
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    		justify-content: center;
    	}
    
    	.logo {
    		height: 200rpx;
    		width: 200rpx;
    		margin-top: 200rpx;
    		margin-left: auto;
    		margin-right: auto;
    		margin-bottom: 50rpx;
    	}
    
    	.text-area {
    		display: flex;
    		justify-content: center;
    	}
    
    	.title {
    		font-size: 36rpx;
    		color: #8f8f94;
    	}
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2021030812021456.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210308120314376.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 2]: /images/20221023/9ad9cce49d4b4d918cae9f2c78f53cad.png
[uni.getProvider_OBJECT]: https://uniapp.dcloud.io/api/plugins/provider?id=getprovider
[uni.login_OBJECT]: https://uniapp.dcloud.io/api/plugins/login?id=login
[uni.getUserInfo_OBJECT]: https://uniapp.dcloud.io/api/plugins/login?id=getuserinfo
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 3]: /images/20221023/528375c64dc2437cb2457d1077fcfe11.png