prefacio

Es necesario agregar una función de inicio de sesión de escaneo de código WeChat en la página h5 del mismo nombre de dominio.Si el usuario ya tiene una cuenta del Mini Programa, puede iniciar sesión directamente.

Uso : desarrollo nativo del applet vue2+WeChat La premisa
de que las funciones anteriores se pueden realizar es: el mismo usuario tiene el mismo UnionID para diferentes aplicaciones bajo la misma plataforma abierta de WeChat . El nombre de dominio ha sido configurado. ¿Qué se puede utilizar para distinguir si se trata del mismo usuario? El número de teléfono móvil todavía se usa en el proyecto actual.

texto

proceso

Incruste el código QR en la página -> el usuario escanea el código para obtener un código temporal -> envía el código al fondo y el fondo devuelve la información del usuario

Introduzca la dirección en la página index.html (pero se informa un error, mi solución está a continuación)

<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

Agregue el siguiente código a la página que muestra el código QR para la creación de instancias

  //login.vue
  //二维码容器
  <div id="login_container"></div>

//在mounted中执行下面的代码，获取二维码
    //获得登录二维码
    getwxCode() {
    
    
      var obj = new WxLogin({
    
    
        id: "login_container",
        appid: "自己的",
        scope: "snsapi_login",
        redirect_uri: encodeURI("自己的"),
        state: "",
        style: "black",
        href: "自定义的样式..../qrcode.css",
        self_redirect: false,
      });
    },

En este momento, si el código QR se puede mostrar correctamente, si escanea el código con su teléfono móvil, saltará y empalmará el valor redirect_uricargado más tarde. 3. En términos generales, el redirect_uri debe configurarse como una página intermedia y el código debe procesarse en la página intermedia. Pero debido a que se usa el modo de historial, primero se implementa en la página de inicio.code

  mounted() {
    
    
    this.getCodeMes();
  },
    getCodeMes() {
    
    
      let code = this.getQueryString("code");
      console.log("code:", code);
      if (!code) {
    
    
      return
      } else {
    
    
        this.getLoginMes(code);
      }
    },
    //使用正则读取url里的code
    getQueryString(name) {
    
    
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      // console.log(window.location.search);
      var r = window.location.search.substr(1).match(reg);
      if (r != null) {
    
    
        return unescape(r[2]);
      }
      return "";
    },
    //对接后端接口，获取用户信息
    getLoginMes(code) {
    
    
      let params = {
    
    
        code: code,
      };
      let queryParams = new URLSearchParams(params);
      fetch("后端接口", {
    
    
        method: "POST",
        body: queryParams,
      })
        .then((response) => {
    
    
          if (response.ok) {
    
    
            return response.json();
          }
          console.log(response);
          throw new Error("Network response was not ok.");
        })
        .then((data) => {
    
    
          console.log(data);
          //如果code过期失效了处理
          if (data.code == "100") {
    
    
            //清除一下地址上的code
            window.history.replaceState(
              null,
              null,
              window.location.href.split("?")[0] + window.location.hash
            );
            this.$router.push("/");
          }
          if (data.code == "200") {
    
    
            localStorage.setItem(
              "userinfo",
              JSON.stringify(data.result)
            );
            
            setTimeout(() => {
    
    
              window.history.replaceState(
                null,
                null,
                window.location.href.split("?")[0] + window.location.hash
              );
              this.$router.push("/登入后的页面");
            }, 2000);
          } 
        })
        .catch((error) => {
    
    
          console.error("There was a problem with the network request:", error);
        });
    },
  },

eso es basicamente

problemas encontrados

Después de importar la dirección en el paso 1, Google Chrome informa el siguiente error:

Unsafe JavaScript attempt to initiate navigation for frame with URL 'http://www.xxx.xxx/' from    frame with URL "https://open.weixin.com/xxxxxxx" The frame attempting navigation is targeting its top-level window, but is neither same-origin with its target nor is it processing a user gesture

Solución: reemplace el archivo js importado con el siguiente
motivo: el navegador prohíbe la redirección
Solución: simplemente consulte el código dentro de
https://www.cnblogs.com/enhengenhengNymph/p/14450416.html
2. Código QR No se puede mostrar normalmente , y se informa un error: Oops! something went wrong
- Mi razón es: el "dominio de devolución de llamada de autorización" está mal escrito. No hay coincidencia con la plataforma abierta.
- Otras posibles razones: primero descarte que no sea un problema de archivo del sitio web, no sea un problema de configuración de la plataforma WeChat y de terceros, o no establezca un nombre de dominio comercial o un nombre de dominio de seguridad de la interfaz js en la cuenta oficial.
-referencia _

Referencias y Suplementos

referencia

0. Oficial de WeChat: Guía de desarrollo de inicio de sesión de la aplicación de sitio web WeChat
1. Método de integración de inicio de sesión con código de escaneo Vue WeChat y dificultades de desarrollo : más detallado, desde la obtención de appid hasta el estilo de código QR. El inconveniente es que no hay una descripción más detallada del proceso de escaneado de códigos.
2. Vue implementa el inicio de sesión con código de escaneo de WeChat en el lado de la PC (versión web incrustada en el código QR) : hay un proceso relativamente completo, que utiliza el enrutamiento para interceptar el código, y también incluye el enlace si el usuario del código de escaneo no está registrado. lo probé)
3. El front-end implementa el código de escaneo de WeChat para iniciar sesión en el sitio web en la PC (página anidada del código QR). Es súper detallado, y la reunión del paquete: es muy detallada. También se habla de estilo. personalización, pero la imagen está colgando.
4. Acerca de la generación e incrustación de códigos QR con más detalle : acerca de la generación e incrustación de códigos QR con más detalle
5. Cómo realizar la función de inicio de sesión del código escaneado de WeChat (Vue) : muy completo, incluido el uso de Node.js en la parte trasera La parte también está escrita. Desde el registro hasta la obtención del token. ¡100 puntos!
6. ¿Cómo obtiene el subprograma WeChat el ID de unión del usuario? El conocimiento previo se puede encontrar aquí

Reponer

Otras referencias y soluciones

Proceso de inicio de sesión de Vue WeChat : al usar vue-wxlogin, se siente similar, pero no es necesario introducir un script

otras optimizaciones

Después de completar el inicio de sesión, procese el código y elimínelo. (solo para que la URL se vea más fresca)

Otros a optimizar

1. El modo de historial no se usa, por lo que después de escanear el código, solo puede regresar a ...8080/esta página para recibir el código. ( No se puede llevar el signo #, se borrará el siguiente # )
2. Puede consultar este estilo y usar el ícono para cambiar el método de inicio de sesión, por lo que la interfaz de usuario es bastante dolorosa. vue: tutorial detallado sobre el acceso al sitio web a la función de inicio de sesión de escaneo de código de WeChat, proceso detallado completo y código fuente de muestra de función completa (con soluciones a problemas comunes y esquema de modificación de estilo de código QR) un artículo de columna pagado, no leído.
3. Luego puede agregar funciones como el período de validez del código QR, actualización automática/manual, etc.

[h5 + subprograma WeChat] Vue2 implementa la función de inicio de sesión del código de escaneo h5