前端微信H5公众号实现授权登录的方法总结

https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId.value}&redirect_uri=${local}&response_type=code&connect_redirect=1&scope=snsapi_userinfo&state=STATE#wechat_redirect

  let local = `http://h5.liangpiao.net.cn/cdx2.html`; // 获取页面url

  if (window.location.origin.indexOf("192.168.110.71") !== -1) {
    local = `http://h5.liangpiao.net.cn/cdx1.html`; // 获取页面url

  //  地址转码
  local = encodeURIComponent(local);

  //  获取 code 地址
  let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId.value}&redirect_uri=${local}&response_type=code&connect_redirect=1&scope=snsapi_userinfo&state=STATE#wechat_redirect`;

  window.location.href = url;

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body></body>
</html>
<script>
	window.onload = function() {
		window.location.href = `http://192.168.110.71:5173/#/pages/login/index/${location.search}`;
	};
</script>

	const getCode = () => {
		let local = `http://xxxxx/cdx2.html`; // 获取页面url 线上


		if (window.location.origin.indexOf("192.168.110.71") !== -1) {
			local = `http://xxxxx/cdx1.html`; // 获取页面url  本地
		}

		//  地址转码
		local = encodeURIComponent(local);

		//  获取 code 地址
		let url =
			`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId.value}&redirect_uri=${local}&response_type=code&connect_redirect=1&scope=snsapi_userinfo&state=STATE#wechat_redirect`;

		window.location.href = url;
		// Taro.hideLoading();
	};

	//用户重定向登录
	const getUserInfo = async (option) => {
		let code = option.code;
		let userInfo = uni.getStorageSync("userInfo") ?
			uni.getStorageSync("userInfo") :
			null;

		if (userInfo) {
			userInfo = await userApi
				.userInfo({
					userId: userInfo.id
				})
				.then((res : any) => res.data);
			// if (!userInfo) {
			// 	Taro.removeStorageSync("userInfo");
			// }
		} else if (code) {
			const openId = await userApi
				.EmitCodeByH5({
					code
				})
				.then((res : any) => res.data);

			openid.value = openId;
			uni.setStorageSync("openid", openId);
			const UserInfoRes = await userApi
				.Login({
					userName: openId
				})
				.then((res : any) => res);
			if (UserInfoRes.state === 200) {
				userInfo = UserInfoRes.data;
				uni.setStorageSync("userInfo", UserInfoRes.data);
				userInfo.value = UserInfoRes.data;
				userStore.setUserinfo(UserInfoRes.data);
				userStore.setToken(UserInfoRes["token"]);
			} else if (UserInfoRes.state === 202) {
				return

			}
		}
		// 如果 userInfo 为空 代表 本地 没有 缓存数据 且 code 不存在 获取失效  重新获取code
		if (!userInfo) {
			getCode();
			return;
		} else {

		}
	};