【公众号开发】H5 微信授权

/**
 * wxLogin: 用于跳转到微信授权页面进行登录
 */
const wxLogin = (redirectUrl: string) => {
  // 跳转到微信授权页面，并带上当前页面 URL 作为参数
  const extra = encodeURIComponent(
    JSON.stringify({
      redirectUrl: encodeURIComponent(redirectUrl),
    })
  );
  const wxCallbackPath = encodeURIComponent(`${currentOrigin}/pages/auth/callback/wx?extra=${extra}`);
  const wxLoginPath = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${wxPublicAppId}&redirect_uri=${wxCallbackPath}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
  window.location.href = wxLoginPath;
};

${wxPublicAppId}: 这个变量代表微信公共账号的 AppID。在微信开发中，每个应用都会有一个唯一的 AppID，用于标识应用并进行微信服务的授权，在微信公众平台的开发设置里获取。

${wxCallbackPath}: 这个变量是微信登录成功后回调的 URL 路径。用户完成登录和授权后，微信会将用户重定向回这个地址。这个路径被编码成 URL 编码的字符串，以确保它在 URL 中是有效的。

${currentOrigin}: 这个变量代表当前页面的域名，它用于构造微信回调的完整 URL，需要在微信公众平台进行网页授权设置。

${extra}: 这是一个额外的数据对象，它被 JSON 字符串化并编码成 URL 编码的字符串。它包含了 redirectUrl，即用户登录成功后应该被重定向到的页面的 URL。extra 被附加到回调 URL 上，以便在用户登录成功后可以传递额外的信息。