Herramientas para desarrolladores de WeChat: uso sencillo de la depuración móvil

Actualmente, estamos trabajando principalmente en proyectos del lado de la PC, pero ocasionalmente hay necesidades móviles, algunas en aplicaciones nativas, otras en WeChat y navegadores, y hasta ahora solo he estado expuesto a estos tres. El escenario no es lo suficientemente profundo para terminales móviles. La introducción en este artículo también está sesgada hacia las aplicaciones. Perdóneme si hay alguna deficiencia.

1. Herramientas para desarrollar páginas móviles

①Páginas de navegador móvil

El método para desarrollar páginas estáticas aquí es el mismo que el desarrollo normal de páginas para PC. Navegador Chrome para desarrollo y depuración, pero la diferencia es cambiar el modo de desarrollo de la PC al modo de desarrollo móvil (cambie el modo de depuración de la PC al terminal móvil, simplemente haga clic en ② en la imagen, ① en la imagen puede simular diferentes dispositivo de terminal móvil, y puede agregar el dispositivo usted mismo), el efecto es el siguiente:

Este método se puede depurar directamente

②La página móvil integrada en la APLICACIÓN

Algunas aplicaciones comunes que contienen actividades específicas del usuario tienen mucha demanda para incrustar páginas H5. Porque esto ahorrará costos de desarrollo, reducirá la velocidad de iteración de la aplicación nativa y será fácil de usar.

El método para desarrollar e incrustar la aplicación nativa es básicamente el mismo que el primer método. La única diferencia con el primer método es: si hay alguna interacción entre la página h5 y la aplicación nativa (js debe hacerlo). obtener el contenido devuelto por los datos de la aplicación nativa), este método no se puede lograr porque el método anterior se coloca debajo de la aplicación del navegador, no de una aplicación nativa específica.

Solución:

Primero discuta la interfaz con colegas en el desarrollo de aplicaciones nativas, use el método 1 para desarrollar páginas estáticas (la lógica normal debe escribirse aquí) y luego discuta con el back-end. colegas Después de depurar conjuntamente la interfaz, la prueba no se pudo enviar. Finalmente, depuramos conjuntamente el entorno de prueba con nuestros colegas de desarrollo nativo. El proceso parece complicado, pero si no hay ningún problema con la interfaz nativa, normalmente se puede realizar rápidamente. La desventaja es que si hay un problema al depurar conjuntamente con el nativo, es difícil solucionarlo. (No sé si tiene algún buen método, ¡por favor deme algún consejo!)

③Desarrollar la página WeChat

De hecho, esto no debería mencionarse, porque la página WeChat es diferente de la página del navegador normal "Igual", se puede pensar que navegar por la web en WeChat es equivalente a navegar con QQ Browser. Así que no entraré en detalles.

Resumen: el desarrollo móvil sigue siendo el "gran método" de f12, y luego cambia a la depuración móvil.

2. Uso de WeChat Developer Tools para la depuración móvil

No es ningún problema desarrollar páginas pequeñas con f12, pero si es un proyecto basado en WeChat, irá un poco más allá. las capacidades. Por lo tanto, la mayoría de los proyectos desarrollados para WeChat básicamente pueden utilizar las herramientas de desarrollo de WeChat.

Las herramientas de desarrollo para WeChat realmente facilitan enormemente la eficiencia del desarrollo de proyectos de WeChat.

La siguiente es una calculadora de impuestos personales para aplicaciones locales (de hecho, la operación de la consola es básicamente la misma que la del navegador f12, por lo que los colegas que están al frente de esta cosa generalmente comienzan de inmediato):

Sin embargo, aunque esta herramienta de desarrollo es la herramienta de desarrollo oficial de WeChat, después de todo es un emulador. La complejidad de la situación real puede provocar algunas incompatibilidades de estilo. Por ejemplo, la pantalla del cliente WeChat de vivo siempre está estropeada (un problema descubierto por un colega de pruebas. Su teléfono móvil puede restaurar la escena, pero mi teléfono móvil es normal). Por lo tanto, debemos depurarlo en el teléfono real de manera específica. ¿Cómo hacerlo? La siguiente es una breve introducción sobre cómo utilizar las herramientas de desarrollo de WeChat para la depuración en máquinas reales.

En comparación con la depuración móvil de iOS, la depuración móvil de Android es más rica, por lo que tomando Android como ejemplo, el método de depuración de iOS es el mismo que la "depuración normal" en la depuración de Android.

①Depuración normal

Los pasos para la depuración normal son los siguientes:

Explicación del paso:

Paso 1: Seleccione la tarjeta de red inalámbrica dirección, la predeterminada Eso es todo, la herramienta consultará automáticamente la dirección IP v4 de su tarjeta de red inalámbrica

Paso 2: Esto significa que la red a la que está conectado su teléfono móvil debe estar en el mismo segmento de red que la IP v4 obtenida en el primer paso (¿qué es un segmento de red? Ver aquí). La forma más sencilla es configurar la red del teléfono móvil y la red del ordenador en la misma fuente (conectarse a la misma red inalámbrica)

Paso 3: este paso es muy claro y existe una forma rápida de " Baje la barra de herramientas; mantenga presionado el ícono de conexión inalámbrica" ​​y luego podrá ingresar directamente a la lista inalámbrica para operaciones posteriores. Las operaciones de iOS son las siguientes:

iOS: Configuración - LAN inalámbrica - Seleccionar red - Manual de proxy HTTP

Paso 4: Después de configurar los pasos anteriores, reinicie WeChat. Esto puede permitir que WeChat. reinicie Detecte las condiciones actuales de la red y luego abra la página que desea depurar (tenga en cuenta que primero debe abrir la página que desea depurar antes de poder comenzar a depurar)

Paso 5: Esto no está en el descripción anterior, pero es necesario explicarlo. Después de abrir la página web de depuración, haga clic en el botón Iniciar depuración a continuación.

Si opera correctamente, el cuadro emergente se verá así:

Si actualmente no abre la página de depuración en WeChat o la dirección de la página local abierta es incorrecta, fallará:

p>

Tenga en cuenta que si desea depurar una página desarrollada localmente, debe habilitar el servicio web y usar el trabajo para ver las solicitudes de red, lo cual es muy conveniente.

②Depuración del kernel de parpadeo de X5

Los pasos de depuración de parpadeo de X5 son los siguientes:

Primero, las herramientas de desarrollo deben verificar si su teléfono admite la función de depuración. así que primero seleccione Verificación y luego siga los pasos a continuación:

Después de completar los tres pasos anteriores, haga clic en el botón Iniciar depuración directamente. La herramienta mostrará un cuadro emergente para detectar la información de su teléfono móvil, pero. nada más, así

¡Eso es porque WeChat aún no ha abierto una página que pueda depurarse! ! !

De manera similar, cuando abre una página que se puede depurar, la "pizarra" cambiará su apariencia.

Nota: Durante el proceso, se le preguntará "Si se realiza la depuración USB". permitido", simplemente elija aceptar.

Luego haga clic en "inspeccionar" que señala la flecha y aparecerá nuevamente la pantalla familiar. ! !

¡Bien, ahora puedes depurar felizmente la interfaz de la máquina real!

Este artículo se centra en las aplicaciones y no profundiza. ¡Perdóneme por cualquier deficiencia!

Tener un corazón como las estrellas, ¿es una belleza o un pecado?