uniapp小程序使用getUserProfile登录(获取昵称统一为‘微信用户’+头像为灰色头像)-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp小程序使用getUserProfile登录(获取昵称统一为‘微信用户’+头像为灰色头像)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、微信授权登录按钮

<view class="name" v-if="!hasLogin">
							    <u-button @click="getUserProfile()" size="small" class="authorizationBtn" type="primary">
										微信授权登录
								</u-button>
							</view>

二、微信授权登录弹窗

<view>
			<!-- 登录弹框 -->
			<u-popup :show="phoneModalShow" mode="center" border-radius="14" >
				<view class="sq_box">
					<view>授权登录</view>
					<view>授权获取您的手机号</view>
					<view>
						<view class="agreement_warp">
							<view>登录代表您已同意</view>
							<view @click="agreenmentDetailHandle" style="color: #ff431e;">隐私政策</view>
						</view>
						<u-button style="width: 100%;"  type="success"
							@getphonenumber="getphonenumber" open-type="getPhoneNumber">
							微信快捷授权登录
						</u-button>
					</view>
				</view>
			</u-popup>
		</view>

三、数据定义

hasLogin: false,
phoneModalShow: false, // 手机号隐藏层

四、登录方法文章来源地址https://www.toymoban.com/news/detail-537943.html

//获取个人信息
			async getUserProfile() {
				//调用微信获取code
				uni.login({
					provider:'weixin',
					success: (logRes) => {
						console.log(logRes.code)
						this.code = logRes.code
					}
				});
				uni.getUserProfile({
					desc:'WeiXin'
				}).then(res => {
					if (res && res.length > 1) {
						let userMsgHave = JSON.parse(res[1].rawData)
						console.log(JSON.parse(res[1].rawData));
						uni.showLoading({
							title: '登录加载中'
						});
						if(res[1].errMsg == "getUserProfile:ok"){
							console.log("codeLogin", this.code);
							let url = 'wx/code/' + this.code
							this.request(url,"POST",null).then(res =>{
								if(res.data.code == 200){
									this.userRawData = userMsgHave; // 存储用户信息
									this.LoginCodeMsg.openId = res.data.openId
									this.LoginCodeMsg.sessionKey = res.data.sessionKey
									this.phoneModalShow = true;
									uni.hideLoading();
								}else{
									uni.showToast({
										title: '微信登录失败',
										icon: 'none'
									})
									uni.hideLoading();
								}
							})
						}else{
							uni.showToast({
								title:'登录失败请重试',
								icon:'error',
								duration:2000
							})
							uni.hideLoading();
						}
					}
				})
			},
			//获取手机号
			getphonenumber(e){
				let phoneMsg = {
					encryptedData: e.detail.encryptedData,
					iv: e.detail.iv,
					openId: this.LoginCodeMsg.openId,
					sessionKey: this.LoginCodeMsg.sessionKey,
					avatar: this.userRawData.avatarUrl,
					nickName: this.userRawData.nickName,
					sex: this.userRawData.gender
				}
				this.request('wx/login','POST',phoneMsg).then(res =>{
					this.phoneModalShow = false
					if(res.data.code == 200){
						this.isLogin = true
						uni.showToast({
							title:'登录成功',
							icon:'none'
						})
						this.hasLogin = true
						this.userId = res.data.busInfo.userId
						this.userInfo.level = res.data.busInfo.userType
						this.userInfo.nickName = res.data.busInfo.nickName
						this.userInfo.mobiler = res.data.busInfo.phoneNumber
						this.userInfo.avatar = res.data.busInfo.avatar
						console.log(JSON.stringify(this.userInfo))
						console.log(JSON.stringify(res.data.busInfo))
						//缓存登录状态和用户信息
						this.userInfo.token = res.data.token
						this.$store.state.busInfo = res.data.busInfo;
						this.$store.state.hasLogin = this.isLogin;
						this.$store.state.userInfo = this.userInfo;
						this.$store.state.token = res.data.token;
						//将当前代理的个人信息存入缓存中
						uni.setStorageSync('busInfo',res.data.busInfo)
						//token存缓存
						uni.setStorageSync('token',res.data.token)
						setTimeout(function (){
							uni.navigateBack()
						},2000)
						//加载顶部数据
						this.initTopShouYiData()
					}else{
						uni.showToast({
							title:'登录失败',
							icon:'error',
							duration:2000
						})
					}
				})
			},

//退出方法
			logout(){
				uni.showModal({
					title:'提示',
					content:'请确认是否退出',
					success: (res) => {
						if(res.confirm){
							this.$store.state.hasLogin = false;
							this.$store.state.userInfo = null;
							this.$store.state.busUser = null;
							uni.showToast({
								title:'退出登录成功',
								icon:'none'
							})
							uni.redirectTo({
								url:'/pages/index/index'
							})
						}
					}
				})
			}

到了这里，关于uniapp小程序使用getUserProfile登录(获取昵称统一为‘微信用户’+头像为灰色头像)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！