1.准备一个触发微信登录的按钮

<button class="wechat-logo" @click="getWeChatCode">微信授权登录</button>

2.用户点击弹出授权页

微信浏览器的登录配置
scope为snsapi_base时， 为静默登录
scope为snsapi_userinfo时，会弹出“xxx申请获得你的微信头像、昵称、地区和性别信息”这样的弹出框，需要经过用户同意

下面用的就是 snsapi_userinfo

// 看地址中有没有code参数,如果没有code参数的话则请求微信官方的接口并获取包含code的回调链接
getWeChatCode() {
	//用于退出登录回来不会再调一次授权登录
	uni.setStorageSync('wechat_login_tag', 'true');
				
	const appID = '';  //公众号appID
	const callBack = ''; //回调地址 就是你的完整地址登录页
				
	//通过微信官方接口获取code之后，会重新刷新设置的回调地址【redirect_uri】
	window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
					appID + '&redirect_uri=' + encodeURIComponent(callBack) +
					'&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
},

3.因为授权成功微信会跳转到我们设置的回调地址，所以还要在页面生命周期onLoad中设置一下

onLoad() {
	const hasWechatLogin = uni.getStorageSync('wechat_login_tag') || null;
	if(hasWechatLogin) {
		this.checkWeChatCode();
	}
}

在methods中设置以下方法：

// 重定向回来本页面检查有没有code
checkWeChatCode() {
	let code = this.getUrlCode('code');
	if(code) {
		this.handleToLogin(code)
	}
},
// 正则匹配请求地址中的参数函数
getUrlCode(name) {
	return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) ||[, ''])[1].replace(/\+/g, '%20')) || null
},
// 把后端需要的code以及其他信息调用接口传过去
//比如调用接口loginIn
handleToLogin(code) {
	loginIn({
		code,
	}).then(res => {
		console.log('登录成功')
		uni.redirectTo({
			url: '/pages/index/index'
		})
	})
}

以上就是完整流程，但有几个需要注意的点

1.引导用户跳转授权那个链接 window.location.href 那串，顺序不能变动，最好直接复制我这个

2.那个appID，记住，一定要是公众号的ID ，一般是如果是小程序同步的H5，那就是这个小程序关联的那个公众号ID，不是开放平台的ID

3.回调地址是完整的链接，所以，要确保在公众号里设置了授权回调域名 ，你用的这个回调地址的域名，必须和公众号设置的一致(可以去微信公众平台登录关联的公众号看看有没有设置)

链接: 微信公众平台

完整代码如下：

<template>
	<button class="wechat-logo" @click="getWeChatCode">微信授权登录</button>
</template>

<script>
export default {
	onLoad() {
		const hasWechatLogin = uni.getStorageSync('wechat_login_tag') || null;
		if(hasWechatLogin) {
			this.checkWeChatCode();
		}
	},
	methods: {
		// 重定向回来本页面检查有没有code
		checkWeChatCode() {
			let code = this.getUrlCode('code');
			if(code) {
				this.handleToLogin(code)
			}
		},
		// 正则匹配请求地址中的参数函数
		getUrlCode(name) {
			return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) ||[, ''])[1].replace(/\+/g, '%20')) || null
		},
		// 看地址中有没有code参数,如果没有code参数的话则请求微信官方的接口并获取包含code的回调链接
		getWeChatCode() {
			//用于退出登录回来不会再调一次授权登录
			uni.setStorageSync('wechat_login_tag', 'true');
						
			const appID = '';  //公众号appID
			const callBack = ''; //回调地址 就是你的完整地址登录页
						
			//通过微信官方接口获取code之后，会重新刷新设置的回调地址【redirect_uri】
			window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
							appID + '&redirect_uri=' + encodeURIComponent(callBack) +
							'&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
		},
		// 把后端需要的code以及其他信息调用接口传过去
		//比如调用接口loginIn
		handleToLogin(code) {
			loginIn({
				code,
			}).then(res => {
				console.log('登录成功')
				uni.redirectTo({
					url: '/pages/index/index'
				})
			})
		}
	}		
}
</script>