wx page builder

Prefacio

¿Está abrumado por las grandes demandas de las páginas de eventos de WeChat y H5? ¿Quiere una herramienta que pueda generar páginas de eventos de WeChat con la función de arrastrar y soltar? Este proyecto se desarrolló en base a este punto débil, una herramienta que puede arrastrar y soltar para generar páginas H5 y obtener una vista previa de los efectos.

Github: Dirección de demostración del portal: Portal

Vista previa de la interfaz:

Característica

• Arrastrar y soltar componentes de edición
• Generar página H5
• Vista previa de la interfaz
• �Lanzamiento de la función de página H5 (en desarrollo)
• Soporte para el subprograma WeChat (en desarrollo)
• ��Elemento de soporte-UI (en desarrollo)
• Editar la página backend de la PC (en desarrollo)

pila de tecnología

Interfaz:
vue : El desarrollo modular requiere una de tres opciones: angular, reaccionar o vue. Aquí elegí vue.
vuex : gestión estatal
sass : precompilador css.
element-ui : No reinventes la rueda. Existen excelentes bibliotecas de componentes de Vue listas para usar, por lo que, por supuesto, debes usarlas. Si no lo tiene, simplemente encapsule algunos usted mismo.
loadsh : clase de herramienta

Servidor:
koa : El lenguaje de fondo usa nodejs. También hay muchos documentos y materiales de aprendizaje de koa. Fue creado por el equipo original de express.
mongodb : una base de datos basada en almacenamiento de archivos distribuido, que es más flexible.

Preparación antes de leer

1. Comprender el desarrollo de la pila de tecnología vue
2. Entender la koa
3. Entender mongodb

construcción de ingeniería

Estructura del directorio del proyecto

 |-- client					--------前端项目界面代码
    |--assets					--------前端界面对应静态资源
    |--components				--------组件
    |--config					--------配置文件
    |--eventBus					--------eventBus
    |--filter					--------过滤器
    |--mixins					--------混入
    |--pages					--------页面
    |--router					--------路由配置
    |--store					--------vuex状态管理
    |--service					--------axios封装
    |--App.vue					--------App
    |--main.js					--------入口文件
    |--permission.js			--------权限控制
|-- server					--------服务器端项目代码
    |--confog					--------数据库链接相关
    |--middleware				--------中间件
    |--models					--------Schema和Model
    |--routes					--------路由
    |--views					--------ejs页面模板
    |--public					--------静态资源
    |--utils					--------工具方法
    |--app.js					--------服务端入口
|-- common					--------前后端公用代码模块（如加解密）
|-- engine-template			--------页面模板引擎，使用webpack打包成js提供页面引用
|-- docs					--------预留编写项目文档目录
|-- config.json				--------配置文件

Implementación del editor front-end

La idea de implementación del editor es: el editor genera datos JSON de la página, el servidor es responsable de acceder a los datos JSON y, al renderizar, los datos JSON se obtienen del servidor y se entregan a la plantilla de front-end para su procesamiento. .

agradecido

quark-h5

Licencia

Licencia Apache 2.0