Taro + cool框架node.js 实现微信公众号平台的微信授权

1.需求

我现在使用Taro + vuie3 做了一个H5 ，现在根据手机号注册和登录 登录成功以后 个人中心 想获取微信公众号的头像和昵称 然后是点击按钮

平常我做的公众号都是 一进入页面 就重定向登录 获取授权 但是现在是点击按钮

2.解决

通过我的探索和思考 可以为大家提供解决方案 和前后端代码

①前端使用的Taro +vue3 + ts 

//绑定微信
const handleWeixin = async () => {
  await getCode();
};
---点击的按钮


//获取code
const getCode = () => {
  // 网络重定向地址
  // let local = `http://xxxxxx/cdx2.html`; // 获取页面url
  let local = `http:/x'x'x'x'x'x'x'xxxxxxxxxxx/cdx2.html`; // 获取页面url

  // // // // 判断 如果是本地 开发 设置本地重定向地址
  // http://192.168.3.8:10086/
  if (window.location.origin.indexOf("192.168.110.71") !== -1) {
    local = `http://xxxxxxxxxx/cdx1.html`; // 获取页面url
    // local = `http://xxxxxxxxxxn/cdx1.html`; // 获取页面url
  }
  //  地址转码
  local = encodeURIComponent(local);

  //  获取 code 地址registerCode
  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();
};

这个是重定向的地址  因为公众号 需要微信地址跳转 验证服务器的安全 才会给你微信的头像和昵称还有openid



//用户重定向登录  
const getUserInfoByWx = async (code) => {
  console.log(code, "dunpiao-userInfo");
  // return;
  let userInfo = Taro.getStorageSync("dunpiao-userInfo")
    ? Taro.getStorageSync("dunpiao-userInfo")
    : null;

  if (userInfo.phone) {
    const res = await loginApi.EmitCodeByH5({
      code: code,
      phone: Userinfo.value.phone,
    });
    if (res.code == 1000) {
      userInfo = res.data;
      userStore.setUserinfo(userInfo);
    } else {
      Taro.showToast({
        title: res.message,
        icon:"none",
        duration: 3000,
      });
    }
    // if
    // userInfo

    // userInfo = userInfo = Taro.getStorageSync("userInfo")
    //   ? Taro.getStorageSync("userInfo")
    //   : null
    // return;
    if (!userInfo.phone) {
      Taro.removeStorageSync("dunpiao-userInfo");
    }
  } else if (code) {
  }
  // 如果 userInfo 为空 代表 本地 没有 缓存数据 且 code 不存在 获取失效  重新获取code
  if (!userInfo.phone) {
    getCode();
    return;
  } else {
  }
};
//这个方法应该放到onMounted 中 每当从微信地址跳转回来的时候 根据code 调用后端接口

②后端接口使用的是cool-admin  node.js

controller 

service

微信.request

每个项目的逻辑都是不一样的我这个业务逻辑 有学员和导师 所以基本的代码逻辑 结构我认为这样是可以的 关于具体的业务逻辑 代码写法不一样

3.总结

以上就是我的前端和后端的解决方案

欢迎大家指正和咨询问题