wx page builder

Preface

Are you overwhelmed by the heavy demands of WeChat event pages and H5? Do you want a tool that can generate WeChat event pages with drag and drop? This project was developed based on this pain point, a tool that can drag and drop to generate H5 pages and preview the effects.

Github: Portal demo address: Portal

Interface preview:

Feature

• Drag and drop editing components
• Generate H5 page
• �Interface preview
• �Release H5 page function (under development)
• Support WeChat applet (under development)
• ��Support Element-UI (under development)
• Edit PC backend page (under development)

technology stack

front end:
vue : Modular development requires one of three options: angular, react, or vue. Here I chose vue.
vuex : state management
sass : css precompiler.
element-ui : Don’t reinvent the wheel. There are excellent ready-made Vue component libraries, so of course you have to use them. If you don't have it, just encapsulate some yourself.
loadsh : tool class

Server:
koa : The back-end language uses nodejs. There are also many koa documents and learning materials. It was built by the original team of express, which is just right.
mongodb : A database based on distributed file storage, which is more flexible.

Preparation before reading

1. Understand vue technology stack development
2. Understand koa
3. Understand mongodb

Engineering construction

Project directory structure

 |-- 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				--------配置文件

Front-end editor implementation

The implementation idea of ​​the editor is: the editor generates page JSON data, the server is responsible for accessing the JSON data, and when rendering, the JSON data is fetched from the server and handed over to the front-end template for processing.

grateful

quark-h5

License

Apache License 2.0