官方链接：微信网页开发 / 网页授权

前提：
在微信公众号请求用户网页授权之前，开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中，修改授权回调域名。请注意，这里填写的是域名（是一个字符串），而不是URL，因此请勿加 http:// 等协议头

流程概述

在需要授权登录的地方跳转官方给的链接从而获取code，拿到code后调用后端接口从而获取token即可。

步骤如下

官方给的链接（此链接可以由接口获取，也可以自己写死）

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

参数说明：

Tip：前端最主要了解的就是redirect_uri和scope

redirect_uri：就是跳转官方给的链接后，官方需要跳回来的页面。

scope：可以理解为是否是静默登录；

值为snsapi_base无需用户点击授权直接跳到官网链接拿取code之后直接跳转回来，页面相当于会闪一下；

值为snsapi_userinfo是需要用户点击同意授权才会跳转官网链接拿取code值

主要代码

@/src/composables/useSetWechatToken.ts

import { getCurlOauth, getOpenidByCode } from "@/api/user"; //改成自己封装的api请求即可
import { useTokenStore } from "@/store/index"; //自己封装的store，用作存储token
async function setTokenHandler(redirect_url) {
  const token = uni.getStorageSync("token");

  // #ifdef H5
  var url = window.location.href;
  var theRequest: Record<string, string> = {};
  if (url.indexOf("?") != -1) {
    var str = url.substr(url.indexOf("?") + 1);
    var strs = str.split("&");
    for (var i = 0; i < strs.length; i++) {
      theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
    }
  }

  if (theRequest.code) {
    // 存在code时，调用接口获取token
    // 使用code和state调用接口获取普通用户的token
    // 后端获取toekn的接口根据自己的项目更换即可
    let res = await getOpenidByCode({
      code: theRequest.code,
      state: theRequest.state,
    });
    let { data } = res;
    let token = data.token.token;
    const tokenStore = useTokenStore();
    await tokenStore.setToken(token);
    // 存储token后，根据自己的项目需求写自己的逻辑即可
    return;
  }
  if (!token) {
    //没有token 时，获取跳转链接让用户授权公众号登录获取code
    getCurlOauthHandler();
    return;
  }
  // 存在token时，根据自己的项目需求写自己的逻辑即可

  // #endif
}
// 获取公众号授权链接并跳转（可根据项目而定）
async function getCurlOauthHandler(redirect_url) {
  let redirect_uri = redirect_url || `自己项目的域名/pages/xxx/xxx`;
  let params = { mode: 0, source: redirect_uri };
  let res = await getCurlOauth(params);
  let { auth_url } = res.data;
  window.location = auth_url;
}
export default setTokenHandler;

在需要的页面使用

import setWechatToken from "@/composables/setWechatToken";
onShow(async () => {
//可能不止一个页面需要登录，所以要将此页面的路径传过去
  let redirect_url = `${项目域名}/pages/xxx/xxx`;
  setWechatToken(redirect_url); //设置token新用户直接跳到注册页面
});