小程序获取用户信息实现一键登录

2023-11-17

温馨提示 :以下小程序登录方式只适用于2.27.1版本库以下使用

详情请看微信官方文档调整

旧版获取用户信息实现登录流程

由于我是在hbuilderx中运行的小程序项目,所以一些语法与开发者工具中不同等问题就不一一详细说明了
下面是使用getUserProfile的方式来实现获取用户信息登录小程序的方式(2.27.1小程序基础库以上版本按照以下方式无法直接授权获取头像昵称)
在这里插入图片描述
在这里插入图片描述

login页面代码

<template>
	<!-- <view class="ebkContainer">
        <button class="wxq-btn loginWx" open-type="getUserInfo" @getuserinfo="getUserInfo">一键登录</button>
	</view> -->
	<view class="logoin_div" v-if="is_user_info==0">
			<image src="https://ebk-picture.oss-cn-hangzhou.aliyuncs.com/ebk-wap/img-202305170157187552-Group%2034032%403x.png" id="logo">
			<button @click="appLoginWx" class="logoin_button">
				微信账号一键登录
			</button>		
	</view>
	<view class="logoin_div" v-else-if="is_mobile==0">
			<image src="https://ebk-picture.oss-cn-hangzhou.aliyuncs.com/ebk-wap/img-202305170157187552-Group%2034032%403x.png" id="logo">
			<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="logoin_button">
				微信授权手机号
			</button>		
	</view>
</template>

<script>
	let app = getApp()
	export default {
		
		data() {
			return {
               code: '',
			   is_mobile:0,
			   is_user_info:0,
			}
		},
		onLoad (){
			//app.get_token();//更新token和seeun——key
		// this.up_data();
			
		
		},
		mounted() {
			
		},
		methods: {
			up_data(){
				app.get_token().then( res => {
					this.is_mobile = uni.getStorageSync('token').is_mobile
					this.is_user_info = uni.getStorageSync('token').is_user_info
					
					if(this.is_mobile==1 && this.is_user_info==1){
						// uni.navigateBack();//返回
						
					}
					
				})
				
			},
			appLoginWx(){//点击登录
			let _that = this;
				 uni.getUserProfile({
				 	desc: '初次登录',
				 	success: (info) => {//这里请求接口
					console.log(info.userInfo)
						_that.saveUserInfo(info.userInfo)
						setTimeout(()=>{
							uni.switchTab({
								url:'/pages/index/index'
							})
						},800)
				 	},
				 	fail: (e) => {
				 		console.log(e);
				 		uni.showToast({title:"微信登录授权失败11",icon:"none"});
				 	}
				})			
			},
			saveUserInfo(date){//更新用户公开信息
			let _that = this;	
			uni.request({
				url: app.globalData.URL + "auth/saveUserInfo",
					method: 'POST',
					data: {
						version:'251',
						client:'wxmp',
						token: uni.getStorageSync('token').token,
						nickname: date.nickName,
						province: date.province,
						city: date.city,
						country: date.country,
						headimgurl:date.avatarUrl,
						sex:date.gender,
					},
					success(res) {
					 	if(res.data.status=='ok'){
								uni.showToast({
									title: '绑定成功'
								})
							_that.up_data();
							app.get_token();//更新token和seeun——key						
						} 
					}
				})	
			},
			
			getPhoneNumber(e){
				let _that = this;
				uni.request({
					url: app.globalData.URL + "auth/mpRegister",
					method: 'POST',
					data: {
						version:'251',
						client:'wxmp',
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv,
						token: uni.getStorageSync('token').token,
					},
					success(res) {
							
					 	if(res.data.status=='ok'){
							console.log('444444');
							uni.showToast({
								title: '绑定成功',
								duration:2000,
								success:(e) =>{
									console.log('333333');
									
									_that.up_data();
									//app.get_token();//更新token和seeun——key
									
								},
								fail:(e)=>{
									console.log(e);
									console.log('55555');
								}
							})
						console.log(res.data.status);
						} 
					}
				})	
				
				
				
			},
		
		}
	}
</script>

