WeGeek | Marco de código abierto WePY

El geek que vino a la columna hoy es el equipo de pago de Tencent WeChat.

Un mes después de la versión beta pública del mini programa, el equipo de pago de WeChat creó el marco de desarrollo de componentes WePY en el mini programa, que fue buscado por muchos desarrolladores tan pronto como se publicó en Github. Productos secos relevantes compartidos espontáneamente por los internautas.

Aunque el marco de código abierto WePY ahora es muy respetado, recordando la intención original del código abierto, Gcaufy del equipo de pago de WeChat dijo: "El marco de código abierto WePY no es de código abierto para compartir una solución muy exitosa, pero creo que este conjunto de soluciones Puede resolver algunos problemas prácticos encontrados en el desarrollo de pequeños programas, y espero ayudar al mundo exterior a ayudar a mejorar esta solución juntos ".

A continuación, echemos un vistazo a la historia de desarrollo detrás del marco de código abierto WePY.

Si tiene algo de experiencia en desarrollo, obviamente sentirá que el desarrollo de applets es muy fácil de comenzar: los propios applets proporcionan algunas características como modularidad, plantillas, enlace de datos, etc., lo que facilita en gran medida a los usuarios que están acostumbrados a usar el marco MVVM. Pero al mismo tiempo, debido al entorno operativo limitado, los pequeños programas aún no pueden usar marcos populares en el mercado.

En el transcurso de varios meses de desarrollo, el autor Gcaufy ha estado esperando diseñar un conjunto de planes, que es más probable que acerque el desarrollo de programas pequeños a los hábitos de desarrollo actuales, y el marco de código abierto WePY surgió.

El principio del marco de código abierto WePY es muy simple: después de compilar el código desarrollado por el marco de código abierto WePY, puede generar un código que se ejecute perfectamente en el lado del programa pequeño, haciendo que el desarrollo del programa pequeño se acerque al desarrollo del marco H5 tradicional, que puede ser compatible como el desarrollo de H5. Presente el paquete npm y soporte el desarrollo de componentes y soporte para nuevas características de JS, etc., para lograr una experiencia de desarrollo similar a Vue.

Marco de código abierto de WePY para lograr la precarga de pequeños programas

Sabemos que el H5 tradicional puede mejorar la experiencia del usuario a través de la precarga, por lo que ¿se pueden implementar pequeños programas?

La respuesta es si. Usar la precarga en applets es más simple y más conveniente de implementar que en H5, pero también es más fácil que los desarrolladores lo ignoren.

Cuando se inicia H5 tradicional, page1.html solo cargará la página y el código lógico de page1.html. Cuando page1.html salta a page2.html, todos los datos Javascript de page1 desaparecerán de la memoria. La comunicación de datos entre la página 1 y la página 2 solo se puede pasar a través de parámetros de URL o cookies del navegador, procesamiento de almacenamiento localStorge.

Cuando se inicia el applet, cargará directamente todo el código lógico de la página en la memoria. Incluso si no se puede usar la página 2, cuando la página 1 salta a la página 2, los datos Javascript del código lógico de la página 1 no desaparecerán de la memoria. Page2 incluso puede acceder directamente a los datos en page1.

Esta diferencia en el mecanismo de los applets pasa a precargarse mejor.

Normalmente, estamos acostumbrados a escribir datos en el evento onLoad. Pero la página 1 del applet salta a la página 2, hay un retraso de 300 ms ~ 400 ms en la carga de la página 2. Como se muestra a continuación:

Debido a las características del applet, puede obtener los datos en la página 1 por adelantado y luego usarlos directamente en la página 2, para evitar los 300 ms ~ 400 ms de redireccionamiento. Como se muestra a continuación:

Para los problemas anteriores, el marco de código abierto WePY encapsula dos conceptos para resolver:

• Precargar datos

Se utiliza en pequeños programas para transferir datos de manera activa a la página 2. Por ejemplo, la página 2 necesita cargar datos que consumen mucho tiempo. Puedo cargarlo cuando la página1 está inactiva y usarlo directamente cuando entro en la página2.

• Datos de preconsulta

Utilizado para evitar demoras en la redirección, llame a la consulta previa de la página 2 al saltar.

El marco de código abierto WePY agrega el evento onPrefetch, que se llamará activamente cuando se redirige. Esta mejora extiende el ciclo de vida; al mismo tiempo, el evento onLoad también agrega un parámetro para recibir datos precargados o previamente consultados:

// params
// data.from: 来源页面，page1
// data.prefetch: 预查询数据
// data.preload: 预加载数据
onLoad (params, data) {}

Marco de código abierto WePY para lograr la optimización de datos de pequeños programas

Algunos desarrolladores pueden no entenderlo. De hecho, la capa de vista y la capa lógica del applet están completamente separadas. La comunicación entre ambos depende de WeixinJSBridge. Tales como:

• La herramienta de desarrollador se basa en window.postMessage
• iOS 中 基于 window.webkit.messageHandlers.invokeHandler.postMessage
• Basado en WeixinJSCore.invokeHandler en Android

