一、ymm-tech/gods-pen

star: 1.7k

watch: 270

fork: 557

碼良是一個(gè)在線生成H5頁面并提供頁面管理和頁面編輯的平臺(tái)，用于快速制作H5頁面。用戶無需掌握復(fù)雜的編程技術(shù)，通過簡單拖拽、少量配置即可制作精美的頁面，可用于營銷場景下的頁面制作。同時(shí)，也為開發(fā)者提供了完備的編程接入能力，通過腳本和組件的形式獲得強(qiáng)大的組件行為和交互控制能力。

支持功能

1、編輯器

• 面向不同角色切換工作臺(tái)，并可以自行拖拽。
• 組件，以及組合組件。
• 實(shí)時(shí)預(yù)覽的動(dòng)畫編輯。
• 實(shí)時(shí)預(yù)覽，并可按幀拖動(dòng)預(yù)覽的動(dòng)畫編輯。
• 腳本功能，靈活的擴(kuò)展編輯器面板的屬性（非常容易給組件額外添加自定義的屬性和方法，完全自己代碼控制）。
• 樣式編輯，基礎(chǔ)模式，代碼模式。方便開發(fā)和運(yùn)營不同角色使用。
• 在線預(yù)覽。
• 二維碼預(yù)覽。
• 可導(dǎo)入psd。
• 支持pc端和移動(dòng)端。

2、組件商城

• 25+組件,也歡迎開發(fā)者貢獻(xiàn)自己的組件，查看所有組件。
• 可上傳，下載自己或別人的組件。
• 可出售自己開發(fā)的組件。
• 可購買別人的組件。

3、后臺(tái)管理與數(shù)據(jù)

• 可按團(tuán)隊(duì)管理頁面 類似gitlab管理項(xiàng)目。合理的權(quán)限管理。
• 表單數(shù)據(jù)收集，并有數(shù)據(jù)同居。
• 支持頁面的pv uv以及自定義埋點(diǎn)信息。
• 方便的資源和組件管理。

二、H5-Dooring

github: https://github.com/MrXujiang

star: 7.9k

fork: 1.5k

(H5編輯器)H5-Dooring是一款功能強(qiáng)大，專業(yè)可靠的H5可視化頁面配置解決方案，致力于提供一套簡單方便、專業(yè)可靠、無限可能的H5落地頁最佳實(shí)踐。技術(shù)棧以react為主， 后臺(tái)采用nodejs開發(fā)。

1、編輯器界面：

2、頁面版本管理：

3、后臺(tái)：

特點(diǎn)：

1、【編輯器】

• 參考線
• 基礎(chǔ)組件
• 可視化組件
• 媒體組件
• 商品組件
• 拖拽器
• 配置面板
• 表單設(shè)計(jì)器
• (多)頁面管理(復(fù)制,編輯, 刪除, 新建)
• 組件動(dòng)畫
• 組件交互
• 數(shù)據(jù)源管理
• 快速預(yù)覽
• 真機(jī)預(yù)覽
• 撤銷、重做
• 微信分享
• 快捷鍵
• 模版庫
• 桌面端軟件Dooring-electron, 支持離線使用

2、【增強(qiáng)功能】

• 上傳 json，一鍵轉(zhuǎn)換為 H5
• 圖片庫
• 出碼能力(下載源碼, 下載dist包)

3、【后端 API】

• 創(chuàng)建、保存、更新作品
• 用戶管理, 權(quán)限管理
• 一鍵智能分析
• 數(shù)據(jù)看版
• 表單數(shù)據(jù)收集
• 表單數(shù)據(jù)展示
• 表單數(shù)據(jù)分析, 一鍵導(dǎo)出excel, 表單多條件搜索
• 在線預(yù)覽
• 二維碼預(yù)覽
• 模版管理
• 出碼接口

三、mantou / H5DS

star: 478

watch: 110

fork: 165

H5DS(HTML5 Design software) 這是一款基于WEB的 H5制作工具。讓不會(huì)寫代碼的人也能輕松快速上手制作H5頁面。

特點(diǎn)：

【高維護(hù)性】： 采用react+mobx模塊化開發(fā)，源碼結(jié)構(gòu)清晰，注釋規(guī)范，高可維護(hù)，方便進(jìn)行二次開發(fā)和迭代升級(jí)。

【高擴(kuò)展性】： 編輯器內(nèi)核獨(dú)立存在，官方提供了插件開發(fā)教程以及CLI工具，可獨(dú)立開發(fā)插件，動(dòng)態(tài)加載插件。

【高性能】：采用mobx統(tǒng)一管理數(shù)據(jù)，底層proxy數(shù)據(jù)監(jiān)聽，做了大量節(jié)流和防抖優(yōu)化，插件按需加載，不占內(nèi)存。

