El editor de código abierto H5 H5-Dooring hace 2 meses se ha iterado con éxito a la versión 1.0, desde el marco de generación de página básico inicial hasta el soporte actual para recursos de componentes más ricos, capacidades de interacción y capacidades de seguimiento de datos. El diseño y la iteración de H5-Dooring también ha recibido comentarios e inspiración de muchos internautas. También hay muchos amigos con ideas afines que se han unido para hacer que H5-Dooring sea mejor y más poderoso. Aquí está nuestra última versión e implementación de funciones.
Intención del diseño original
El propósito principal del desarrollo inicial de este proyecto por parte del autor es mejorar el costo y la eficiencia del desarrollo personal y corporativo de las páginas H5. Mediante bloques de construcción, se pueden utilizar bibliotecas de componentes existentes o recursos de componentes externos (en diseño) para crear aplicaciones H5 adecuadas para diferentes escenarios. , Y admite la descarga de código con un solo clic, lo que permite a los técnicos implementar fácilmente páginas H5 en sus propios servidores. He realizado muchas aplicaciones de generación de código pequeñas antes, pero todas están diseñadas para que los programadores escriban menos código, no lo suficiente como para convertirse en Es un proyecto de código abierto real, por lo que planeo poner H5-Dooring en el suelo y convertirlo en un proyecto verdaderamente valioso.
A continuación, el autor presentará las funciones e ideas de implementación de la última versión del editor H5, y cómo implementar el intento de solución WYSIWYG.
Vista previa de la última versión del editor
Formulario kanban de datos y análisis de datos:
Pila de tecnología
También presenté la pila de tecnología y la implementación de la infraestructura utilizada por H5-Dooring en mi artículo anterior. Si está interesado, puede consultar la implementación de un editor visual de páginas h5 basado en React + Koa.
Recientemente, estamos usando nest para refactorizar la parte de back-end del proyecto, y luego presentaremos ciertas soluciones técnicas. Aquí hay una breve introducción a la pila de tecnología implementada por el proyecto:
umi3.0 + dos + antd4.0
reaccionar + reaccionar ecología
nest + mysql + redis
nginx + pm2
Por lo tanto, este proyecto es un proyecto de pila completa y la implementación de muchas funciones básicas depende de la capa DSL acordada, la capa de representación de la página y las capacidades de back-end.
Puntos de función y plan de implementación
La serie anterior de artículos del autor ha introducido puntos de función específicos y esquemas de implementación, aquí presentamos principalmente las nuevas funciones que están disponibles en la versión 1.0.
Añadido componente de texto enriquecido, componente de calendario, componente de interacción de botones, componente de columna
El autor del componente de texto enriquecido utiliza un braft doméstico, y la vista previa es la siguiente: debido a que el proyecto se desarrolló con antd4.0, el autor encapsuló especialmente un conjunto de editor de texto enriquecido adaptado al componente antd4.0, que admite el modo controlado del componente Form. Aquellos que estén interesados pueden aprender la implementación específica en github.
El componente de calendario también se ha agregado recientemente, principalmente para lograr una visualización de la página H5 más rica, de la siguiente manera: podemos establecer el rango de tiempo seleccionado, el color principal del rango seleccionado, la fecha, etc. El componente de fecha es utilizado principalmente por el autor del componente de Calendario de Zarm, El núcleo es el siguiente:
import React, { useState, memo, useEffect, useRef } from 'react';
import { Calendar } from 'zarm';
import styles from './index.less';
import { ICalendarConfig } from './schema';
const CalendarPlayer = memo((props: ICalendarConfig & { isTpl: boolean }) => {
const { time, range, color, selectedColor, round, isTpl } = props;
const realRange = range.split('-');
const [value, setValue] = useState<Date[] | undefined>([new Date(`${time}-${realRange[0]}`), new Date(`${time}-${realRange[1]}`)]);
const [min] = useState(new Date(`${time}-01`));
const [max] = useState(new Date(`${time}-31`));
const boxRef = useRef<any>(null);
return <div className={styles.calenderWrap} style={
{borderRadius: round + 'px', pointerEvents: isEditorPage ? 'none' : 'initial'}} ref={boxRef}>
<Calendar
multiple={!!range}
value={value}
min={min}
max={new Date(max)}
disabledDate={(date:any) => /(0|6)/.test(date.getDay())}
onChange={(value:Date[] | undefined) => {
setValue(value);
}}
/>
</div>
});
export default CalendarPlayer;
Esta es también una forma de implementar componentes de Dooring, y los amigos interesados pueden agregar más compatibilidad con componentes para Dooring.
Antes, un amigo me preguntó por qué el proyecto usa tantos componentes y la velocidad sigue siendo rápida al obtener una vista previa de la página H5. Aquí explico el método de implementación específico, como se muestra en la siguiente figura: Por lo tanto, nuestros productos móviles y recursos dependientes son muy pocos , Y optimizado en la capa del paquete web y la capa del servidor, por lo que el terminal móvil accederá a la página H5 muy rápidamente. Esta optimización se presentará en detalle más adelante, y el rendimiento aún se está optimizando.
Componentes de interacción de botones El autor ha escrito artículos que presentan específicamente cómo implementar la interacción de botones, el código de interacción personalizado y la interacción emergente de texto enriquecido. Si está interesado, puede consultar el artículo Interacción personalizada del componente de diseño de la función principal de la plataforma de desarrollo de código bajo Conseguido .
El autor aquí muestra el método de interacción específico: el usuario interactivo que abre la ventana emergente puede personalizar el contenido en la ventana emergente, de la siguiente manera:
En este momento, el efecto de vista previa en el teléfono móvil es el siguiente:
para la personalización
code, el autor integra la biblioteca de edición de código codemirror, de modo que Puede personalizar las capacidades de interacción de la siguiente manera:
El siguiente es nuestro componente de columna, que se basa principalmente en los requisitos comerciales. El método de implementación es el mismo que el componente básico. Puede experimentarlo en línea.
Se agregó la función de archivo json de importación y exportación
La razón principal de esta función es facilitar el diseño colaborativo de páginas H5. Por ejemplo, si una persona diseña una página H5 y quiere que otras personas participen en el diseño, la página H5 actual se puede exportar como JSON, y otra persona puede importar este archivo JSON. Puede renderizar inmediatamente en la misma página H5 y luego modificarla o mejorarla. De la siguiente manera:
En cuanto a cómo implementar la descarga json, el autor también introdujo en el artículo anterior, podemos usar file-savereste módulo de terceros para hacerlo. La carga y el análisis json pueden ser implementados por nosotros mismos. El autor usa la Upload + FileReader APIimplementación. El código central es el siguiente:
const uploadprops = useMemo(() => ({
name: 'file',
showUploadList: false,
beforeUpload(file, fileList) {
// 解析并提取json数据
let reader = new FileReader();
reader.onload = function(e) {
let data = e.target.result;
importTpl && importTpl(JSON.parse(data))
};
reader.readAsText(file);
}
}), []);
Se agregó una captura de pantalla con un clic y una función de generación de imágenes de póster de alta definición.
Esta sección es principalmente para proporcionar una solución de mapeo rápido para la página H5, que es conveniente para que los operadores o el personal técnico evalúen el efecto de la página. Desde la perspectiva de la implementación del front-end, utilizamos principalmente canvasla conversión de dom. El principio es el siguiente: El autor también ha compartido la implementación específica antes Para la solución, puede consultar los siguientes artículos:
¿Cómo se da cuenta el front-end de la función de captura de pantalla con un clic?
Aquí recomiendo dos útiles canvasherramientas de captura de pantalla, html2canvasy dom-to-imageel proceso de captura de pantalla de la página Dooring es el siguiente:
Se agregaron funciones de menú contextual y atajos de teclado personalizados
Para mejorar aún más la eficiencia de los usuarios que crean páginas H5, el autor ha agregado un menú contextual, que puede copiar fácilmente los componentes que se han creado o eliminarlos con una tecla, de la siguiente manera: pero para los controladores de teclado, prefieren realizar todas las funciones a través del teclado. por lo que añade un atajo de teclado, soporte para una copia de la llave, la pasta, los elementos de borrado, de la siguiente manera:
se recomienda que algunos bien usar el menú del botón derecho y una biblioteca de atajos de teclado
react-contexify, keymaster.
Configuración de nueva página
Esta sección es principalmente para dar más libertad a la página H5, puede personalizar el título de la página, las SEOpalabras clave, el fondo de la página y la imagen de fondo, etc., de la siguiente manera: se agregarán más capacidades de personalización de la página más adelante.
Optimización del diseño de la interfaz
En comparación con la versión 0.1, la interfaz se ha ajustado y optimizado en gran medida, como nuestra página de inicio de sesión: página de vista previa:
Introducción al sdk de soporte
Este también es un intento del autor anterior, que permite que H5-Dooring sdkse implante en cualquier websistema de alguna manera, y proporciona funciones y pantallas personalizadas api, principalmente de la siguiente manera: El principio de implementación también se introdujo en el artículo anterior. De la siguiente manera:
Los interesados pueden consultar los siguientes artículos del autor:
¿Cómo empaquetar rápidamente su aplicación en js-sdk?
Planificación posterior
Lo principal que se debe hacer en el período posterior es continuar enriqueciendo los componentes comerciales de alta calidad, refactorizar githubla arquitectura de diseño del código existente, hacer un buen trabajo en la superposición de vistas, datos y lógica, separar el renderizador de páginas y el renderizador de formularios, y proporcionar capacidades y mejoras de apertura de componentes. Las capacidades de servicio de back-end, etc., dan la bienvenida a los amigos interesados para que hagan sugerencias valiosas y issuecontinúen iterando y optimizando.
Dirección de github: https://github.com/MrXujiang/h5-Dooring
Bienvenidos a todos, tenedor y estrella.
Relajarse