El método de enlace de datos this.setData () también es el mismo, por lo que es fácil pensar, ¿el enlace de datos frecuente hará que el costo de comunicación aumente considerablemente?

Para verificar los problemas de rendimiento de setData (), el equipo de pago de WeChat realizó una prueba relacionada: enlazar dinámicamente una lista de 1000 datos para pruebas de rendimiento, principalmente para las siguientes tres situaciones:

• Enlace óptimo: la operación setData () finalmente se ejecuta después de agregar memoria.
• Peor enlace: realice una operación setData () al agregar un registro.
• El enlace más inteligente: no importa qué operación se realice en el medio, se realiza una verificación sucia al final de la ejecución y la operación setData () se realiza en los datos que deben establecerse.

Después de diez pruebas de actualización y ejecución, se obtuvieron los siguientes resultados:

Se puede ver claramente en los resultados de la prueba que los datos de rendimiento son aproximadamente 40 veces diferentes cuando se implementa la misma lógica. Al analizar los resultados de la prueba, podemos saber que durante el proceso de desarrollo, debemos tratar de evitar múltiples operaciones setData () en el mismo proceso.

¿Cuáles son los métodos de optimización?

El mantenimiento manual ciertamente se puede lograr, pero cuando la lógica de la página es responsable, incluso si se gasta mucho esfuerzo en el mantenimiento, puede no necesariamente garantizar que setData () solo exista una vez por proceso, y la capacidad de mantenimiento no sea alta. Por lo tanto, el marco de código abierto WePY eligió usar una verificación sucia para la optimización del enlace de datos.

Aunque el marco de código abierto WePY toma prestado Vue de su sintaxis, los principios son completamente diferentes. Por ejemplo, el marco de código abierto WePY utiliza el diseño de cheques sucios de ng en lugar de los captadores y establecedores de Vue. Los usuarios ya no tienen que preocuparse por cuántas veces se han modificado los datos en el proceso, solo necesitan hacer una verificación sucia al final del proceso y ejecutar setData () según sea necesario.

Mejora de la eficiencia del desarrollo utilizando el marco de código abierto WePY

Además de las optimizaciones anteriores basadas en el rendimiento, el marco de código abierto WePY también ha realizado una serie de optimizaciones en la eficiencia del desarrollo.

Soporte rico compilador

• js puede elegir compilar con Babel o TypeScript.
• Wxml puede elegir usar Pug (anteriormente Jade).
• wxss puede elegir usar Less, Sass, Styus.

Admite procesamiento de complementos enriquecido

• Puede configurar el complemento para comprimir y ofuscar los js generados, comprimir imágenes, comprimir wxml y json para ahorrar espacio, etc.

Soporte de verificación de sintaxis de ESLint

• Agregar una línea de configuración puede admitir la comprobación de sintaxis de ESLint, lo que puede evitar errores de sintaxis de bajo nivel y unificar el estilo del código del proyecto.

Optimización del ciclo de vida.

• El marco de código abierto WePY agrega el ciclo de vida de onRoute. Se usa para disparar después de un salto de página. Esta optimización se debe a que no hay ningún evento de salto de página en el applet. El evento onShow se puede usar como un evento de salto de página, pero también tiene un efecto negativo, como presionar el botón INICIO para volver, o levantar para cancelar después del pago, y levantar después de compartir activará el evento onShow.

Optimizar la transmisión de eventos

El método de referencia de escritura original:

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
Page({
  bindViewTap:function(event){
    event.target.dataset.alphaBeta === 1 // - 会转为驼峰写法
    event.target.dataset.alphabeta === 2 // 大写会转为小写
  }
})

Después de la optimización:

<view @tap="bindViewTap("1", "2")"> DataSet Test </view>
methods: {
  bindViewTap(p1, p2, event) {
    p1 === "1";
    p2 === "2";
  }
}

Más detalles se pueden encontrar en wepy documento marco de código abierto: HTTPS: //tencent.github.io/wep ... .

WePY open source framework 2.0 plan

En la actualidad, el marco de código abierto WePY es mantenido principalmente por personas relevantes en el equipo de pago de WeChat en su tiempo libre con varios contribuyentes externos. Hay muchos contribuyentes entusiastas en la comunidad técnica. No solo participan, sino que también aportan nuevas fortalezas para los contribuyentes, y de vez en cuando proporcionan algunas funciones centrales más.

Cuando se le preguntó sobre la pregunta "Progreso del marco 2.0 de código abierto de WePY", el equipo de pago de WeChat dijo que ahora entrará en la fase de prueba interna de WePY 2.0, y creo que nos reuniremos con usted en el futuro cercano.

"Hope 2.0 es una nueva y digna versión para desarrolladores".

Para obtener más información sobre el desarrollo de pequeños programas, le damos la bienvenida a WeChat para escanear el siguiente código QR para seguir la cuenta pública WeChat Geek WeGeek y crear un ecosistema WeChat.

Este artículo se reproduce en: Ape 2048 WeGeek | Marco de código abierto WePY