Maravilloso en el pasado
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
El concepto de diseño WYSIWYG siempre ha sido una característica de alto perfil en el campo de WEB IDE, y también puede mejorar en gran medida la experiencia de programación y la eficiencia de programación del codificador web. A continuación, el autor tendrá una vista previa en tiempo real del editor visual H5 y La función de vista previa del código de escaneo de la máquina real hace un análisis del plan y proporciona algunas ideas para todos al diseñar productos similares.
Seguimos utilizando el editor visual H5-Dooring desarrollado por el autor como caso para analizar la implementación de las funciones anteriores.
Ganarás
Escenarios de aplicaciones de vista previa en tiempo real y casos reales
Esquema de enlace en tiempo real del editor de atributos y elementos del lienzo
Idea general de la vista previa en tiempo real
Ideas de realización de la vista previa del código de escaneo de una máquina real
Solución de vista previa en tiempo real con alta disponibilidad basada en la capa intermedia de nodejs
texto
En circunstancias normales, la función de vista previa en tiempo real se entregará al front-end para lograrlo, como la vista previa de las herramientas de desarrollador de WeChat que vemos a menudo, la vista previa del subprograma Alipay, el complemento de vista previa de vscode, el DW más clásico también integra una poderosa función de vista previa en tiempo real A continuación, observamos un módulo de vista previa en tiempo real de la programación en línea de H5-Dooring:
En la plataforma de visualización de páginas H5, también esperamos ver el efecto de nuestra página de configuración en tiempo real, como cambiar un determinado atributo, que puede tener efecto en tiempo real en el lienzo, y también puede ver el efecto de máquina real en el teléfono móvil, proporcionando este tiempo real. Sin duda, la función de vista previa solo es necesaria para la plataforma de configuración visual. Los siguientes casos:
Simule la vista previa del teléfono móvil en la PC:
Entrada y efecto de vista previa de la máquina real:
Por tanto, la clave de nuestro diseño de vista previa en tiempo real es cómo restaurar la configuración del usuario en el lienzo con alta fidelidad, de modo que se pueda maximizar el error y la experiencia.
A continuación, el autor presentará específicamente cómo implementar los métodos de vista previa anteriores y cómo diseñar un programa de vista previa de alta disponibilidad.
1. Esquema de enlace en tiempo real del editor de atributos y elementos del lienzo
El esquema de enlace en tiempo real del elemento de lienzo y el editor de atributos se refiere principalmente a cómo la modificación del editor de atributos se sincroniza con el elemento de lienzo en tiempo real, resumido como el siguiente concepto:
Para darnos cuenta de que el editor de propiedades de la derecha ha modificado el contenido y el lienzo se puede actualizar en tiempo real, necesitamos implementar un modo para asociar los lados izquierdo y derecho, que es el concepto de "vinculación". Todos sabemos que cada componente visual tiene En correspondencia con un esquema único (se ha introducido en el artículo H5-Dooring, los amigos interesados pueden aprender a comprender), la estructura del esquema es similar a la siguiente:
{
"config": {
"color": "#fff",
"name": "徐小夕"
},
"editData": [
{
"type": "Text",
"key": "name"
},
{
"type": "Color",
"key": "color"
}
]
}
复制代码
Una vez que se diseña dicha estructura de datos, podemos representar dinámicamente el formulario del editor (a través de editData) y sincronizar el valor modificado con el componente (a través de editData -> mapeo de configuración).
En segundo lugar, necesitamos definir la fuente de datos compartida. Podemos usar vuex (por ejemplo, usted es la pila de tecnología vue) o dva (si es la pila de tecnología de reacción). Las ideas generales de diseño son las siguientes:
Básicamente, es activar la acción en el editor de propiedades, modificar la configuración del componente correspondiente y luego actualizar el contenido del lienzo. PointData es el conjunto de datos del componente en el lienzo, que se utiliza para mostrar los elementos de edición de la página H5 y el editor de propiedades de representación dinámica. La función de vista previa introducida también depende de los datos proporcionados por pointData.
2. La idea general de la vista previa en tiempo real
En el artículo anterior del autor, expliqué en detalle cómo implementar la vista previa en tiempo real del IDE web, es decir, el método nodejs + iframe, pero para nuestro editor visual de puerta H5, puede ser necesario otro método, es decir, el usuario está en Cuando necesite obtener una vista previa, puede simular manualmente la vista previa del dispositivo real o la vista previa del dispositivo real. Aquí generalmente proporcionamos un botón de vista previa en la interfaz del editor. Cuando el usuario hace clic, puede saltar a la vista de vista previa, de la siguiente manera:
Basado en el esquema json que mencionamos anteriormente como la fuente de datos de vista previa, podemos pensar fácilmente en volver a renderizar una página H5 a través de la fuente de datos en la página de vista previa. La idea es la siguiente:
Si la página de vista previa es una página nueva, como la implementación de H5-Dooring, entonces esta fuente de datos debe almacenarse en localStorage antes de obtener la vista previa. Debido a las características de localStorage, podemos compartir datos entre páginas bajo el mismo dominio, por lo que es muy conveniente implementar nuestro Requisitos. En cuanto a la parte del motor de renderizado, solo necesitamos utilizar la solución de suministro de datos proporcionada por react-grid-layout. El código es el siguiente:
<GridLayout
className={styles.layout}
cols={24}
rowHeight={2}
width={vw > 800 ? 375 : vw}
margin={[0, 0]}
>
{pointData.map((value: PointDataItem) => (
<div className={styles.dragItem} key={value.id} data-grid={value.point}>
<DynamicEngine {...(value.item as any)} />
</div>
))}
</GridLayout>
复制代码
En cuanto a la implementación de DynamicEngine, puede ver el código fuente de H5-Dooring del autor para comprender el proceso de implementación específico. Sin embargo, habrá algunos problemas en la solución de usar localstorage solo, que se explicarán en detalle en los siguientes capítulos.
3. Ideas de realización para la vista previa del código de escaneo de dispositivos reales
El esquema de realización de la vista previa del código de escaneo de la máquina real, el autor lo resume brevemente como se muestra en la siguiente figura:
La razón por la que se utiliza el servicio nodejs en el proceso anterior es porque el teléfono móvil debe estar asociado con la configuración de la PC para realizar la vista previa de la máquina real. Esta asociación puede ser a través del parámetro url, o el parámetro url + modo de solicitud, aquí porque los datos de configuración son relativamente grandes , Entonces se adopta este último. El parámetro url se usa para ubicar la ruta del recurso, y luego se solicitan datos específicos de acuerdo con los parámetros en el proyecto maestro H5 para presentar la página. Esta es también la solución de vista previa de máquina real popular actual. Podemos usar qrcode para generar dinámicamente Código QR, la forma del código QR es la siguiente:
const url = `${window.location.protocol}//${window.location.host}/h5_plus/preview?tid=${tid}`
复制代码
En cuanto a cómo usar nodejs para devolver archivos con parámetros específicos, esto es relativamente simple y no los implementaré uno por uno aquí, pero debemos comprender el proceso de implementación de vista previa del dispositivo real anterior.
4. Obtenga una solución de vista previa en tiempo real de alta disponibilidad basada en la capa intermedia de nodejs
Hay algunas deficiencias en la solución que el autor escribió antes para realizar el intercambio de datos de vista previa a través de localStroage. Por ejemplo, el usuario A quiere compartir la página H5 configurada por H5-Dooring con el usuario B. Debido a que existe en dos computadoras diferentes, el usuario B Es imposible obtener los datos de vista previa y, por lo tanto, no puede ver la página H5 configurada por otros. Otra situación es que el usuario abre el modo de incógnito del navegador, por lo que es posible que la página de vista previa no pueda obtener una vista previa, por lo que para estos dos escenarios, necesitamos Se han realizado algunas optimizaciones para que nuestra vista previa en tiempo real sea más útil.
Entonces, ¿cómo podemos acceder a nuestra página de configuración incluso cuando el usuario no puede usar localStroage normalmente? La respuesta es a través de la solicitud de API. Usamos nodejs nuevamente para almacenar los datos de configuración del usuario, y juzgamos si localStroage puede obtener los datos durante la vista previa. Luego, use directamente los datos de localStroage, si no están disponibles, acceda directamente a la solicitud de API. La lógica es aproximadamente la siguiente:
Aunque la implementación anterior es simple, la usabilidad y la experiencia de la vista previa se pueden proporcionar a través de la optimización como se indicó anteriormente, y puede consultarla al diseñar las funciones del producto.
5. Resumen
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 ???? ： h5-Dooring
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