【多終端支持】：支持手機(jī)頁面、PC頁面獨(dú)立制作，設(shè)計(jì)界面可自由切換，采用縮放模式兼容各種屏幕分辨率，PC/Mobile一網(wǎng)打盡。

三、ly525 / luban-h5

star: 1.1k

watch: 187

fork: 403

A mobile page builder/editor, similar with amolink.zh:類似易企秀的H5制作、建站工具，開源可視化搭建系統(tǒng)。

特點(diǎn)：

1、【編輯器】

• 參考線/參考線
• 吸附線
• 通過拖放更改插件形狀
• 編輯元素（畫布）
• 復(fù)制元素（畫布）
• 刪除元素（畫布）
• 編輯頁面
• 復(fù)制頁面
• 刪除頁面
• 快速預(yù)覽
• 撤消、重做
• 插件系統(tǒng)

2、【發(fā)短信】

• “正常”按鈕
• “表單”按鈕
• 表單字段
• 圖片
• 背景圖片
• 視頻（內(nèi)嵌框架格式）

3、【增強(qiáng)功能】

• 將 PSD 文件解析為 HTML 頁面
• 照片庫
• 第三方無版權(quán)圖片搜索

4、【后端接口】

• 創(chuàng)建工作
• 保存工作
• 更新工作
• 表單統(tǒng)計(jì)
• 在線預(yù)覽
• 二維碼預(yù)覽

四、猿計(jì)劃 / vite-vue3-lowcode

star: 563

watch: 59

fork: 260

vue3.x vite2.x vant element-plus H5移動(dòng)端低代碼平臺(tái)lowcode可視化拖拽 可視化編輯器visual editor類似易企秀的H5制作、建站工具、可視化搭建工具。

功能清單：

• 動(dòng)態(tài)添加頁面。
• 拖拽式生成組件。
• service worker + indexeddb 實(shí)現(xiàn)無服務(wù)端的前端交互。
• 數(shù)據(jù)源管理(支持導(dǎo)入 swagger JSON 生成數(shù)據(jù)模型及接口)。
• 提供預(yù)置函數(shù)。
• 更多組件的封裝。

五、huangwei9527/quark-h5

star: 345

watch: 48

fork: 134

基于vue2 + koa2的 H5制作工具。讓不會(huì)寫代碼的人也能輕松快速上手制作H5頁面。類似易企秀、百度H5等H5制作、建站工具。

技術(shù)棧

1、前端：

• vue: 模塊化開發(fā)少不了angular，react，vue三選一，這里選擇了vue。
• vuex: 狀態(tài)管理。
• sass: css預(yù)編譯器。
• element-ui：不造輪子，有現(xiàn)成的優(yōu)秀的vue組件庫當(dāng)然要用起來。沒有的自己再封裝一些就可以了。
• loadsh：工具類。

2、服務(wù)端：

• koa：后端語言采用nodejs，koa文檔和學(xué)習(xí)資料也比較多，express原班人馬打造，這個(gè)正合適。
• mongodb：一個(gè)基于分布式文件存儲(chǔ)的數(shù)據(jù)庫，比較靈活。

編輯器整體設(shè)計(jì)

• 一個(gè)組件選擇區(qū)，提供使用者選擇需要的組件。
• 一個(gè)編輯預(yù)覽畫板，提供使用者拖拽排序頁面預(yù)覽的功能。
• 一個(gè)組件屬性編輯，提供給使用者編輯組件內(nèi)部props、公共樣式和動(dòng)畫的功能。

六、眾邦科技/CRMEB-H5

star: 316

watch: 44

fork: 278

CRMEBv3.0版微信公眾號(hào)和H5前端頁面，采用VUE-CLI框架。

特點(diǎn)：

【獨(dú)立部署】：源碼交付獨(dú)立部署，數(shù)據(jù)私有安全可靠。

【二開方便】：代碼開源規(guī)范，注釋清晰，二次開發(fā)更友好。

【高性可靠】：使用高性能框架開發(fā)，系統(tǒng)穩(wěn)定、支持高并發(fā)。

【文檔齊全】：提供完善的安裝、使用文檔、接口文檔、開發(fā)文檔。

七、jaycie/makeH5Tools

star: 61

watch: 6

fork: 41

freeH5,open source html5,open source h5,免費(fèi)html5制作工具,freeH5 APP,h5營銷,h5頁面制作,H5在線制作工具。

運(yùn)行環(huán)境

• 后端 nodejs+mysql
• 前端 seajs

以上便是本次分享的全部內(nèi)容，希望對(duì)你有所幫助^_^。