微信公众号网页授权登录的超简单实现步骤

<template>
  <div class="login"></div>
</template>
<script>
import { login } from "@/api/login.js";
import indexConfig from "@/config/index.config";
export default {
  data() {
    return {};
  },
  created() {
    this.isWXBrowser = this.isWXBrowser();
    if (this.isWXBrowser) {
      let code = this.getUrlCode("code");
      if (code) {
        this.wxLogin(code); //后台登录
      } else {
        this.getWeChatCode(); //微信授权
      }
    }
  },
  onload() {},
  mounted() {},
  methods: {
    //判断是否是微信内置的浏览器
    isWXBrowser() {
      return (
        String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) ===
        "micromessenger"
      );
    },
    //截取地址栏code
    getUrlCode(name) {
      return (
        decodeURIComponent(
          (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
            location.href
          ) || [, ""])[1].replace(/\+/g, "%20")
        ) || null
      );
    },
    //访问微信地址，用来获取code
    getWeChatCode() {
      let local = encodeURIComponent(window.location.href); //获取当前页面地址作为回调地址
      let appid = indexConfig.weixinAppId;
      //通过微信官方接口获取code之后，会重新刷新设置的回调地址【redirect_uri】
      window.location.href =
        "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
        appid +
        "&redirect_uri=" +
        local +
        "&response_type=code&scope=snsapi_base&state=1#wechat_redirect";
    },
    //把code传递给后台接口，静默登录
    wxLogin(code) {
      login(code).then((res) => {
        if (res.success) {
          uni.setStorageSync("token", res.data.session.token);
          uni.setStorageSync("userid", res.data.session.userid);
          uni.navigateTo.push({
            route: "/pages/works/index",
          });
        } else {
          uni.showToast({
            title: res.msg,
            duration: 3000,
            icon: "none",
          });
          return;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
</style>