Fui a la entrevista con WeChat Mini Program con total confianza, ¡pero estas preguntas técnicas me deslumbraron!

Problemas técnicos

Inserte la descripción de la imagen aquí

1. Por favor, hable sobre la función del Mini Programa WeChat.

project.config.json archivo de configuración del proyecto, el más utilizado es configurar si se habilita la verificación https;
App.js establece algunos datos básicos globales, etc .;
Pestaña inferior de App.json, barra de título y configuración de enrutamiento;
App.wxss estilo público, incluido iconfont, etc .;
las páginas contienen páginas específicas;
index.json (Configure el título de la página actual y los componentes de importación, etc.);
index.wxml (estructura de la página);
index.wxss (hoja de estilo de la página);
index.js (lógica de página, solicitud y procesamiento de datos, etc.);

2. Describa brevemente los tipos de archivos relevantes del subprograma WeChat.

El archivo de plantilla wxml es un conjunto de lenguaje de etiquetas para el diseño de marcos, que combina componentes básicos y un sistema de eventos para construir la estructura de la página.
El archivo de estilo wxss es un lenguaje de estilo que se utiliza para describir los estilos de componentes WXML.
archivo de lógica de script js, solicitud de red de procesamiento lógico
json archivo de configuración, configuración del subprograma, como registro de página, título de página y tabBar
app.json Configuración global de todo el subprograma, que incluye:
páginas: [todas las rutas de la página]
Configuración de red (tiempo de espera de la red)
Ventana de rendimiento de la interfaz (registro de página) : {color de fondo, estilo de navegación, título predeterminado}
Pestaña inferior, etc.
app.js monitorea y procesa las funciones del ciclo de vida del applet y declara variables globales
Archivo de estilo de configuración global App.wxss
3. Por favor, hable sobre las similitudes y diferencias entre wxml y html estándar.
Ambos se utilizan para describir la estructura de la página;
Todos constan de etiquetas, atributos, etc .;
Los nombres de las etiquetas son diferentes y hay menos etiquetas de subprograma y más etiquetas individuales;
Más atributos como wx: if y expresiones como { {}}
WXML solo se puede previsualizar en la herramienta de desarrollo de subprogramas WeChat, mientras que HTML se puede previsualizar en el navegador. El paquete del componente es diferente. WXML vuelve a empaquetar el componente. El subprograma se ejecuta en el JS Core. No hay árbol DOM ni objeto de ventana. El subprograma El objeto de ventana y el objeto de documento no se pueden utilizar en.
4. Por favor, hable sobre las similitudes y diferencias entre WXSS y CSS.
Se utilizan para describir el aspecto de la página;
WXSS tiene la mayoría de las características de CSS y también ha realizado algunas extensiones y modificaciones;
WXSS agrega una nueva unidad de tamaño, WXSS admite una nueva unidad de tamaño rpx en la parte inferior;
WXSS solo admite algunos selectores CSS;
WXSS proporciona estilo global y estilo local
WXSS no admite flujos de documentos de ventana y dom

5. ¿Cómo encapsula la solicitud de datos del subprograma WeChat?

Coloque todas las interfaces en un archivo js unificado y exporte
Cree un método para encapsular los datos de la solicitud en app.js
Llame a los datos de solicitud empaquetados en la subpágina

Cree el directorio utils y el archivo api.js y el archivo apiConfig.js en el directorio raíz;
Encapsule get \ post \ put \ upload básico y otros métodos de solicitud en appConfig.js, establezca el cuerpo de la solicitud, traiga token y manejo de excepciones, etc .;
Introduzca el método de solicitud encapsulado por apiConfig.js en api.js, configure el método correspondiente y exporte de acuerdo con las URL solicitadas por los datos de la página;
Importar en páginas específicas
6. ¿Qué métodos existen para transferir datos entre páginas del Mini Programa?
Agregue atributos data- * al elemento html para pasar el valor y luego consígalo a través del parámetro param de e.currentTarget.dataset u onload. Nota: el nombre de datos no puede tener letras mayúsculas y no puede almacenar objetos
Establezca el ID del método de la identificación para pasar el valor, obtenga el valor de la identificación establecida a través de e.currentTarget.id y luego pase el valor configurando el objeto global
Agregar valor de parámetro en el navegador

Utilice variables globales para lograr la transferencia de datos
Cuando la página es redirigida o redirigida, use url para pasar datos con parámetros
Utilice la plantilla de plantilla de componente para pasar parámetros
Usar caché para pasar parámetros
Usa la base de datos para pasar parámetros

