从0-1 h5 h5 授权适配 h5微信授权-CFANZ编程社区

// 浅浅记录一下前端菜狗第一次写 vue + vant h5 吧
// 用的是vite 咱就是说 现在vite用的多 那就浅用一下吧
// 正式开始
// 一：用 vite 创建项目 https://vitejs.cn/guide/#scaffolding-your-first-vite-project)
// (1) 使用NPM npm init vite@latest 然后按照提示操作即可！（yarn pnpm 都可）
// (2) 项目要下载依赖 npm install 这都知道的
// (3) 咱选择的是 vant 作为 UI框架（vant移动端） https://youzan.github.io/vant/#/zh-CN/
//      按照vant 提示开始整活

// **vant**

// vue3       Vue 3 项目，安装最新版 Vant
//            npm i vant

// vue2       Vue 2 项目，安装 Vant 2
//            npm i vant@latest-v2


// (1）配置
// 我用的vite vue3 所以直接按照 官方文档开始 安装插件 配置插件 按需引入组件（推荐）

// （2）适配
// 我也是按照vant 推荐使用的 vw vh 
// Vant 默认使用 px 作为样式单位，如果需要使用 viewport 单位 (vw, vh, vmin, vmax)，推荐使用      postcss-px-to-viewport 进行转换。

// postcss-px-to-viewport 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位
// PostCSS PostCSS 示例配置
// 下面提供了一份基本的 PostCSS 示例配置，可以在此配置的基础上根据项目需求进行修改。
// 在项目根目录新建文件夹  postcss.config.js
//module.exports = {
//   plugins: {
//       'postcss-px-to-viewport': {
//           viewportWidth: 375,// ui设计稿是多宽就写多宽；
//     },
//   },
// };


// 然后你就可以用 px 作为单位开始写啦
// 项目中我还遇到了 x轴出现滚轮 用下面的方法就可以啦
// src/assets/sytle(没有新建)/index.less 里面写

```javascript
html {
  overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
  width: 100vw;
  overflow: hidden;
}

// 还有一些常规的路由接口我就用的 Vue Router axios 引入之前别忘了安装它们
// 可以参考这篇文章他用的sass 但是下载sass没成功我就用 less 了
部分参考他的
// …

// 我们这个h5 页面要吊起微信授权我再不自量力的白话白话吧哈哈
// 咱前端要做的就是拼接一个链接拿到 code 用code作为参数传给后端换取微信信息
// 我们一开始进入这个页面肯定是要吊的所以在mounted 里面写

最开始你要吊起微信授权的页面

  mounted() {
  //在这我们可以先打印一下 window.location 是啥 下面这些 变量就都清楚了
    let wxCode = this.GetQueryString("code");
  // 这里先判断一下 有没有 code 没有 code 就去拼接链接 去获取 code 要作为一个参数 传给后端的 
    if (wxCode == null) {
      let selfBaseUrl =
        window.location.protocol + 
        //这里可能是 http 或者https （或者开发 和 生产 环境的前缀
        //都不同） 所以不写死 就直接取它就好
        "//" +
        window.location.host +
        window.location.hash +
        "AgentCode";
        //最后这个是我 路由跳转的页面 看你自己的业务 和路由是怎么配置的 
      const url =
        "https://open.weixin.qq.com/connect/oauth2/authorize?appid=这里写你公众号的appid（因为我这是公众号里面嵌套了h5页面）" +
        "&redirect_uri=" +
        encodeURIComponent(selfBaseUrl) +
        // 必须用这个 encodeURIComponent 包裹一下 别管 官方就是这么写的
        "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
      window.location = url; //然后就跳转啦
      
    }
  },

  methods: {
    GetQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      // window.location.search.substr(1)表示?后面的地址
      var r = null;
      if (window.location.search) {
        r = window.location.search.substr(1).match(reg);
      } else if (window.location.hash) {
        if (window.location.hash.split("?")[1]) {
          r = window.location.hash.split("?")[1].match(reg);
        }
      }
      if (r != null) {
        return unescape(r[2]);
      }
      return r;
    },
    
  },

重定向的页面
// 这是吊起之后重定向的页面也就是上一个页面链接里的 redirect_uri 页面
// 也是在mounted 里面

mounted() {
    var wxCode = this.GetQueryString("code");
    console.log(
      wxCode,
      "wxCodewxCodewxCodewxCodewxCodewxCodewxCodewxCodewxCode"
    );
  },


GetQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      // window.location.search.substr(1)表示?后面的地址
      var r = null;
      if (window.location.search) {
        r = window.location.search.substr(1).match(reg);
      } else if (window.location.hash) {
        if (window.location.hash.split("?")[1]) {
          r = window.location.hash.split("?")[1].match(reg);
        }
      }
      if (r != null) {
        return unescape(r[2]);
      }
      return r;
    },