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

luban-h5拖拽式頁面生成器

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

技術(shù)棧

Vue2.x + Vuex + Vue-Router
Element-UI餓了么pc組件庫
Sass css預(yù)設(shè)編譯器
Loadsh 工具類
Koa 基于Node.js的web開發(fā)框架
Mongodb 基于分布式存儲(chǔ)數(shù)據(jù)庫

工程目錄結(jié)構(gòu)

安裝使用

# 下載項(xiàng)目
git clone https://github.com/huangwei9527/quark-h5.git

# 進(jìn)入目錄
cd quark-h5

# 安裝依賴包
npm install

# 啟動(dòng)前端工程
npm run dev-client

# 啟動(dòng)服務(wù)器
npm run dev-server

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

編輯器實(shí)現(xiàn)思路

編輯器生成頁面JSON數(shù)據(jù)，服務(wù)端負(fù)責(zé)存取JSON數(shù)據(jù)，渲染時(shí)從服務(wù)端取數(shù)據(jù)JSON交給前端模板處理。

psd設(shè)計(jì)圖導(dǎo)入生成h5頁面

將psd每個(gè)設(shè)計(jì)圖中的每個(gè)圖層導(dǎo)出成圖片保存到靜態(tài)資源服務(wù)器中。

# 安裝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) {
            // 轉(zhuǎn)換不出來的圖層先忽略
            continue;
        }
    }
    ctx.body = {
        elements: psdSourceList,
        document: psd.tree().export().document
    };
})

*注意

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

市面上有很多優(yōu)秀的可視化h5編輯器，如MAKA、易企秀等，不過都不是免費(fèi)的。這款夸克H5免費(fèi)開源使用，想技術(shù)提升的同學(xué)不可錯(cuò)過喲！

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

# 倉(cāng)庫地址
https://github.com/huangwei9527/quark-h5

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

轉(zhuǎn)載：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

總結(jié)

以上是生活随笔為你收集整理的超给力 Vue.js 可视化H5拖拽编辑器Quark-H5的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。