H5 Dooring Vue
1.0.0
H5-Dooring es una solución de configuración de página visual H5 poderosa, poderosa y poderosa, comprometida a proporcionar un conjunto de mejores prácticas simples, convenientes, profesionales y confiables de la página de destino H5 que son fáciles de usar, profesionales y confiables, e infinitamente posibles. La pila de tecnología se reacciona principalmente, y el fondo se desarrolla utilizando NodeJS.
¡Las contribuciones, los problemas y las solicitudes de funciones son bienvenidas!
No dude en verificar la página de problemas.
¡Dale una osa si este proyecto te ayudó!
El editor visual consta principalmente de las siguientes partes:
Podemos usar React-DND y React-Dragagable , que es popular en la comunidad.
El segundo es la parte del editor H5, que es la función central, que analizaremos en detalle más adelante. También hay funciones como la vista previa, la generación de enlaces de vista previa, guardar archivos JSON y guardar plantillas de estas funciones son esencialmente operaciones en nuestros archivos JSON , pero son uno de los métodos comunes de la tecnología de construcción visual. Echemos un vistazo a la demostración de estas características:
Nuestro editor visual de la página H5 usa UMI como una herramienta de andamio.
UMI es un marco de aplicaciones frontal de nivel empresarial escalable, basado en el enrutamiento, y admite el enrutamiento configurado y el enrutamiento de convenciones para garantizar que las funciones de enrutamiento estén completas y se realice la expansión de funciones. Luego, está equipado con un sistema de complemento con un ciclo de vida completo, que cubre cada ciclo de vida desde el código fuente hasta la construcción de productos, lo que respalda varios requisitos de expansión y comercial funcional.
De esta manera , no prestaremos atención a los engorrosos detalles de la configuración del proyecto.
// 创建并进入工程目录
mkdir dooring && cd dooring
// 创建umi应用
yarn create @ umijs / umi - app
// 安装依赖
yarn // 或者使用npm installUna estrategia simple de tres pasos puede construir fácilmente nuestro proyecto, ¿ahorra muchos problemas?
Después de que se crea el proyecto, también necesitamos instalar los componentes de terceros necesarios en la visualización.
Puede instalar los componentes anteriores antes de ejecutar el proyecto.
Después de la mejor preparación para el desarrollo de proyectos, comenzaremos a diseñar nuestro editor visual de la página H5 - Dooring .
El editor visual H5 requiere principalmente 4 partes, que se han analizado al comienzo del artículo.
Todos sabemos que hay varias soluciones populares de visualización de páginas:
El autor hizo una tabla de comparación de ventajas y desventajas, como sigue:
| plan | Grado de personalización | defecto |
|---|---|---|
| Editar código en línea | El más alto | Alto costo de uso, hostil al personal no técnico y baja eficiencia |
| Editar JSON en línea | Más alto | Necesita estar familiarizado con JSON, tiene un cierto costo de uso, no es amigable para el personal no técnico y es generalmente eficiente |
| No hay implementación de arrastre y caída de código | alto | Bajo costo de uso, básicamente sin umbral para la operación, alta eficiencia |
Según el análisis anterior, para desarrollar un editor visual que sea de bajo umbral y adecuado para cualquiera, el autor adoptará la tercera solución para implementarla, hay muchos productos en el mercado, como Yiqixiu, Tuzhan, Baidu H5, etc.
Para proporcionar las capacidades de personalización de los componentes, necesitamos definir un conjunto de estructuras de datos altamente disponibles para lograr las ventajas de mantenimiento provocadas por los cambios en los requisitos de los componentes.
Antes de comenzar a diseñar la estructura de datos, primero desarmemos el módulo: los diferentes componentes corresponden a diferentes "áreas de edición".
Después del análisis anterior, el autor diseñó una estructura de datos similar a la siguiente:
"Text" : {
"editData" : [
{
"key" : "text" ,
"name" : "文字" ,
"type" : "Text"
} ,
{
"key" : "color" ,
"name" : "标题颜色" ,
"type" : "Color"
} ,
{
"key" : "fontSize" ,
"name" : "字体大小" ,
"type" : "Number"
} ,
{
"key" : "align" ,
"name" : "对齐方式" ,
"type" : "Select" ,
"range" : [
{
"key" : "left" ,
"text" : "左对齐"
} ,
{
"key" : "center" ,
"text" : "居中对齐"
} ,
{
"key" : "right" ,
"text" : "右对齐"
}
]
} ,
{
"key" : "lineHeight" ,
"name" : "行高" ,
"type" : "Number"
}
] ,
"config" : {
"text" : "我是文本" ,
"color" : "rgba(60,60,60,1)" ,
"fontSize" : 18 ,
"align" : "center" ,
"lineHeight" : 2
}
}Después de este diseño estructural estandarizado, podemos implementar fácilmente las funciones de la edición que necesitamos, y la expansión posterior es muy conveniente.
Cree una plataforma de configuración de administración de formulario general basada en React (igual que Vue)
Un problema importante en el diseño de la biblioteca de componentes es el tamaño y los problemas de representación.
import { dynamic } from 'umi' ;
export default dynamic ( {
loader : async function ( ) {
// 这里的注释 webpackChunkName 可以指导 webpack 将该组件 HugeA 以这个名字单独拆出去
const { default : HugeA } = await import ( /* webpackChunkName: "external_A" */ './HugeA' ) ;
return HugeA ;
} ,
} ) ;A través del método anterior, definimos cada componente que envuelve cada uno de nuestros componentes, de modo que podamos cargar a pedido, pero la mejor sugerencia es que no necesitamos cargar y desempacar cada componente a pedido para el título , la notificación de los componentes del pie de página y el pie de página .
Aquí le daré un breve ejemplo de implementación de componentes, que es conveniente para que todos lo entiendan:
const Header = memo ( ( props ) => {
const {
bgColor ,
logo ,
logoText ,
fontSize ,
color
} = props
return < header className = { styles . header } style = { { backgroundColor : bgColor } } >
< div className = { styles . logo } >
< img src = { logo && logo [ 0 ] . url } alt = { logoText } />
</ div >
< div className = { styles . title } style = { { fontSize , color } } > { logoText } </ div >
</ header >
} )El atributo de accesorios del componente del encabezado anterior está completamente definido por la estructura JSON que diseñamos antes. El último paso es pasar dinámicamente estos componentes a los componentes dinámicos .
La función de vista previa es relativamente simple.
Para descargar esto en línea, necesitamos usar una biblioteca de código abierto: File-Saver , que resuelve específicamente el dilema de la dificultad en los archivos de descarga de front-end.
var FileSaver = require ( 'file-saver' ) ;
var blob = new Blob ( [ "Hello, world!" ] , { type : "text/plain;charset=utf-8" } ) ;
FileSaver . saveAs ( blob , "hello world.txt" ) ;El código anterior puede descargar los datos entrantes en un archivo txt.
Dado que la parte de backend implica muchos puntos de conocimiento y no es el foco de este artículo, daré algunos puntos aquí.
Para un código específico, consulte otro artículo de desarrollo de pila completa por mí.
Implementar un proyecto CMS Full-Stack de 0 a 1 basado en NodeJS
El patrón es básicamente el mismo.
git clone https://github.com/MrXujiang/h5-Dooring.git cd ./h5-Dooringyarn installIniciar la aplicación
yarn run startActualización de la versión 1.3, estén atentos ...