7. Por favor, hable sobre las similitudes y diferencias entre el enlace bidireccional del applet y vue.

Es más o menos lo mismo, pero el atributo de this.data en el subprograma no se puede sincronizar directamente con la vista. ¡Debe llamar al método this.setData ()!

1. Enlace bidireccional: Vue admite el enlace bidireccional de forma predeterminada, y los applets de WeChat necesitan utilizar datos.
2. Valor: En vue, el valor se obtiene a través de esta razón. En el subprograma, use this.data.reason para obtener el valor.
3. Método de definición: el programa pequeño se puede definir en app.js, y el método vue se define escribiendo en el método.

1. Cuando vaya a las variables: -programa pequeño wx: for = "listas" -Vue es v-for = "elemento en listas"

Al llamar al modelo de datos (asignación): - Mini programa: this.data.item // llamar a this.setData ({item: 1}) // asignación- vue: this.item // llamar a this.item = 1 //
El enlace bidireccional del subprograma de asignación no es en realidad un enlace bidireccional. Si se cambia el valor de una variable en el archivo applet.js, el valor de la página no cambiará. Si desea que el valor de la página también cambie Debe ser operado por setData y Vue por defecto es un enlace bidireccional, que solo cambia el valor de una variable. La página también cambiará

8. Por favor, hable sobre la función de ciclo de vida del subprograma.

onLoad () se activa cuando se carga la página, solo se llamará una vez para obtener los parámetros en la ruta de la página actual.
onShow () Se activa cuando la página se muestra / corta en primer plano, generalmente se usa para enviar solicitudes de datos;
onReady () se activa cuando se completa la primera representación de la página, solo se llamará una vez, lo que significa que la página puede interactuar con la capa de vista.
onHide () Se activa cuando la página está oculta / cambiada al fondo, como cuando la pestaña inferior cambia a otras páginas o el subprograma cambia al fondo, etc.
onUnload () Se activa cuando se descarga la página, como redirectTo o navigateBack a otras páginas.
onPullDownRefresh () La función de enlace de actualización desplegable, el usuario irá automáticamente a esta función cuando se actualice el menú desplegable

9. onReachBottom () La función de gancho de voltear hacia arriba y hacia abajo 9. ¿Describe brevemente el principio del subprograma WeChat?

El mini programa es esencialmente una aplicación de una sola página. Toda la representación de la página y el procesamiento de eventos se realizan en una página, pero se pueden llamar varias interfaces nativas a través del cliente WeChat;
Su arquitectura es un modelo de arquitectura basada en datos. Su interfaz de usuario y los datos están separados. Todas las actualizaciones de la página deben implementarse mediante cambios en los datos;
Es técnicamente similar al desarrollo de front-end existente, utilizando JavaScript, WXML, WXSS tres tecnologías para el desarrollo;
La función se puede dividir en dos partes: webview y appService;
Webview se utiliza para mostrar la interfaz de usuario y appService se utiliza para procesar la lógica empresarial, los datos y las llamadas de interfaz;
Las dos partes se ejecutan en dos procesos y se comunican a través de la capa del sistema JSBridge para realizar la representación de la interfaz de usuario y el procesamiento de eventos.

Los miniprogramas de WeChat se desarrollan utilizando tres tecnologías: JavaScript, wxml y wxss.Las diferencias con el desarrollo front-end existente son:

El código JavaScript se ejecuta en la APLICACIÓN WeChat, por lo que algunas aplicaciones de tecnología h5 necesitan la APLICACIÓN WeChat para proporcionar el soporte API correspondiente;
wxml WeChat se desarrolla en base a la sintaxis xml, por lo que solo podemos usar las etiquetas existentes proporcionadas por WeChat durante el desarrollo, y las etiquetas html no se pueden usar;
Wxss tiene la mayoría de las características de css, pero no todo el soporte sin documentación detallada (las imágenes de wxss deben importarse usando direcciones de enlaces externos, sin cuerpo, los estilos se pueden importar directamente usando la importación).

La arquitectura de WeChat es un modelo de arquitectura basada en datos. Su interfaz de usuario y los datos están separados. Todas las actualizaciones de la página deben implementarse mediante cambios en los datos.

