Selecciones pasadas
Esquema de diseño de biblioteca de imágenes y carga de imágenes del editor H5
Cómo realizar la vista previa en tiempo real y la función de vista previa del código de escaneo de máquina real del editor H5
Introducción al desarrollo de IDE en línea: implementación de un editor de código en línea desde cero
Un editor visual para páginas h5 basado en React + Koa-Dooring
Resumen de los puntos de conocimiento básicos de TS y análisis de casos de proyectos reales
Prefacio
HTML5 es la última revisión de HTML. Está diseñado para admitir multimedia en dispositivos móviles, a fin de presentarnos un rendimiento de página más rico. HTML5 también es multiplataforma y está diseñado para usarse en diferentes tipos de hardware (PC, tableta, teléfono móvil, TV, etc.). Por lo tanto, se derivan aplicaciones en diferentes escenarios, como sitio web oficial móvil, página de eventos H5, página de marketing H5, etc. Con el desarrollo de pares de Internet, el modelo de BI móvil en el campo de big data también puede ser llevado por H5.
Para satisfacer las necesidades anteriores, muchas empresas han comenzado a construir plataformas de edición H5, como ciertos programas y ciertas exposiciones. El autor también ha abierto su propio editor H5 H5-Dooring antes para facilitar a las empresas la creación rápida de páginas H5 que cumplan con los escenarios comerciales.
Todos sabemos que para diseñar un editor H5 fácil de usar, debemos simplificar las operaciones del usuario y reducir el costo del usuario al extremo. Para lograr este estándar, necesitamos tener las siguientes condiciones:
Biblioteca de componentes enriquecida
Recursos de imágenes enriquecidos
Configuración de componentes flexible
Operación tonta
Plantilla de página H5 (biblioteca de plantillas) lista para usar
Las cinco condiciones anteriores son indicadores de referencia muy importantes para desarrollar el editor H5. El autor tiene planes de implementación específicos para las primeras cuatro condiciones en el artículo anterior. El autor introducirá específicamente la implementación de la función de biblioteca de plantillas en el editor H5. Espero dar lo mismo Los ingenieros de TI que necesitan este requisito tienen una referencia.
Resumen del capítulo
La idea básica del diseño de la biblioteca de plantillas en el editor H5
Cómo realizar la comunicación entre la página secundaria de iframe y la página principal
Solución para generar automáticamente una imagen de portada basada en el elemento dom
texto
Como ingeniero de front-end, la resolución de problemas de proyectos es una de nuestras responsabilidades básicas. Podemos utilizar el conocimiento que hemos adquirido para resolver problemas y necesidades en el desarrollo de proyectos. Esta es también la primera etapa de nuestra carrera profesional, a saber: —Período de adaptación. Si queremos seguir siendo promovidos, necesitamos continuar mejorando y dominando varias habilidades, de modo que podamos usar la mejor solución para resolver problemas de manera eficiente en el futuro cuando encontremos problemas, que es la segunda etapa - -Período de desarrollo.
A continuación, el autor lo guiará paso a paso para completar la biblioteca de plantillas en el editor H5 y realizar la generación automática de esquemas de mapas de cobertura. Debe dominar las capacidades básicas que los ingenieros de front-end deben tener: javascript, html5 y métodos de desarrollo modular (modularidad es6 y Cómo utilizar módulos de terceros).
La idea básica de diseñar la biblioteca de plantillas del editor H5
Todos sabemos que la representación de la página en el editor H5 se basa principalmente en el esquema json, y podemos refinar cada componente en metadatos json. Esto es para que podamos controlar el componente de forma más precisa, y la plantilla es Un bloque o una página completa compuesta por muchos componentes corresponde a una matriz de elementos json. Por lo tanto, la solución correspondiente es que proporcionamos a los usuarios un botón para guardar la plantilla. Cuando el usuario hace clic en guardar, solo necesitamos obtener los datos json configurados actualmente , Guárdelo en la base de datos correspondiente. La estructura de datos es aproximadamente la siguiente:
[
{
"id": "12reg2",
"name": "趣谈前端落地页",
"tpl": [...组件配置数据项]
},
{
"id": "12rdg5",
"name": "H5-Dooring落地页",
"tpl": [...组件配置数据项]
}
]
复制代码
Podemos sacar los datos anteriores de la base de datos y usar directamente react o vue para representarlos. En cuanto a cómo obtener los datos json, consulte el proceso de implementación específico de H5-Dooring.
Pero guardar datos no es suficiente. Después de que los usuarios almacenen sus propias plantillas, si luego quieren usar directamente las plantillas previamente configuradas, ¿cómo encontrarlas rápidamente? Aunque podemos identificar diferentes plantillas por el nombre de la plantilla, pero una vez Hay cada vez más plantillas, y los usuarios no pueden seleccionar fácilmente la plantilla que desean del nombre de la plantilla, por lo que en este momento a menudo esperamos que el editor H5 proporcione la función de vista previa de la plantilla. Como se muestra a continuación:
así encontramos Un problema difícil es cómo generar una vista previa de la plantilla.
Cómo generar una vista previa de la plantilla
La idea general de generar una vista previa de la plantilla es generar una captura de pantalla de la página de vista previa basada en nuestra página de vista previa, y luego almacenarla en los datos de la plantilla correspondiente. Los pasos son los siguientes: Por lo tanto, el usuario debe configurar la plantilla H5 en la página de edición del editor H5 y luego saltar a la vista previa. Página, basada en la página de vista previa para generar una captura de pantalla de vista previa, y finalmente volver a la página de edición para guardar. Este proceso no es muy fácil de usar, ya que implica el salto mutuo de diferentes páginas, podemos optimizar aún más, generar directamente imágenes de vista previa en la página de edición , Para realizar esta lógica, tenemos dos esquemas:
Solicite la página de vista previa a través del servidor, genere una captura de pantalla de la página en el servidor y almacénela en la base de datos junto con los datos de la plantilla
Genere imágenes de vista previa basadas en dom front-end a través de la tecnología canvas + iframe
Debido a que el proceso de implementación anterior es más complicado, debe confiar en bibliotecas como titiritero y también mantener sincronizadas las imágenes y los datos de la plantilla, por lo que recomiendo la segunda opción, la implementación pura de front-end. Estaré en el siguiente contenido uno por uno Introducción.
Cómo realizar la comunicación entre la página secundaria de iframe y la página principal
En la introducción anterior, elegimos usar la tecnología lienzo + iframe para lograr capturas de pantalla de la página. Primero, echemos un vistazo al efecto de implementación:
en la figura anterior podemos ver que brindamos a los usuarios dos formas de configurar la portada: usar la imagen predeterminada y generar automáticamente la portada.
Los usuarios pueden usar la portada predeterminada proporcionada por Dooring o usar directamente la portada de vista previa generada. En la Figura 2, la ventana emergente es en realidad un iframe. El autor diseñó un mecanismo para cargar automáticamente la captura de pantalla en el servidor después de que se procesa el contenido del iframe, y luego el iframe y el elemento principal La comunicación de la página pasa la URL de la imagen a la página de edición y luego la guarda con los datos de la plantilla. Para realizar la comunicación de la página entre padres e hijos, debemos comprender cómo interactúa el iframe con la página principal. Para obtener una introducción detallada a la comunicación de la página entre padres e hijos, consulte el registro anterior del autor. El problema de comunicación entre páginas en el proyecto y la implementación del front-end de la función de descarga de archivos . Aquí echamos un vistazo a cómo el iframe se comunica con la página principal:
// iframe点用副页面函数
parent.window.getFaceUrl(url);
// 父页面定义的全局函数
window.getFaceUrl = (url) => {
setFaceUrl(url)
setShowModalIframe(false)
}
复制代码
Básicamente, hemos superado la transferencia de valor padre-hijo y todo el plan de diseño del proceso. Dado que hay muchos detalles específicos, como cómo almacenar datos y cómo integrarlos en la plantilla, puede aprender sobre ello en el proyecto H5-Dooring del autor.
Solución para generar automáticamente una imagen de portada basada en el elemento dom
Lo anterior básicamente implementa el proceso de guardado de toda la biblioteca de plantillas. A continuación, implementamos los detalles de guardar las imágenes de vista previa. Dado que generamos imágenes de vista previa basadas en elementos de la página, necesitamos el front-end para poder convertir dom en imágenes. Aquí el autor investigó 2 conocidos Biblioteca:
html2canvas
dom-a-imagen
Debido a que html2canvas todavía está en la etapa experimental, y los amigos que rodean al autor han escrito errores indescriptibles después de usar Europa, el autor analizó el dom-to-image, que básicamente puede satisfacer las necesidades actuales, por lo que lo usamos directamente para lograrlo.
Necesitamos implementar el proceso anterior, es decir, tenemos que convertir el dom en una imagen, luego enviarlo al servidor, finalmente obtener la dirección de la imagen devuelta por el servidor, y finalmente guardar la dirección de la imagen y los datos de la plantilla juntos. Veamos el código directamente:
import domtoimage from 'dom-to-image';
// ...其他库
// 将dom转化为图片逻辑
const generateImg = (cb) => {
domtoimage.toBlob(ref.current)
.then(function (blob) {
const formData = new FormData();
formData.append('file', blob, 'tpl.jpg');
req.post('/files/xxx/xxx', formData).then((res) => {
cb && cb(res.url)
})
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});
}
复制代码
Los siguientes pasos son muy simples, obtenga la URL de la imagen y páselo a la página principal para su visualización y almacenamiento.
H5 editor H5-Instrucciones de actualización de puertas
El autor del tutorial anterior se ha integrado en H5-Dooring. Para algunas funciones interactivas más complejas, también se puede realizar mediante un diseño razonable. Puede explorar y estudiar usted mismo.
github ????: editor en línea H5 H5-Dooring
Dado que H5-Dooring todavía se actualiza e itera constantemente, el autor presentará específicamente el contenido actualizado:
Refactorizó la interfaz general del editor H5:
Agregar función de biblioteca de imágenes:
Función de edición de fuente de datos visual:
Implementación de la biblioteca de plantillas:
Optimización de la interfaz de vista previa:
Al final
Si desea obtener más información sobre juegos H5, webpack, node, gulp, css3, javascript, nodeJS, visualización de datos de lienzo y otros conocimientos de front-end y combate real, bienvenido a estudiar y discutir juntos en "Interesting Frontend" para explorar juntos el límite de front-end.
Área de comentarios
El autor realizará una actividad de envío de libros con premios en el próximo número, apúrate y cuéntale el libro que tienes en tu corazón ~