wx page builder

前言

你是否被微信活動頁和H5繁重的需求壓斷了腰，想要有一款拖曳就可以產生微信活動頁的工具？ 此專案就是基於此痛點開發�，能夠拖曳產生H5頁面，並預覽效果的工具。

Github: 傳送門示範地址：傳送門

介面預覽：

Feature

• 拖曳編輯組件
• 產生H5頁面
• �界面預覽
• �發布H5頁面功能(開發中)
• 支援微信小程式(開發中)
• ��支援Element-UI(開發中)
• 編輯PC中後台頁面(開發中)

技術堆疊

前端：
vue : 模組化開發少不了angular，react，vue三選一，這裡選擇了vue。
vuex : 狀態管理
sass : css預編譯器。
element-ui ：不造輪子，有現成的優秀的vue組件庫當然要用起來。沒有的自己再封裝一些就可以了。
loadsh ：工具類

服務端：
koa ：後端語言採用nodejs，koa文件和學習資料也比較多，express原班人馬打造，這個正合適。
mongodb ：一個基於分散式檔案儲存的資料庫，比較靈活。

閱讀前準備

1.了解vue技術堆疊開發
2、了解koa
3、了解mongodb

工程搭建

工程目錄結構

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

前端編輯器實現

編輯器的實作想法是：編輯器產生頁面JSON數據，服務端負責存取JSON數據，渲染時從服務端取數據JSON交給前端模板處理。

感謝

quark-h5

License

Apache License 2.0