Las funciones del mini programa se dividen en webview y APPservice. Webview se utiliza principalmente para mostrar la interfaz de usuario y appservice se utiliza para procesar la lógica empresarial, los datos y las llamadas de interfaz. Se llevan a cabo en dos procesos, se comunican a través de la capa del sistema JSBridge y realizan la representación de la interfaz de usuario y el procesamiento de eventos.

10. Por favor, hable sobre la comparación de los subprogramas de desarrollo nativos, wepy y mpvue.

Personalmente, creo que si es un proyecto nuevo y no hay migración del antiguo proyecto h5, considere usar programas pequeños para el desarrollo nativo, la ventaja es que en comparación con los frameworks de terceros, hay menos pits.
Y si hay proyectos antiguos de h5 que son desarrollados por vue o los proyectos de h5 también requieren un pequeño desarrollo de programas, es más adecuado para wepy o mpvue
para migración o desarrollo. Wepy casi no se actualiza recientemente, por lo que recomendamos mpvue de Meituan.
Y si el front-end del equipo es fuerte, no hay problema en construir un marco por ti mismo.
11. ¿Qué métodos pueden mejorar la velocidad de aplicación de los miniprogramas de WeChat?
Mejorar la velocidad de carga de la página
Predicción del comportamiento del usuario # ¿Qué es la predicción del comportamiento?
Reducir el tamaño de los datos predeterminados
Solución de componentes # Uso

12. ¿Analizar las ventajas y desventajas de los miniprogramas de WeChat?

Ventaja:

Fácil de usar, la biblioteca de componentes básicos es relativamente completa, básicamente no es necesario considerar problemas de compatibilidad;
La documentación de desarrollo es relativamente completa, la comunidad de desarrollo es relativamente activa y se admite el desarrollo de complementos;
Buena experiencia de usuario: no es necesario descargar, se puede abrir buscando y escaneando, la velocidad de apertura es rápida y se puede agregar al escritorio en Android, similar a la aplicación nativa;
El costo de desarrollo es menor que APP;
Proporcionar a los usuarios una buena protección de seguridad (proceso de revisión estricto de lanzamiento de programas pequeños)

Desventajas:

Existen muchas restricciones, el tamaño de la página no puede exceder 1M y las páginas con más de 5 niveles no se pueden abrir;
El estilo es único, algunos componentes ya están formados y el estilo no se puede modificar, como: presentación de diapositivas, navegación
El área de promoción es estrecha, no puede compartir en Moments, solo puede promocionar compartiendo con amigos, mini programas cercanos
Depender de WeChat, incapaz de desarrollar funciones de gestión en segundo plano
La depuración en segundo plano es problemática, porque la interfaz api debe ser la solicitud https y la dirección de red pública
Prueba de máquina real, el rendimiento de algunas funciones de Android y Apple son muy diferentes, por ejemplo, la función de posicionamiento de Android tarda en cargar
13. ¿Cómo resolver el problema de solicitud asincrónica del subprograma WeChat?

El subprograma es compatible con la sintaxis ES6 para procesar la lógica en la devolución de llamada que devuelve el éxito. Promesa asincrónica asincrónica / espera

Llame a la función del siguiente componente en la función de devolución de llamada:

app.js

success:function(info){
    
    
 that.apirtnCallback(info)
}
 
**index.js**
onLoad:function(){
    
    
 app.apirtnCallback = res =>{
    
    
  console.log(res)
 }
}

14. ¿Cómo determinar la singularidad del usuario cuando el Mini Programa está asociado con la cuenta oficial de WeChat?

Cuando se usa el método wx.getUserInfo con Credentials, puedes obtener encryptedData, que contiene union_id. El backend debe realizar un descifrado simétrico.

15. ¿A qué aspectos se debe prestar atención cuando se usa webview para cargar directamente?

Debe utilizar el administrador para agregar el nombre de dominio comercial en el fondo del subprograma;
Los pasos de la página h5 para saltar al applet deben estar por encima de 1.3.1;
El uso compartido de WeChat solo puede ser el nombre principal del mini programa. Si desea personalizar el contenido compartido, la versión del mini programa es 1.7.1 o superior;
El pago h5 no puede ser el appid de la cuenta oficial de WeChat, debe ser el appid del applet, y el openid del usuario también debe ser el usuario y el applet
16. ¿Qué problemas encuentra el applet al llamar a la interfaz en segundo plano?
Límite de tamaño de datos, exceder el rango causará directamente que todo el subprograma se bloquee, a menos que se reinicie el subprograma;
Los miniprogramas no pueden representar directamente el texto html del contenido del artículo, la pantalla debe usar complementos

