uniapp实现微信小程序登录功能

第一步 我们先把页面画出来

<template>
	
	<!-- #ifdef MP-WEIXIN -->
	<view v-if="isCanUse">
		<view>
			<view class='headers'>
				<image src='../../static/img/logo.png'></image>
			</view>
			<view class='content'>
				<view>申请获取以下权限</view>
				<text>获得你的公开信息(昵称，头像、地区等)</text>
			</view>

			<button style="background: #E10A07;background-color: #E10A07;" class='bottom' type='primary' open-type="getUserInfo"
			 withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">
				授权登录
			</button>
		</view>
	</view>
	<!-- #endif -->
</template>

第二步再methods中写下三个方法

//第一授权获取用户信息===》按钮触发
			wxGetUserInfo() {
				let _this = this;
				
				uni.getUserInfo({
					provider: 'weixin',
					success: function(infoRes) {
						let nickName = infoRes.userInfo.nickName; //昵称
						let avatarUrl = infoRes.userInfo.avatarUrl; //头像
						try {
							uni.setStorageSync('isCanUse', false); //记录是否第一次授权  false:表示不是第一次授权
							if (_this.$queue.getData("openid")) {
                                //有openid就直接更新昵称和头像
								_this.getWeixinInfo(nickName, avatarUrl);
							} else {
                               //没有openid就直接执行登录
								_this.login()
							}

						} catch (e) {}
					},
					fail(res) {}
				});
			}, 
           //登录 这个方法用于获取用户昵称和头像同步给后台接口
			getWeixinInfo(nickName, avatarUrl) {
				uni.showLoading({
					title: '登录中...'
				});
				this.$Request.postJson("/user/mp/update", {
					invitation: this.invitation,
					unionid: this.$queue.getData("unionid"),
					imageUrl: avatarUrl,
					nickName: nickName,
					openid: this.$queue.getData("openid")
				}).then(res => {
					if (res.status === 0) {
						this.$queue.setData("token", res.data.uuid);
						this.$queue.setData("userId", res.data.userId);
						this.$queue.setData("mobile", _this.phoneData);
						this.getUserInfo(res.data.userId, res.data.uuid);
					} else {

						uni.hideLoading();
						uni.showModal({
							showCancel: false,
							title: '登录失败',
							content: res.msg,
						});
					}
				});
			},
           //使用到的登录接口
			login() {
				let _this = this;
				uni.showLoading({
					title: '登录中...'
				});
				// 1.wx获取登录用户code
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
                        //获取到code 拿着code去请求后台接口换openid和unionid 这里说到unionid只有关联了微信开放平台才会有
						let code = loginRes.code;

						_this.$Request.getT("/wx/mp/login?code=" + code).then(res => {
							if (res.status === 0) {
								_this.$queue.setData("openid", res.data.open_id)
								_this.$queue.setData("unionid", res.data.unionid)
								uni.hideLoading()
								//非第一次授权获取用户信息
								uni.getUserInfo({
									provider: 'weixin',
									success: function(infoRes) { //获取用户信息后向调用信息更新方法
										let nickName = infoRes.userInfo.nickName; //昵称
										let avatarUrl = infoRes.userInfo.avatarUrl; //头像
										if (nickName) {
											_this.getWeixinInfo(nickName, avatarUrl);
										}
									}
								});
							}
						});
					},
				});
			},

具体可以参考这个：https://ext.dcloud.net.cn/plugin?id=1798

标签：uniapp,code,登录,avatarUrl,res,queue,微信,uni,nickName
来源： https://blog.csdn.net/weixin_39706415/article/details/111588465