<style lang="scss" scoped>
	.logoin_button{
		width: 520rpx;
		height: 88rpx;
		background: linear-gradient(225deg, #FFA941 0%, #FF920D 100%);
		margin: 0px auto;
		font-size: 34rpx;
		border-radius: 200rpx;
		font-weight: bold;
		color: #FFFFFF;
		// line-height: 64rpx;
		outline: none;
		border: none;
	}
	
	.logoin_div {
		height:100%;
		text-align:center;
		background-color: #FFFFFF;
	//	padding-bottom: 20rpx;
	}
	#logo{
		width: 244rpx;
		height: 276rpx;
		margin:120px auto ;
	}
	

	// 头部
	.headerTop {
		width: 100%;
		display: flex;
		padding: 22rpx 0;

		.logo {
			width: 197rpx;
			margin-right: 22rpx;

			image {
				width: 197rpx;
				height: 80rpx;
				vertical-align: middle;
			}
		}

		.search {
			flex: 1;
			height: 58rpx;
			position: relative;
			background-color: #FFFFFF;
			border-radius: 25rpx;
			margin-top: 10rpx;

			image {
				position: absolute;
				width: 22rpx;
				height: 20rpx;
				top: 18rpx;
				left: 20rpx;
				z-index: 999;
			}

			input {
				width: 100%;
				height: 58rpx;
				position: absolute;
				left: 0;
				top: 0;
				border: none;
				border-radius: 25rpx;
				padding: 0;
				margin: 0;
				padding-left: 54rpx;
				color: #666666;
				font-size: 24rpx;
			}
		}
	}

	// 轮播图
	.swiperBanner {
		width: 100%;
		.swiper {
			width: 100%;

			.linkHref {
				width: 100%;
				display: block;

				image {
					width: 100%;
					height: 300rpx;
				}
			}

			/deep/ .uni-swiper-dot {
				width: 36rpx;
				height: 5rpx;
				margin-right: 0;
				border-radius: 0;
			}

			/deep/ wx-swiper .wx-swiper-dot {
				width: 36rpx;
				height: 5rpx;
				margin-right: 0;
				border-radius: 0;
			}

			/deep/ uni-swiper .uni-swiper-dots-horizontal {
				bottom: 40rpx;
			}

			/deep/ wx-swiper .wx-swiper-dots-horizontal {
				bottom: 40rpx;
			}
		}
	}

	//权益分类
	.legalContainer {
		width: 100%;

		.swiperContainer {
			width: 100%;

			.swiper {
				width: 100%;
				height: 344rpx;
				margin-top: 22rpx;
				background-color: #fff;
				border-radius: 14rpx;
				padding: 22rpx 0;

				.list {
					width: 100%;

					.listCon {
						width: 20%;
						float: left;
						margin-bottom: 30rpx;

						.linkHref {
							width: 100%;
							display: block;

							.iconSrc {
								width: 100%;
								text-align: center;

								image {
									width: 74rpx;
									height: 54rpx;
								}

								margin-bottom: 25rpx;
							}

							.mianTitle {
								font-size: 22rpx;
								font-weight: 600;
								color: #333333;
								height: 30rpx;
								line-height: 30rpx;
								text-align: center;
							}

							.subTitle {
								font-size: 22rpx;
								color: #999999;
								height: 30rpx;
								line-height: 30rpx;
								text-align: center;
							}
						}
					}
				}
			}

			/deep/ .uni-swiper-dot {
				width: 36rpx;
				height: 5rpx;
				margin-right: 0;
				border-radius: 0;
			}

			/deep/ wx-swiper .wx-swiper-dot {
				width: 36rpx;
				height: 5rpx;
				margin-right: 0;
				border-radius: 0;
			}
		}
	}

	//砍价列表
	.bargainModel {
		background: #FCE0DD;
		border-radius: 10rpx;
		margin-top: 22rpx;
		padding: 0 8rpx;
		padding-bottom: 8rpx;

		.title {
			height: 76rpx;
			padding: 0 10rpx;
			display: flex;

			.icon {
				width: 36rpx;
				height: 76rpx;
				line-height: 76rpx;

				image {
					width: 36rpx;
					height: 36rpx;
					vertical-align: middle;
				}
			}

			.titleName {
				flex: 1;
				height: 76rpx;
				line-height: 76rpx;

				text {
					color: #E35C4F;
					font-size: 22rpx;
					margin-left: 9rpx;
				}

				text.name {
					font-size: 30rpx;
					color: #E35C4F;
					height: 76rpx;
					line-height: 76rpx;
					font-weight: 600;
				}
			}

			.arright {
				height: 76rpx;
				line-height: 76rpx;
				display: inline-block;

				text {
					font-size: 26rpx;
					color: #E35C4F;
				}

				image {
					margin-left: 7rpx;
					width: 11rpx;
					height: 18rpx;
				}
			}
		}

		.couponContent {
			padding: 14rpx 0;
			padding-bottom: 8rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.06);
			border-radius: 10rpx;

			.list {
				padding: 0 14rpx;
				white-space: nowrap;
				overflow: auto;
				width: 100%;

				.listCon {
					margin-right: 10rpx;
					display: inline-block;

					.linkHref {
						display: block;
						text-align: center;

						.iconBg {
							width: 210rpx;
							height: 132rpx;
							background-size: contain;
							background-repeat: no-repeat;
							background-position: center;
							border-radius: 10rpx;
							/* border: 1px solid #e2e2e2; */
							margin-bottom: 10rpx;
						}

						.titleName {
							width: 210rpx;
							height: 32rpx;
							font-size: 26rpx;
							color: #333333;
							line-height: 32rpx;
							text-align: left;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.price {
							height: 32rpx;
							line-height: 32rpx;
							text-align: left;

							.newPrice {
								font-weight: 600;
								color: #FF4B33;
								font-size: 28rpx;
								display: inline-block;

								text {
									font-size: 22rpx;
								}
							}

							.oldPrice {
								font-size: 22rpx;
								color: #999999;
								text-decoration: line-through;
								margin-left: 8rpx;
								display: inline-block;
							}
						}
					}
				}
			}
		}
	}

	// 大牌好券
	.couponList {
		width: 100%;
		background: #ffffff;
		border-radius: 14rpx;
		margin-top: 20rpx;

		.title {
			height: 76rpx;
			background: url("https://ebk-picture.oss-cn-hangzhou.aliyuncs.com/mini-wx/images/homeIndex/coupon.png");
			background-size: cover;
			background-repeat: no-repeat;
			border-radius: 14rpx 14rpx 0 0;
			padding: 0 18rpx;
			display: flex;

			.icon {
				width: 36rpx;
				height: 76rpx;
				line-height: 76rpx;

				image {
					width: 36rpx;
					height: 36rpx;
					vertical-align: middle;
				}
			}

			.titleName {
				flex: 1;
				height: 76rpx;
				line-height: 76rpx;
				margin-left: 2rpx;

				text {
					color: #ffffff;
					font-size: 22rpx;
					margin-left: 4rpx;
				}

				text.name {
					font-size: 28rpx;
					padding-right: 20rpx;
					position: relative;
					height: 76rpx;
					line-height: 76rpx;
				}

				text.name::after {
					content: "";
					width: 2rpx;
					height: 36rpx;
					background-color: #fff;
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			.linkHref {
				height: 76rpx;
				line-height: 76rpx;
				display: inline-block;

				text {
					font-size: 26rpx;
					color: #ffffff;
				}

				image.iconSrc {
					width: 11rpx;
					height: 18rpx;
					vertical-align: middle;
					margin-left: 7rpx;
				}
			}
		}

		.couponContent {
			padding: 18rpx 0;

			.list {
				padding: 0 20rpx;
				white-space: nowrap;
				overflow: auto;

				.listCon {
					margin-right: 10rpx;
					display: inline-block;

					.linkHref {
						display: block;
						text-align: center;

						.iconBg {
							width: 210rpx;
							height: 132rpx;
							background-size: contain;
							background-repeat: no-repeat;
							background-position: center;
							border-radius: 10rpx;
							margin-bottom: 10rpx;
						}

						.titleName {
							width: 210rpx;
							height: 32rpx;
							font-size: 26rpx;
							color: #333333;
							line-height: 32rpx;
							text-align: left;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.price {
							height: 32rpx;
							line-height: 32rpx;
							text-align: left;

							.newPrice {
								font-weight: 600;
								color: #FF4B33;
								font-size: 28rpx;
								display: inline-block;

								text {
									font-size: 22rpx;
								}
							}

							.oldPrice {
								font-size: 22rpx;
								color: #999999;
								text-decoration: line-through;
								margin-left: 8rpx;
								display: inline-block;
							}
						}
					}
				}
			}
		}

	}

	//电影模块
	.movieModel {
		background: #ffffff;
		border-radius: 14rpx;
		margin-top: 20rpx;
		padding: 0 20rpx;

		.title {
			display: flex;
			height: 86rpx;
			line-height: 86rpx;

			.titleName {
				flex: 1;
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;
			}

			.linkHref {
				display: inline-block;

				text {
					font-size: 26rpx;
					color: #666666;
				}

				image {
					width: 11rpx;
					height: 18rpx;
					margin-left: 14rpx;
					vertical-align: middle;
				}
			}
		}

		.movieContent {
			width: 100%;

			.list {
				white-space: nowrap;
				overflow: auto;

				.listCon {
					margin-right: 18rpx;
					display: inline-block;

					.linkHref {
						display: block;

						.moviePic {
							width: 196rpx;
							height: 277rpx;

							image {
								width: 196rpx;
								height: 277rpx;
								border-radius: 14rpx;
							}
						}

						.titleName {
							width: 186rpx;
							height: 76rpx;
							font-size: 28rpx;
							color: #333333;
							line-height: 76rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							text-align: center;
						}
					}
				}
			}
		}
	}

    // 本地生活
	.specialLife {
		.title {
		  height: 86rpx;
		  line-height: 86rpx;
		  .titleName {
		    font-size: 32rpx;
		    font-weight: 600;
		    color: #333333;
		    position: relative;
		  }
		  .titleName::after {
		    content: '';
		    width: 100%;
		    height: 10rpx;
		    background-color: #FF4700;
		    opacity: 0.8;
		    position: absolute;
		    bottom: 18rpx;
		    left: 0;
		    visibility: visible;
		    z-index: -1;
		  }
		  .linkHref {
		    display: inline-block;
			text {
				font-size: 24rpx;
				color: #999999;
			}
			image {
				width: 11rpx;
				height: 18rpx;
				margin-left: 9rpx;
				vertical-align: middle;
			}
		  }
		}
		.goodList{
		  width: 100%;
		  .specialCon{
		    float: left;
		    width: 50%;
			display: inline-block;
			.goodsDetail{
			  width: 100%;
			  height: 428rpx;
			  background-size: cover;
			  background-repeat: no-repeat;
			  background-position: center;
			  border-radius: 8rpx;
			  position: relative;
			  .shopping{
			    position: absolute;
			    top: 30rpx;
			    left: 18rpx;
			    background: linear-gradient(318deg, #FF4700 0%, #FF7502 100%);
			    border-radius: 16rpx;
			    line-height: 36rpx;
			    padding: 0 14rpx;
			    vertical-align: middle;
			    font-size: 20rpx;
			    color: #FFFFFF;
			  }
			  .goodsName{
			    position: absolute;
			    bottom: 0;
			    left: 0;
			    padding: 20rpx;
			    background-color: rgba(0,0,0,0.5);
			    color: #ffffff;
			    font-size: 28rpx;
			    line-height: 36rpx;
			    border-radius: 0 0 8rpx 8rpx;
			  }
			}
		  }
		  .columnModel{
		    float: left;
		    width: 50%;
		    .goodsCon{
		      margin-left: 10rpx;
		      background: #FFFFFF;
		      border-radius: 6rpx;
		      display: block;
		  	.goodImg{
		  	  width: 100%;
		  	  height: 152rpx;
		  	  background-repeat: no-repeat;
		  	  background-size: cover;
		  	  background-position: center;
		  	  border-radius: 8rpx 8rpx 0 0;
		  	  image {
		  	    width: 100%;
		  	    height: 152rpx;
		  	    border-radius: 8rpx 8rpx 0 0;
		  	  }
		  	}
		  	.goodsDel {
		  	  padding-top: 8rpx;
		  	  padding-bottom: 20rpx;
		  	  position: relative;
		  	  background: #FFFFFF;
		  	  border-radius: 0 0 8rpx 8rpx;
		  	  .goodsPic{
		  	    position: absolute;
		  	    left: 30rpx;
		  	    bottom: 20rpx;
		  	    padding: 6rpx;
		  	    background: #FFFFFF;
		  	    border-radius: 8rpx;
		  		.img{
		  		  width: 64rpx;
		  		  height: 60rpx;
		  		  background-size: cover;
		  		  background-repeat: no-repeat;
		  		  background-position: center;
		  		}
		  	  }
		  	  .goodsName{
		  	    font-size: 22rpx;
		  	    color: #333333;
		  	    line-height: 30rpx;
		  	    height: 30rpx;
		  	    padding-right: 26rpx;
		  	    padding-left: 120rpx;
		  	    white-space: nowrap;
		  	    overflow: hidden;
		  	    text-overflow: ellipsis;
		  	    font-weight: 600;
		  	  }
		  	}
		    }
		    .goodsCon.last {
		      margin-top: 8rpx;
		    }
		  }
		}
	}
    
	//tab切换栏
	.tabList {
		width: 100%;
		.list {
			width: 100%;
			padding: 22rpx 0;
			.listCon {
				width: 50%;
				float: left;
				text-align: center;
				font-size: 30rpx;
				color: #333333;
				font-weight: 600;
				height: 40rpx;
				line-height: 40rpx;
				position: relative;
				z-index: 1;
			}
			.listCon.active {
				font-size: 34rpx;
			}
			.listCon.active::after {
			  content: '';
			  width: 130rpx;
			  height: 10rpx;
			  background-color: #FF4700;
			  opacity: 0.8;
			  position: absolute;
			  bottom: -3rpx;
			  left: 50%;
			  transform: translateX(-50%);
			  visibility: visible;
			  z-index: -1;
			}
		}
	}
	
	//商品列表
	.goodLists {
	  width: 100%;
	  .list {
	    width: 100%;
		.listCon {
		  width: 50%;
		  float: left;
		  margin-bottom: 14rpx;
		  .linkHref {
		    display: block;
		    margin-right: 18rpx;
		    background: #FFFFFF;
		    border-radius: 14rpx;
		    border: 8rpx solid #fff;
			.spImg{
			  width: 100%;
			  height: 256rpx;
			  background-repeat: no-repeat;
			  background-size: contain;
			  border-radius: 14rpx 14rpx 0px 0px;
			  background-position: center;
			}
			.spDetail{
			   padding: 18rpx;
			  .spName{
			    color: #333333;
			    font-size: 28rpx;
			    height: 66rpx;
			    width: 100%;
			    line-height: 36rpx;
			    text-overflow: -o-ellipsis-lastline;
			    overflow: hidden;
			    text-overflow: ellipsis;
			    display: -webkit-box;
			    -webkit-line-clamp: 2;
			    line-clamp: 2;
			    -webkit-box-orient: vertical;
			  }
			  .spPrice{
			    display: flex;
			    padding-top: 20rpx;
			    overflow: hidden;
				.nowPrice{
				  font-size: 24rpx;
				  color: #EA6F2A;
				  line-height: 36rpx;
				  text{
				    font-size: 36rpx;
				    color: #EA6F2A;
				  }
				}
				.onlyPrice {
				  margin-left: 10rpx;
				  margin-top: 4rpx;
				  width: 96rpx;
				  height: 28rpx;
				  line-height: 28rpx;
				  overflow: hidden;
				  background-size: cover;
				  background-repeat: no-repeat;
				  font-size: 20rpx;
				  color: #FFFFFF;
				  text-align: center;
				  border: 2rpx solid transparent;
				}
				.oldPrice {
				  margin-left: 8rpx;
				  margin-top: 4rpx;
				  overflow: hidden;
				  font-size: 24rpx;
				  color: #999999;
				  line-height: 30rpx;
				  text-decoration: line-through;
				}
			  }
			  .orderNum {
			    padding-top: 16rpx;
			    font-size: 24rpx;
			    color: #999999;
			    line-height: 30rpx;
			  }
			}
		  }
		}
		.listCon:nth-child(even) .linkHref{
		  margin-right: 0;
		}
	  }
	}
	.noData {
		width: 100%;
		text-align: center;
		height: 40rpx;
		line-height: 40rpx;
		.noMore {
			font-size: 24rpx;
			color: #333333;
		}
	}
</style>


个人中心页面代码

<template>
	<view class="">
		<view class="back3">
		</view>
		<view class="text_box">
			<text class="text111">个人中心</text>
		</view>
		<view class="userContainer">
			<!-- 用户信息模块 -->
			
			<view class="tobBar">
				<view class="userPhoto"  v-if='is_user_info==1'>
					<image :src="userInfo.headimgurl" mode=""></image>
				</view>
				<view class="userInfo"   v-if='is_user_info==1'>
					<view class="userName" @click="getLogin">{{userInfo.nickname}}</view>
					<view class="usermobile">{{userInfo.mobile}}</view>
				</view> 
				
				<view class="userPhoto" v-if='is_user_info==0'>
							<image src="https://ebk-picture.oss-cn-hangzhou.aliyuncs.com/mini-wx/images/homeIndex/wdl.jpg" mode=""></image>
						</view>
				<view class="userInfo"  v-if='is_user_info==0'>
					<view class="userName"  @click="appLoginWx"     lang="zh_CN" >登录/注册</view>				
				</view> 
				
				
			</view>
			<!-- 开通会员 -->
		<!-- 	<view class="openMembers clearfix">
				<view class="iconImg fl"
					:style="{backgroundImage:'url(https://ebk-picture.oss-cn-hangzhou.aliyuncs.com/mini-wx/images/userCenter/vipbg.png)'}">
					<image src="https://ebk-picture.oss-cn-hangzhou.aliyuncs.com/mini-wx/images/userCenter/vip.png" mode=""></image>
				</view>
				<view class="title fl"  @click="openMember">开通会员,优惠下单</view>
				<navigator url="../brandCoupon/brandCoupon" class="superVip links fr"  @click="openMember">立即开通</navigator>
			</view> -->
		
		
			<!-- 会员记录 -->
		<!-- 	<view class="memberRecodeList">
				<view class="intro">
					<view class="title">会员记录</view>
					<view class="dl">开通会员享优惠,立即领取红包</view>
				</view>
				<navigator url="../member/memberOrderList" class="check">立即查看</navigator>
			</view> -->
		
			</view>
		
			
			<!-- 邀请有礼 -->
			<!-- <navigator url="../brandCoupon/brandCoupon" class="visitedGift">
				<image src="https://ebk-picture.oss-cn-hangzhou.aliyuncs.com/mini-wx/images/movie/yy.png" mode=""></image>
			</navigator> -->
		
			<!-- 我的工具模块 -->
		<!-- 	<view class="myTool">
				<view class="title">我的工具</view>
				<view class="clearfix list">
					<view class="item">
						<navigator url="../brandCoupon/brandCoupon" class="linkHref">
							<view class="listIcon">
								<image src="https://ebk-picture.oss-cn-hangzhou.aliyuncs.com/mini-wx/images/userCenter/tool1.png" mode=""></image>
							</view>
							<view class="listIntro">推荐列表</view>
						</navigator>
					</view>
					<view class="item">
						<navigator url="../brandCoupon/brandCoupon" class="linkHref">
							<view class="listIcon">
								<image src="https://ebk-picture.oss-cn-hangzhou.aliyuncs.com/mini-wx/images/userCenter/tool2.png" mode=""></image>
							</view>
							<view class="listIntro">消息</view>
						</navigator>
					</view>
					<view class="item">
						<navigator url="../brandCoupon/brandCoupon" class="linkHref">
							<view class="listIcon">
								<image src="https://ebk-picture.oss-cn-hangzhou.aliyuncs.com/mini-wx/images/userCenter/tool3.png" mode=""></image>
							</view>
							<view class="listIntro">提现</view>
						</navigator>
					</view>
					<view class="item">
						<navigator url="../brandCoupon/brandCoupon" class="linkHref">
							<view class="listIcon">
								<image src="https://ebk-picture.oss-cn-hangzhou.aliyuncs.com/mini-wx/images/userCenter/tool4.png" mode=""></image>
							</view>
							<view class="listIntro">银行卡</view>
						</navigator>
					</view>
					<view class="item">
						<navigator url="../brandCoupon/brandCoupon" class="linkHref">
							<view class="listIcon">
								<image src="https://ebk-picture.oss-cn-hangzhou.aliyuncs.com/mini-wx/images/userCenter/tool5.png" mode=""></image>
							</view>
							<view class="listIntro">我的收藏</view>
						</navigator>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
		let app = getApp()
		let _that = this;
	export default {
			data() {
				return {	
				 userInfo: {
							  discount_count:0,
							  use_num:{
							  use_num:0,
							  is_past:0
							  },
							 point:0
						  },//用户信息
				discount_count:0,//可用优惠券		  
				is_user_info:0,//是否获取头像
					
				}
		},
		onLoad(){
			let _that = this;
			app.get_token().then( res => {
			  	if (app.is_user_info() == 0)  return false; 
			})							  
		},
		methods: {//自定义方法
		// openMember(){
		// 	//	console.log(1111);
		
		// 		uni.navigateTo({
		// 			url: "../member/openMember",
		// 			fail:(e)=>{
		// 				console.log(e);
		// 			}
		// 		})
			
		// },
		appLoginWx(){
			uni.navigateTo({
				url: "/pages/login/login",
				fail:(e)=>{					          
				}
			})	
			
			
		},
	
			getUserInfo(){//获取用户信息		
			let _that = this
			_that.userInfo=	uni.getStorageSync('userInfo');	
			// console.log(_that.userInfo.use_num.use_num,'12121212332344344343434')
			console.log( _that.userInfo.store_discount_count,'casduadhusahduashdu')
			_that.discount_count= _that.userInfo.store_discount_count
			},
		
				 },
		onShow(){
			let _that = this
			uni.$once('uptoken',(info)=>{  //开启监听全局的地址改变事件	
							console.log(info,'2222222222211'); 	
				             _that.is_user_info=	info.data.is_user_info
							if(_that.is_user_info==1) 		_that.getUserInfo();				 
				          })
			uni.$on('upuserInfo',(info)=>{  //开启监听全局的地址改变事件
			//			console.log(info,'2222222222211'); 		
						 _that.is_user_info=uni.getStorageSync('token').is_user_info;
			          	_that.getUserInfo();
					 
			          })

					}
			}
</script>

<style lang="scss" scoped>
	.back3{
		width: 100%;
		height: 324rpx;
		background: url("https://ebk-picture.oss-cn-hangzhou.aliyuncs.com/ebk-wap/img-202304180549149488-Group%202008.png") no-repeat;
		background-size: 100% ;
		position: absolute;top: 0;
		z-index:-1;
		
	}
	.text_box{
		width: 146rpx;
		margin: 0 auto;
		.text111{
			font-size: 36rpx;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 242rpx;
		}
	}
	.userContainer {
		position: relative;
		top: -50rpx;
		z-index:9;
		padding: 0 36rpx;
		padding-bottom: 140rpx;
		.tobBar {
			width: 100%;
			padding-top: 48rpx;
			display: flex;
			background: white;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			height: 190rpx;
			.userPhoto {
				height: 140rpx;
				margin-right: 20rpx;
				margin-left: 22rpx;
		
				image {
					height: 140rpx;
					width: 140rpx;
					border-radius: 50%;
				}
			}
		
			.userInfo {
				flex: 1;
				overflow: hidden;
				padding-top: 20rpx;
		
				.userName {
					color: #333;
					font-size: 44rpx;
					flex: 1;
					width: 100%;
					overflow: hidden;
					height: 60rpx;
					line-height: 60rpx;
					font-weight: 600;
					text-overflow: ellipsis;
					white-space: nowrap;
		
					.tiyan {
						width: 74rpx;
						height: 30rpx;
						background-color: #1F2024;
						color: #E3C3A5;
						font-size: 24rpx;
						text-align: center;
						line-height: 30rpx;
						display: inline-block;
					}
		
					.tiyan.active {
						display: none;
					}
				}
		
				.usermobile {
					color: #999;
					font-size: 28rpx;
					line-height: 48rpx;
					width: 400rpx;
					overflow: hidden;
					height: 48rpx;
				}
			}
		
		}
		}
</style>

全局app.vue代码

<template>
	<view>
	</view>
</template>
<script>
	export default {
		globalData: {
			URL: 'https://aaa.aaa.cn/api/', //测试环境
		//	URL: 'https://aaa.aaa.cn/api/', //预发布环境
		 // URL: 'https://aaa.aaa.cn/api/', //正式环境
			is_mobile: 0, //手机号是否存在
			//is_user_info:0,//头像是否存在
			token: null,
		},
		methods: {
			updateData(){
				console.log('刷新数据')
			},
			get_token() {
				let that = this;
				return new Promise(function (resolve, reject) {
					uni.login({ //获取code
						provider: 'weixin',
						success: (res2) => {
							//console.log(res2.code,'111111111111111111111111');							
							//return false;
							uni.request({
								url: that.globalData.URL + "auth/mpLogin",
								method: 'POST',
								data: {
									version: '251',
									client: 'wxmp',
									code: res2.code,
								},
								success(res) {
									//console.log(res.data, '111111111111111111111111');
									if (res.data.status == 'ok') {
					
										uni.setStorageSync('token', res.data.data);
										that.globalData.is_user_info = res.data.data.is_user_info;
										that.globalData.is_mobile = res.data.data.is_mobile;
										that.globalData.token = res.data.data.token;
										uni.$emit('uptoken', {
											msg: 'token更新',
											data: res.data.data
										})
									}
									that.getUserInfo()
									resolve()
								}
							})
						},
						fail: () => {
							uni.showToast({
								title: "微信登录授权失败22",
								icon: "none"
							});
							reject()
						}
					})
				    // 一段耗时的异步操作
				    // resolve('成功') // 数据处理完成
				    // reject('失败') // 数据处理出错
				  }
				)
			},
			 is_user_info(){//用户信息是否齐全
				 let isMobile = uni.getStorageSync('token')
				 
				 if(!isMobile){
				   return	 this.get_token();
				 }
				 
				 if ( uni.getStorageSync('token').is_mobile == 0 || uni.getStorageSync('token').is_user_info == 0) {
					 
					uni.showModal({
					    title: '需要获取你的授权信息',					  
					    success: function (res) {
					        if (res.confirm) {
					           uni.navigateTo({
					           	url: "/pages/login/login",
					           	fail:(e)=>{					          
					           	}
					           })
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});		 return 0;	 					 	
				 }else{
					  return 1;	
				 }
			 },
			getUserInfo() {
				let that = this;
				uni.request({
					url: that.globalData.URL + "user/getUserInfo",
					method: 'POST',
					data: {
						version: '251',
						client: 'wxmp',
						token: that.globalData.token,
					},
					success(res) {
						uni.setStorage({
						    key: 'userInfo',
						    data:  res.data,
						    success: function () {
						     uni.$emit('upuserInfo', {
						     	msg: 'userInfo更新',
						     	data: res.data
						     })
						    }
						});
						// console.log(res,'头像')
					}
				})
			},
		},
		
		onLoad() {
			this.getUserInfo()
			this.get_token()
		},
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */
	page {
		height: 100%;
		background-color: #F7F7F7;
		
	}

	.fl {
		float: left;
	}

	.fr {
		float: right;
	}

	.clearfix::after {
		content: "";
		width: 0;
		height: 0;
		line-height: 0;
		display: block;
		visibility: hidden;
		clear: both;
	}

	.clearfix {
		zoom: 1;
	}
	
</style>

下面是小程序获取用户信息最新调整的方式

详情见官网
在这里插入图片描述

<template>
	<view class="">
		<button class="avatar-wrapper" open-type="chooseAvatar" @click="onChooseAvatar">
		  <image class="avatar" 
		  :src="avatarUrl"></image>
		</button>
		<form catchsubmit="formSubmit">
		  <view class="row">
		    <view class="text1">名称:</view>
		    <input type="nickname" class="weui-input" name="input" placeholder="请输入昵称" />
		  </view>
		  <button type="primary" style="margin-top:40rpx;margin-bottom:20rpx" formType="submit">提交</button>
		</form>
	</view>
</template>

<script>
	const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
	export default{
		 data(){
		    return{
				avatarUrl: defaultAvatarUrl,
				name: '',
			}
		  },
		 
		methods:{
			onChooseAvatar(e) {
			  const { avatarUrl } = e.detail
			  this.avatarUrl = e.detail.avatarUrl
			},
			formSubmit(e) {
			  console.log(e.detail.value.input)
			  this.setData({
			    name: e.detail.value.input
			  })
			 }
		}
	}
</script>

<style>
</style>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

小程序获取用户信息实现一键登录 的相关文章

  • R语言3.11 因子分析因子旋转

    因子旋转 目的 寻找每个主因子的实际意义 如果各主因子的典型代表变量不突出 就需要进行旋转 使因子载荷矩阵中载荷的绝对值向0和1两个方向分化 方法 正交旋转Varimax 最大方差正交旋转 斜交旋转Promax Fa2 factanal X
  • 集成学习-Adaboost

    Author 鲁力 Email jieyuhuayang foxmail com Datawhale Adaboost 算法简介 集成学习 ensemble learning 通过构建并结合多个学习器 learner 来完成学习任务 通常可
  • Keras和Tensorflow(CPU)安装、Pytorch(CPU和GPU)安装以及jupyter使用虚拟环境

    微信公众号 数学建模与人工智能 Keras和Tensorflow CPU 安装 Pytorch CPU和GPU 安装 Keras和Tensorflow CPU 安装 一 安装我用的是清华大学源 二 深度学习模型保存与加载 三 错误 Tens
  • matlab中的掩膜抠图

    改进版 矩阵中的循环操作非常耗时 so 用矩阵逻辑与操作替代for循环 one ones s img 1 s img 2 segM segM uint8 one for i 1 s img 1 for j 1 s img 2 if segM
  • 微信小程序16进制颜色码

    颜色码http www w3school com cn cssref css colornames asp
  • 时间序列算法理论及python实现(2-python实现)

    如果你在寻找时间序列是什么 如何实现时间序列 那么请看这篇博客 将以通俗易懂的语言 全面的阐述时间序列及其python实现 时间序列算法理论详见我的另一篇博客 时间序列算法理论及python实现 知 青 博客园 5 Python实现ARIM

随机推荐

  • ChatGPT 最好的替代品

    前两天我们邀请了微软工程师为我们揭秘 ChatGPT 直播期间有个读者问到 有了 ChatGPT BERT 未来还有发展前途吗 我想起来最近读过的一篇博客 最好的 ChatGPT 替代品 不过聊到这俩模型 就不得不提到 Transforme
  • 堆排序(Heapsort)-- 高级排序算法

    1 堆排序 Heapsort 堆排序 Heapsort 是指利用堆这种数据结构所设计的一种排序算法 二叉堆本质上是一种完全二叉树 它分为两个类型 最大堆和最小堆 最大堆任何一个父节点的值 都大于等于它左右孩子节点的值 最小堆任何一个父节点的
  • 同步(Synchronous)和异步(Asynchronous)

    概念性 同步和异步通常用来形容一次方法调用 同步方法调用一旦开始 调用者必须等到方法调用返回后 才能继续后续的行为 异步方法调用更像一个消息传递 一旦开始 方法调用就会立即返回 调用者就可以继续后续的操作 而 异步方法通常会在另外一个线程中
  • idea设置默认maven

    idea修改默认maven配置 方法一 不推荐 打开project default xml文件 在其中加入如下几行配置 代码如下 保存修改之后新建一个maven项目查看效果 方法二 新增Projects Settings 方法一 不推荐 需
  • 线性滤波器&非线性滤波器

    前言 采用线性滤波和非线性滤波是在空间域上处理图像最常用的滤波方法 matlab在处理图像滤波方面拥有可调用的函数 十分便利 我们可以根据自己的需要自行选择滤波方式对图像进行滤波 值得一提的是 图像锐化在某种程度上来说就是线性滤波 一 线性
  • emc re 整改 超标_EMC辐射骚扰超标如何整改?

    辐射骚扰是电脑 GPS导航等工作时向空间发射的一种电磁波干扰 这种干扰会影响其他电器特别是高灵敏度电器的正常工作 组成整机系统的主板 显示卡 开关电源 显示器 键盘 鼠标等都可能引起辐射骚扰超标 对于辐射骚扰通常用电磁场的大小来度量 其单位
  • 对泛型之不能协变(convariant)的理解,以及不能协变导致的问题

    1 何为协变 假设有一个接口 以及一个他的实现类 如下 接口为 public interface GenericsInterface void test 其实现类为 public class Type2 implements Generic
  • 6.ajax应用,ajax应用

    web tools ajax version 天气预报 value 北京 gt id disp weather gt ip地址查询 value 127 0 0 1 gt id disp iparea gt 手机归属查询 id disp mo
  • js利用google翻译接口把网页翻译成各国语言

    网页翻译为德语 Translate Page To German a href 网页翻译为德语 Translate Page To German a 网页翻译为西班牙语 Translate Page To Spanish a href a
  • [Mysql] 删除数据

    为了从一个数据表中删除 去掉 数据 可使用DELETE语句 语法 DELETE FROM表名 WHERE 条件 ORDER BY LIMIT row count DELETE FROM要求指定从中删除数据的表名 WHERE子句过滤要删除的行
  • 如何将li的前面那个圆点去掉

    只需要将 css样式 的 list style type 属性设置为none即可 代码如下 list style type none span style font size 18px span 下面的代码位于标签内 span style
  • 虚拟内存基本概念

    一 传统存储管理方式的特征 缺点 1 连续分配 单一连续分配 固定分区分配 动态分区分配 2 非连续分配 基本分页存储管理 基本分段存储管理 基本段页式存储管理 3 特点 很多暂时用不到的数据也会长期占用内存 导致内存利用率不高 一次性 作
  • JS基础_js一元运算符

    1 什么是一元运算符 只对一个操作数操作就能改变当前操作数的值的运算符号 2 一元运算符有哪些 2 1 正号 和负号 举例
  • CP4.矩阵的LU分解

    LU分解 将矩阵A分解成的形式 称作矩阵LU分解 L代指下三角矩阵 U代指上三角矩阵 首先用到的是前面讲过的消元法 以下为例子 通过消元操作 最后矩阵A变成了一个上三角矩阵U 那么只要上式左乘一个 就可以转化为 这里的就是L矩阵了 所以 也
  • javac编译时出现GBK报错(错误:编码GBK的不可映射字符)

    javac编译时出现GBK报错 错误 编码GBK的不可映射字符 一 这里列出我遇到的三种情况 代码格式分别为 ANSI UTF 8 无BOM的UTF 8 这里我用的是notepad 进行编写 ANSI格式 首先我们先创建一个 java源文件
  • 说说JUC三个类:CountDownLatch,CyclicBarrier和Semaphore

    目录 CountDownLatch CyclicBarrier Semaphore 总结 在JUC中 有三个工具类来辅助我们进行并发编程 分别是 CountDownLatch CyclicBarrier和Semaphore CountDow
  • 使用vue-cli来搭建vue项目

    使用vue cli来搭建vue项目 一 创建所需要的文件夹 二 安装vue cli 三 使用脚手架vue cli 2 X版 来构建项目 前提 搭建好NodeJS环境 一 创建所需要的文件夹 1 首先在Node js的文件夹里面建上 temp
  • S71200外围设备接线-输入接线

    S71200外围设备接线 输入端子接线 含NPN和PNP 传感器接线 作为一个PLC的初学者 我觉得第一件事请并不是学习什么TIA Portal软件或者编程指令 而是了解PLC的系统参数和外围设备接线 上面的一张文章 我通过图文的方式简单讲
  • 问题 E: 十进制整数转二进制

    十进制整数转二进制的方法是 除以2 取出余数 商继续除以2 直到得到0为止 将取出的余数逆序即可得到对应的二进制数的各位 例如 22转二进制的计算过程 22 2 11 余0 11 2 5 余 1 5 2 2 余 1 2 2 1 余 0 1
  • 小程序获取用户信息实现一键登录

    文章目录 旧版获取用户信息实现登录流程 login页面代码 个人中心页面代码 全局app vue代码 下面是小程序获取用户信息最新调整的方式 温馨提示 以下小程序登录方式只适用于2 27 1版本库以下使用 详情请看微信官方文档调整 旧版获取