整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
者：徐小夕
轉發鏈接：https://mp.weixin.qq.com/s/cg9BZniPTCpxXq66YR7jsA
天有給大家分享一款Vue+Uniapp拖放布局模板。這次繼續分享一個優秀的Vue H5在線拖拽編輯器項目h5Maker。
vue+uniapp可視化拖拽布局設計器
h5maker 基于vue.js的可視化布局編輯器。大致類似maka及易企秀。支持自定義拖放頁面元素及配置屬性/動畫。支持動畫及頁面預覽效果。
注意：運行前需要先啟動mongodb數據庫，請確保本地已安裝數據庫。
# 克隆項目
git clone https://github.com/zhengguorong/h5maker.git
# 進入目錄
cd h5maker
# 安裝依賴包
npm install
# 啟動前端工程
npm run webapp
# 啟動后端工程
npm run local想要技術進階的同學可以關注下，大家可以根據需要自行在此基礎上完善組件，特別適合一些專注于展示的網頁設計。
# 示例地址
http://h5.limesoftware.cn/
# 倉庫地址
https://github.com/zhengguorong/h5maker好了，就介紹到這里。如果感興趣的話可以去動手試一試哈。
面可視化編輯器
a) 公司是一個垂直的藥品電商平臺主營B2B，初創平臺需要大量的營銷活動來拉動商業需求。
b) 本人來公司近一年，一直負責營銷活動的研發工作，主要有商家促銷體系、平臺營銷、運營數據統計三大塊。做了一個初步的統計，從今年2月到8月底累計上線的活動約200個，其中手工開發的頁面占到120個左右，每個活動約2~4個頁面（h5&pc），算下來幾乎1天一個+活動。
c) 其中包括和運營梳理活動方案，制定各種活動開發方案及實施細節，并和各個部門的研發同學溝通技術細節。
d) 整體下來從運營活動發起、啟動研發、活動上線、后期的數據統計，整個流程下來需要處理的事情非常多。
e) 經常碰到的一個問題，運營提報活動，并且要求快速上線，研發同事面對的就是沒日沒夜的加班，通宵已成習慣。但我們做為研發人，不能容忍這種問題長期出現，這時迫不及待地需要一個平臺化的系統來支持運營部門的活動需求，加速活動上線流程，降低研發成本。
a) 先上圖
主功能區
主功能區
主功能區
b) 從工具欄選擇相應的UI組件，通過屬性編輯器編輯對應的屬性并保存到數據庫。
c) 涉及到的后端領域模型如下
領域模型
d) 前端交互領域模型
前端交互領域模型
?e) 整體邏輯架構
邏輯架構
f) 前端渲染時序
g) 前端渲染實現思路
i. 編譯指令：angular自定義指令，用來加載可視化組件并綁定作用域及參數；
ii. 可視化組件：為頁面中展示的一個樓層，
前端實現：為一個angular自定義指令，一個html，一個組件數據包括配置
加載過程：由自定義的編譯指令通過組件模板配置的html模板地址進行加載并綁定對應的組件配置屬性
iii. 組件模板：用來定義一個組件的構成，包括組件名稱、唯一code標識、類型、組件所有的配置項
前端實現：一個工具欄展示圖片，一個html模板，一個自定義指令。
加載過程：在配置頁面初始化時展示在工具欄
iv. 屬性編輯器：用來為每個組件編輯對應的配置項，通過組件模板code對應到組件模板。
前端實現：
加載過程：在每個組件被選中的同時通過組件對應的組件模板code進行切換
h) 實現思路-數據交互模型
i) 技術棧
j) 開發規范
k) 系統架構
3.自動產出活動統計數據
【待續】
4.未來的工作
?編輯
具體的活動頁面demo：http://act.mypharma.com/activity/p/411.html
http://act.mypharma.com/activity/p/4582.html
很多組件還在規劃和研發中，敬請期待
文中圖片ppt地址：http://download.csdn.net/download/philip502/9963680
?
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
