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

已于 2023-05-22 10:39:50 修改
阅读量282 收藏
点赞数 1
分类专栏： 小程序知识/功能大总结 文章标签： 小程序 微信小程序 微信
于 2023-05-17 17:07:02 首次发布
张砚博
本文链接：https://blog.csdn.net/qq_47272950/article/details/130729117
版权

文章目录

温馨提示 ：以下小程序登录方式只适用于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>
码上流星&洒下星辰
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
微信小程序开发一键登录 获取session_key和openid实例
11-27
微信小程序开发一键登录 获取session_key和openid实例 思来想去不愿自己的微信小程序是个单机版本.自己又不会写后台.现在借助leancloud可以实现微信小程序一键登录功能.尝试后,做笔记. 第一步:下载av-weapp.js,放到utils下. 第二步:使用 const AV = require(‘../../utils/av-weapp.js’);路径根据具体情况而定. 第三步:做初始化. AV.init({ appId: 'EJx0NSfY********-gzGzoHsz', appKey: 'FBVPg5G**********T97SNQj', }); 第四
【GoLang】记录一次使用Go实现微信小程序一键登录操作
浩瀚宇宙的一粒尘埃
11-30 6348
文章目录需求实现整体流程微信登陆流程Go后端实现code2sessionAES解密接口部分 需求 PC端一个B/S应用，登陆时支持微信扫码登陆，微信扫码后，会跳转到一个小程序，通过该小程序进行授权登陆，用小程序的原因是只有小程序能获取到用户的手机号，效果如下 实现 整体流程 首先页面需要生成一个二维码：后端需要提供一个唯一的code，使用uuid即可，然后再拼接为小程序页面的url，二维码由前端根据url生成即可 将code存入缓存，设置状态为：1-初始状态 前端不断扫描该code的状态，用以更新二维
【uni-app】uniapp 实现一键登录 超详细记录~
热门推荐
每天进步一点点, 靠近小目标一点点~
09-29 1万+
一. 前置条件: 开通uniCloud, 开通一键登录功能 二. 一键登录代码 & 云函数代码 三. 其他条件 四. 遇到过什么问题, 如何处理(本地函数同个局域网, 错误码) 五. 官网给出的错误码
微信小程序开发之——用户登录-获取用户信息(5)
我的博客
09-23 1070
一 概述 小程序中，获取用户信息的两种方式： 使用<open-data>组件，不需要用户授权，就可以获取用户头像、昵称，性别等，适合只用来展示的情况 单击按钮，用户授权，获取用户信息数据 二 <open-data>组件获取用户信息 2.1 pages/index/index.wxml <view class="container"> <view class="userinfo"> <!--用户头像--> <o
uniapp 阿里云开发微信小程序一键登录
weixin_38946164的博客
01-25 3167
1.插件市场导入uni-id公用模块 插件市场 uni-id ： https://ext.dcloud.net.cn/plugin?id=2116 导入成功后在dcloud控制台可以看到相应的公共模块 在项目云文件夹下自动生成common目录与uni-id公共模块 修改config.json文件并上传公共模块，这里是重点。 详细说明见官方文档：链接 2.云函数配置 新建云函数，并上传部署 最后要管理公共模块依赖，这里也是重点。 （如果没有关联公共模块，运行小程序时会报错：Cannot find
SpringCloud 微信小程序 获取用户信息一键登录 【SpringCloud系列15】
代码小疯子
03-31 372
微信小程序 获取用户信息一键登录
小程序获取用户昵称登录(wx.getUserProfile)低于2.27.1版本的访问
qq_46376192的博客
03-01 228
小程序获取用户昵称登录(wx.getUserProfile)低于2.27.1版本的访问
微信开放平台 代小程序实现业务 一键生成小程序.zip
03-11
同时，其特色功能如实时更新的信息推送、个性化推荐以及社交分享功能，让用户能够及时获取所需信息，并方便地将优质内容分享至朋友圈或好友，实现信息的高效传播与互动。 【小程序名称】注重数据安全与隐私保护，...
微信小程序获取用户信息js包，WXBizDataCrypt.js下载
12-20
通过调用包里的方法可解析微信加密信息，能够实现手机号码实现一键登录功能。
SpringBoot中获取微信用户信息的方法
08-25
主要介绍了SpringBoot中获取微信用户信息的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
小程序运营管理系统源码.zip
08-11
ThinkPHP内核全行业小程序运营管理系统源码 自由DIY布局 一键生成小程序，内附安装说明 无需编程，各行业模版直接套用，一键生成，轻松搭建小程序 界面自由DIY，打造个性小程序 可拖拽式DIY布局，开启自定义功能新...
微信小程序的一键登录功能
2301_77540108的博客
08-23 2936
以上就是实现微信小程序一键登录功能的基本步骤，需要注意的是，在使用云函数保存用户信息时，需要在小程序中设置相应的权限。微信小程序一键登录功能通常使用微信开放平台提供的开放接口实现。在微信开放平台创建应用并获取AppID和AppSecret。
微信小程序一键登录功能，使用uni-app和springboot（JWT鉴权）
maohe的博客
05-27 1万+
使用uni-app开发微信小程序，实现微信一键登录功能，后端使用springboot进行登录的处理，使用JWT进行身份验证。
三大运营商实现本机号码一键登录原理与应用
qianshanding0708的博客
12-01 6460
更多内容关注微信公众号：fullstack888很多APP的目前都支持“本机号码一键登录”功能。本机号码一键登录是基于运营商独有网关认证能力推出的账号认证产品。用户只需一键授权，即可实现以...
智慧药房系统源码解析：开发高效医保购药小程序教学
wy15564849548的博客
04-27 362
智慧药房系统由前端和后端两部分组成。医保购药小程序则是智慧药房系统的一个重要应用场景，其功能主要包括药品浏览、医保结算、在线咨询等。
洗鞋店上门预约小程序
zhuainiukeji888的博客
04-27 277
该系统凭借先进的技术支撑，实现了在线支付、智能推送等多样化功能，让你感受到前所未有的便捷。同时，我们注重用户体验，力求为你提供简单、直观的操作体验，让你在洗鞋的过程中享受到轻松愉快的时光。洗鞋上门预约小程序，一款针对洗鞋行业的移动应用，让你轻松享受洗鞋的便捷服务。简洁明了的操作界面，让你快速下单，享受高效的洗鞋体验。此外，该系统支持二次开发，你可以根据自己的需求进行定制，实现更加个性化的服务。洗鞋上门预约小程序，让你在繁忙的生活中轻松找到洗鞋的好帮手，为你的生活带来更多便利。
电影交流|基于SprinBoot+vue的电影交流平台小程序系统(源码+数据库+文档)
伟庭的博客
04-26 1595
​电影交流平台小程序使用Java语言进行编码，使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务，其管理电影交流平台小程序信息，查看电影交流平台小程序信息，管理电影交流平台小程序。 总之，电影交流平台小程序集中管理信息，有着保密性强，效率高，存储空间大，成本低等诸多优点。它可以降低信息管理成本，实现信息管理计算机化。 关键词：电影交流平台小程序；Java语言；Mysql 二、系统设计 系统功能结构如图 三、系统功能设计 1用户信息管理 如
在 H5 页面和 uniapp 小程序之间进行数据通信
最新发布
qq_69892545的博客
04-28 242
在 H5 页面中使用 localStorage 来存储需要传递的数据，然后在小程序中使用 uni.getStorageSync() 或者 uni.setStorageSync() 来获取或设置 localStorage 中的数据。在 H5 页面中使用 URL 参数来传递数据，然后在小程序中使用 uni.getLaunchOptionsSync() 或者 onLaunch/onShow 生命周期函数来获取 URL 参数中的数据。（未完待续.....后面补上）
xhadmin多应用SaaS框架之智慧驾校H5+小程序v1.1.5正式发布！
张超博客
04-27 391
xhadmin 是一套基于最新技术的研发的多应用 Saas 框架，支持在线升级和安装模块及模板，拥有良好的开发框架、成熟稳定的技术解决方案、提供丰富的扩展功能。为开发者赋能，助力企业发展、国家富强，致力于打造最受欢迎的多应用 Saas 系统。
小程序手机号一键登录怎么获取用户信息
07-28
小程序手机号一键登录是指用户在小程序中使用手机号进行快速登录，并获取用户的手机号和用户信息。要实现这个功能，你可以按照以下步骤进行操作： 1. 在小程序后台配置：在小程序后台的"设置"->"第三方服务"中，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码上流星&洒下星辰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值