Nota: La representación de complementos ralentizará la carga de la página. Se recomienda filtrar el html del contenido del artículo en segundo plano y procesar directamente el reemplazo por lotes de etiquetas p y etiquetas div en etiquetas de vista en segundo plano. Luego, deje que el complemento haga las otras etiquetas.

17. ¿Cómo implementa el subprograma WeChat la actualización desplegable?

Utilice la vista en lugar de la vista de desplazamiento y configure la función onPullDownRefresh para lograr

18. ¿Cómo volver al subprograma desde la página en la vista web?

wx.miniProgram.navigateTo({
    
    
 url:’pages/login/login’+’$params’
})
 
**//跳转到小程序导航页面**
 
wx.miniProgram.switchTab({
    
    
 url:’/pages/index/index’
})

19. ¿Cuál es la diferencia entre bindtap y catchtap?
El mismo punto: en primer lugar, todos se utilizan como funciones de evento de clic, que se activan al hacer clic. En esta función, son iguales y no hay necesidad de distinguir entre
ellos, la diferencia: su diferencia es principalmente que bindtap no evita los eventos de burbujeo y catchtap evita el burbujeo.

20. Describe brevemente la diferencia entre las cinco rutas.

wx.navigateTo ()
wx.redirectTo ()
wx.switchTab ()
wx.navigateBack ()
wx.reLaunch ()

En la página wxml:

Ir a una nueva página
Abrir en la página actual
Cambiar a la pestaña de la página de inicio

En la página js: dividida en "páginas dentro de la aplicación" y "páginas tabBar";

Si el salto anterior encuentra un problema de que el salto falla o no es válido, visite: wx.navigateTo / wx.redirectTo no es válido

wx.navigateTo (): mantiene la página actual y salta a una página de la aplicación. Pero no puedo saltar a la página de la barra de pestañas
wx.redirectTo (): cierra la página actual y salta a una página de la aplicación. Pero no está permitido saltar a la página de la barra de pestañas.
wx.switchTab (): vaya a la página tabBar y cierre todas las demás páginas que no sean tabBar
wx.navigateBack () cierra la página actual y regresa a la página anterior o páginas de varios niveles. Puede
obtener la pila de páginas actual a través de getCurrentPages () y decidir cuántas capas necesita devolver
wx.reLaunch (): cierra todas las páginas y abre una página en la aplicación

21. ¿Cuál es la diferencia entre WeChat Mini Program y H5?

El entorno operativo es diferente (el subprograma se ejecuta en WeChat, h5 se ejecuta en el navegador);
Diferentes costos de desarrollo (h5 debe ser compatible con diferentes navegadores);
La obtención de permisos del sistema es diferente (los permisos a nivel del sistema se pueden conectar sin problemas con programas pequeños);
La fluidez de la aplicación en el entorno de producción (h5 necesita optimizar continuamente el proyecto para mejorar la experiencia del usuario);

22. ¿Cómo actualiza el subprograma el valor en la página?
Puede cambiarlo a través de this.setData

23. ¿Cómo lograr la persistencia de los datos de inicio de sesión?
Puede usar wx.setStorageSync ('nombre de clave', valor correspondiente) para la persistencia de datos

24. ¿Cuál es la diferencia entre
WeChat Mini Program y la aplicación? WeChat Mini Program es una aplicación liviana, pero limitada a WeChat, tiene un ciclo de desarrollo corto, menos funciones y ocupa menos espacio.

Por el contrario, las aplicaciones deben ocupar memoria adicional y el ciclo de desarrollo es largo.

[[Entiendo que el significado es equivalente a la diferencia entre frasco y django]]

25. Cómo realizar un enlace bidireccional del Mini Programa WeChat

Obtenga el recibo del método definido en app.js a través del evento bind-tap click
Establezca el valor de los datos para lograr un enlace bidireccional

26. Cómo personalizar la barra de herramientas

Cancelar la barra de herramientas actual
Insertar un componente de barra de herramientas personalizado
componente de llamada app.json
La página muestra los componentes de tootar

Sin relación

Debido a demasiada información, este artículo tiene un espacio limitado y solo comparte una pequeña parte de la información. Si necesita un conjunto completo de preguntas de la entrevista real (incluidas las respuestas a todas las preguntas), haga clic aquí. Código: qf
Recientemente, es el mejor momento para encontrar un trabajo. ¡Todos encuentran su trabajo favorito sin problemas!
Inserte la descripción de la imagen aquí