超給力 Vue.js 可視化H5拖拽編輯器Quark-H5

前兩天有分享一個魯班H5移動端頁面生成器。今天再給大家推薦一款超優秀的Vue H5可視化布局編輯器QuarkH5。

 

luban-h5拖拽式頁面生成器

quark-h5 基於 vue.js 開源的H5可視化拖放編輯器，star高達1.7K+。支持拖拽組件並配置屬性，支持動畫及效果預覽，輕松快速上手制作h5頁面。

 

技術棧

• Vue2.x + Vuex + Vue-Router
• Element-UI餓了么pc組件庫
• Sass css預設編譯器
• Loadsh 工具類
• Koa 基於Node.js的web開發框架
• Mongodb 基於分布式存儲數據庫

 

工程目錄結構

 

安裝使用

# 下載項目
git clone https://github.com/huangwei9527/quark-h5.git

# 進入目錄
cd quark-h5

# 安裝依賴包
npm install

# 啟動前端工程
npm run dev-client

# 啟動服務器
npm run dev-server

# 編譯engine.js模板引擎
npm run lib:h5-swiper

 

 

編輯器實現思路

編輯器生成頁面JSON數據，服務端負責存取JSON數據，渲染時從服務端取數據JSON交給前端模板處理。

 

psd設計圖導入生成h5頁面

將psd每個設計圖中的每個圖層導出成圖片保存到靜態資源服務器中。

# 安裝psd依賴
$ npm install psd --save

 

var PSD = require('psd');
router.post('/psdPpload',async ctx=>{
    const file = ctx.request.files.file; // 獲取上傳文件
    let psd = await PSD.open(file.path)
    var timeStr = + new Date();
    let descendantsList = psd.tree().descendants();
    descendantsList.reverse();
    let psdSourceList = []
    let currentPathDir = `public/upload_static/psd_image/${timeStr}`
    for (var i = 0; i < descendantsList.length; i++){
        if (descendantsList[i].isGroup()) continue;
        if (!descendantsList[i].visible) continue;
        try{
            await descendantsList[i].saveAsPng(path.join(ctx.state.SERVER_PATH, currentPathDir + `/${i}.png`))
            psdSourceList.push({
                ...descendantsList[i].export(),
                type: 'picture',
                imageSrc: ctx.state.BASE_URL + `/upload_static/psd_image/${timeStr}/${i}.png`,
            })
        }catch (e) {
            // 轉換不出來的圖層先忽略
            continue;
        }
    }
    ctx.body = {
        elements: psdSourceList,
        document: psd.tree().export().document
    };
})

 

*注意

• psd源文件大小最好不要超過30M，過大會導致瀏覽器卡頓甚至卡死
• 盡可能合並圖層，並柵格化所有圖層
• 較復雜的圖層樣式，如濾鏡、圖層樣式等無法讀取

 

 

 

 

市面上有很多優秀的可視化h5編輯器，如MAKA、易企秀等，不過都不是免費的。這款誇克H5免費開源使用，想技術提升的同學不可錯過喲！

# 示例地址
http://47.104.247.183:4000/

# 倉庫地址
https://github.com/huangwei9527/quark-h5

ok，就分享到這里。感興趣的同學可以自己去嘗試下哈！

轉載：https://www.toutiao.com/i6862727085232751116/?tt_from=copy_link&utm_campaign=client_share&timestamp=1597884585&app=news_article&utm_source=copy_link&utm_medium=toutiao_ios&use_new_style=1&req_id=202008200849450100140460180A55E6B1&group_id=6862727085232751116