整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
天給大家推薦一款超棒的H5可視化網(wǎng)頁制作編輯工具H5DS。
h5ds 基于HTML5構(gòu)建的web網(wǎng)頁可視化制作器。通過輕松拖拽元素即可快速生成精美的H5頁面。
$ npm i h5ds -Simport React, { Component } from 'react'
import H5dsEditor from 'h5ds/editor'
import 'h5ds/editor/style.css'
class Editor extends Component {
constructor(props) {
super(props);
this.state = {
data: null
};
}
/* 保存app */
saveApp = async data => {
console.log('saveApp ->', data);
};
/* 發(fā)布app*/
publishApp = async data => {
console.log('publishApp ->', data);
};
componentDidMount() {
// 模擬異步加載，設(shè)置 defaultData 會默認(rèn)加載一個初始化數(shù)據(jù)
setTimeout(() => {
this.setState({ data: 'defaultData' });
}, 100);
}
/**
* 使用編輯器
*/
render() {
const { data } = this.state;
return (
<H5dsEditor
plugins={[]} // 第三方插件包
data={data}
options={{
publishApp: this.publishApp,
saveApp: this.saveApp, // 保存應(yīng)用
appId: 'test_app_id' // 當(dāng)前appId
}}
/>
);
}
}
export default Editor;h5ds編輯器通過時間軸控制動畫進(jìn)度。
動畫效果使用的是如下CSS3動畫庫。
https://animate.style/通過簡單拖拽操作，就可實(shí)現(xiàn)h5代碼編輯功能。
確實(shí)是非常棒的一款類似易企秀、MAKA的H5制作編輯工具，大家不要錯過喲~~
# 官網(wǎng)地址
https://www.h5ds.com/
# 倉庫地址
https://github.com/h5ds/h5dsok，今天就分享到這里。如果大家有其它優(yōu)秀的H5可視化編輯工具，歡迎交流討論！
前，H5頁面制作工具的各種排行榜與評測文章花樣百出、各執(zhí)一詞，卻都沒有明確依據(jù)。國內(nèi)的大多評測與利益集團(tuán)密切相關(guān)，說白了是抬高自有品牌、貶低競品的工具，因此本文盡量通過可量化的指標(biāo)，保證評測結(jié)果的可信度。
首先須明確，國內(nèi)的H5頁面制作工具，一般指用于HTML5頁面可視化開發(fā)的在線編輯器，基本目的為生成可用于傳播的HTML5網(wǎng)頁。因此，無論不同工具在功能上有多少差異，基本面向作品的一鍵發(fā)布與即時投用，制作流程如下：
這與國外存在很大差別。美國也有H5頁面制作工具，但多為離線軟件形式、成品是打包的文件夾，功能應(yīng)用上專用性也較強(qiáng)。比如Adobe Edge和Tumult Hype偏向網(wǎng)頁動畫、Google Web Designer偏向廣告設(shè)計、Construct 2偏向游戲制作，制作流程如下：
評測以工具功能與性能為主，包括多媒體功能、高級應(yīng)用、微信應(yīng)用和用戶友好度四個指標(biāo)（各5分，總計65個參數(shù)），總分20分。評測得出排行榜單如下：
第1名iH5.cn 18星半
多媒體支持 ★★★★☆ 微信應(yīng)用 ★★★★☆
高級應(yīng)用 ★★★★☆ 用戶友好度 ★★★★★
iH5綜合性能最強(qiáng)，各項指標(biāo)的得分均比較高，品牌展示、動畫、游戲、建站均適用，主要面向企業(yè)用戶。因為免費(fèi)，也不少像我這樣的小散戶用它玩玩票。多媒體文件支持方面，是唯一同時支持圖片（JPG、GIF、ZIP、PSD等）、音視頻、網(wǎng)頁等的上傳，并允許用戶在生成頁面中重設(shè)文件屬性的編輯器，拓展性高。
總的來說，它目前有超過10項高級功能的可視化是業(yè)內(nèi)獨(dú)有的，包括：（1）繪畫（2）橫幅（Banner）（3）畫布（4）物理引擎（5）運(yùn)動模擬與監(jiān)測（6）智能語音識別（7）軸動畫（8）響應(yīng)設(shè)備（9）跨屏互動（10）數(shù)據(jù)庫（11）變量綁定（12）數(shù)據(jù)運(yùn)算等的可視化，也支持紅包、支付、錄音、拍照上傳、獲取用戶個人信息等微信功能。
界面看起來有點(diǎn)“原生態(tài)”，但實(shí)用性和友好度很高，模板、工具說明手冊、教程齊全，也提供歷史記錄、另存為作品等多種操作回退方案。美中不足的是，并不具備制圖和圖表功能。
第2名Epub360 10星
多媒體支持 ★★ 微信應(yīng)用 ★★☆
高級應(yīng)用 ★★☆ 用戶友好度 ★★★
和搜索引擎等互聯(lián)網(wǎng)產(chǎn)品的現(xiàn)象一致，第二名和第一名的差距比較明顯。Epub 360相當(dāng)于升級版的易企秀，微信應(yīng)用和高級應(yīng)用的支持較好，獨(dú)有功能是有一個編輯SVG代碼的簡易入口。
總的來說，它雖然原意是面向HTML5頁面的專業(yè)制作，但在復(fù)雜應(yīng)用支持的設(shè)計上并不徹底。雖然能對文本、圖片、音視頻做簡單的顯示、播放與否的控制，但不支持重設(shè)文件尺寸大小、播放進(jìn)度等較復(fù)雜的控制，也不具備動畫、游戲制作所需的帶軌時間軸、物理引擎等功能。
界面布局比較合理，遺憾的是它并不提供一對一的配置，比如不具備使用條件的事件也可能出現(xiàn)在對象屬性里，對于用戶體驗是一大硬傷。
第3名 易企秀8星半
多媒體支持 ★★ 微信應(yīng)用 ★☆
高級應(yīng)用 ★ 用戶友好度 ★★★★
易企秀很容易定義，就是移動版的PPT制作工具，面向手機(jī)上的基本演示。它各方面的功能，包括文本、按鈕、圖表、頁面動效等參數(shù)都與微軟的Powerpoint如出一轍。當(dāng)然，圖表的個性化設(shè)計還比不上后者。
它還是有一定H5頁面制作特色的，比如基于套件的表單采集，以及微信應(yīng)用上有錄音和拍照上傳功能。但它的功能有些還不夠穩(wěn)定，比如雖然聲明可以嵌入音樂外鏈，但實(shí)際播放上存在一定問題。
國內(nèi)H5頁面工具的視頻外鏈功能有個通病，大多并不是真的支持資源下載類型的外鏈，除iH5外只是允許嵌入優(yōu)酷、騰訊、愛奇藝等網(wǎng)站自帶播放器的播放外鏈。因為也算是能支持第三方視頻，在這個指標(biāo)上我沒做太嚴(yán)格的限制。
并列第3搜狐快站8星半
多媒體支持 ★★ 微信應(yīng)用 ★
高級應(yīng)用 ★☆ 用戶友好度 ★★★★
搜狐快站不是國內(nèi)最好的H5頁面制作工具，但算是最好的移動建站工具。它的特點(diǎn)在于各種現(xiàn)成套件的式樣龐大，相當(dāng)于一個個固定樣式的框架，可以面向各種類型的移動建站需求。
雖然它的分類有一項是微海報，但它本質(zhì)上就是面向網(wǎng)站建設(shè)，具備富文本、按鈕、二維碼在線生成這些支持一定動態(tài)拓展性的功能。此外，對于搜狐自有的其他平臺（如自媒體），也能同步為移動主頁。
界面設(shè)計上，因為定義的套件過于繁雜，它在顯示上做了很多隱藏菜單的處理，但總體還是有點(diǎn)臃腫，使用功能時需要一定的遍歷與尋找時間。還好網(wǎng)站有提供比較詳盡的工具手冊，能用于查考。
第5名 最酷網(wǎng)8星
多媒體支持 ★☆ 微信應(yīng)用 ★☆
高級應(yīng)用 ★ 用戶友好度 ★★★★
本文只對排行前三的工具進(jìn)行比較細(xì)致的說明，由于后面的平臺大多同質(zhì)性較強(qiáng)，就不作一一解釋。比如排第5-8名的工具，簡單地說就是易企秀去掉幾個功能的產(chǎn)物，其中你甚至能在排行第五的最酷網(wǎng)里看到不少英文參數(shù)的設(shè)置。
“這是漢化功夫沒做好吧？誒，為啥是漢化的？”
內(nèi)在原因就不作太多剖析了，反正用了不少國外的開源框架——為什么國內(nèi)這么多H5頁面工具長得這么像、功能如此雷同，自有它的科學(xué)道理。
第6名 爆米兔7星
多媒體支持 ★☆ 微信應(yīng)用 ☆
高級應(yīng)用 ★ 用戶友好度 ★★★★
并列第6場景應(yīng)用7星
多媒體支持 ★☆ 微信應(yīng)用 ☆
高級應(yīng)用 ★ 用戶友好度 ★★★★
并列第6 ME微雜志7星
多媒體支持 ★☆ 微信應(yīng)用 ☆
高級應(yīng)用 ★ 用戶友好度 ★★★★
第9名 木疙瘩6星半
多媒體支持 ★★ 微信應(yīng)用
高級應(yīng)用 ★☆ 用戶友好度 ★★★
靠后的榜單里還算有點(diǎn)特色的是Mugeda，面向HTML5的動畫制作，可以做軸動畫和變形動畫。但它的致命傷比較明顯，用戶體驗不是很好，主要在三個方面：
（1）界面：空間利用率低，對比其他工具是編輯臺最小的一個；
（2）教程：互動教程是它的一個創(chuàng)新，但連個基本的工具指南都沒有，只有不完全的案例教程，使用上非常不便；
（3）模板：沒有任何模板或現(xiàn)成用例，也不具備微信應(yīng)用功能。
并列第9百度H5平臺6星半
多媒體支持 ★☆ 微信應(yīng)用 ☆
高級應(yīng)用 ☆ 用戶友好度 ★★★★
百度H5平臺是今年4月才推出的，本以為傍著大樹好乘涼，應(yīng)該也差不到哪里去，但實(shí)際上它也好不到哪里去。
雖然算是參與測評的近30個工具中最新發(fā)布的一個，在功能上唯一的創(chuàng)新是單頁動效時長可以通過時間軸調(diào)整——但這種時間軸并不具備添加關(guān)鍵幀等動畫制作能力，所以我也不確定是不是它后面想要放什么大招才留了這么個東西。
·
由于準(zhǔn)入門檻較低，國內(nèi)的H5頁面制作工具數(shù)量巨大、質(zhì)量參差不一。而且為了迎合微信H5龐大的制作需求，大多數(shù)公司急功急利，趕著包裝出一個面向H5頁面制作的概念搶生意，結(jié)果同質(zhì)化嚴(yán)重、殘次品頻出。
評測日為2016年5月12日-19日，歷時一周，數(shù)據(jù)盡量保持準(zhǔn)確客觀，各項參數(shù)也公開在下面以便各位看官拍磚。評價上可能因為個人傾向有點(diǎn)主觀，但至于那種“怎么沒有××呢”、“××這么好為什么沒有提到呢”等質(zhì)疑，我的回答只有一個——抱歉，不是沒有測，只因分?jǐn)?shù)太低沒能上榜。
TML5是開發(fā)人員和設(shè)計人員最流行的語言之一，因為它提供了許多功能，并幫助開發(fā)人員輕松設(shè)計Web應(yīng)用程序。
HTML5的流行背后有許多原因，例如現(xiàn)代瀏覽器支持（如Firefox 6、Google Chrome、IE9等）、特定于結(jié)構(gòu)的標(biāo)簽、嵌入圓角等視覺元素、拖放交互、新視頻、音頻和畫布元素以及scal的集成。
為此小編準(zhǔn)備了6個比較有用的常用的HTML5編輯器，這些編輯器將使設(shè)計人員和開發(fā)人員能夠在其給定的工作流中工作，我們希望他們能滿足你的需要。
圖片來源：Blue Griffon軟件網(wǎng)站
Blue Griffon是一個新的Wysiwyg內(nèi)容編輯器，適用于萬維網(wǎng)。由火狐的渲染引擎Gecko提供支持，它是一個現(xiàn)代而強(qiáng)大的解決方案，可以根據(jù)最新的Web標(biāo)準(zhǔn)編輯網(wǎng)頁。BlueGriffon是一個直觀的應(yīng)用程序，它為網(wǎng)頁作者（初學(xué)者或更高級的人）提供了一個簡單的用戶界面，允許創(chuàng)建有吸引力的網(wǎng)站，而無需廣泛的網(wǎng)絡(luò)標(biāo)準(zhǔn)技術(shù)知識。
Rendera是一個在線的HTML5編輯器，它提供當(dāng)前作品的實(shí)時預(yù)覽，還將當(dāng)前作品轉(zhuǎn)換為CSS，rendera支持HAML和SASS。rendera使學(xué)習(xí)HTML5和CSS3變得容易，并且它是用coffeeesccript和sinatra構(gòu)建的。
Mercury是一個功能齊全的HTML5編輯器，構(gòu)建
在HTML5內(nèi)容可編輯功能之上，它本機(jī)支持所有HTML5元素語法和JavaScriptAPI。它支持完整的HTML、簡單的標(biāo)記、代碼段和圖像區(qū)域。它支持預(yù)覽編輯的內(nèi)容、圖像、視頻或表格。文件上載可以通過拖放完成。
Maqetta是一個開源項目，它提供了對HTML5用戶界面的WYSIWYG可視化創(chuàng)作。Maqetta應(yīng)用程序本身是以HTML編寫的，因此在瀏覽器中運(yùn)行，不需要額外的插件或下載。Maqetta是一個商業(yè)友好的開源許可證。您可以下載源代碼并將其安裝到您自己的服務(wù)器上，自定義代碼以滿足您的需要和/或?qū)﹂_源項目做出改進(jìn)。
Aloha Editor編輯器是一個在javascript中開發(fā)的富文本編輯器，是一個基于瀏覽器的框架。Aloha可以嵌入到內(nèi)容管理系統(tǒng)（CMS）和其他用于博客和Web開發(fā)的框架中。Aloha編輯器旨在加快編輯過程。通過減少一些耗時的步驟（如鍵入和格式化），Aloha使工作速度提高了25%。aloha編輯器可以在網(wǎng)站加載時使用，即使用戶需要20或100個輸入?yún)^(qū)域，aloha編輯器也只能加載一次。
Aptana Studio3是一個面向開發(fā)人員的開源開發(fā)工具；它使開發(fā)人員能夠使用單一環(huán)境測試他們的Web應(yīng)用程序。Aptana支持最新的瀏覽器技術(shù)規(guī)范，如HTML5、CSS3、JavaScript、Ruby、Rails、PHP和Python。它包括許多功能，如GIF集成、HTML、CSS和JavaScript代碼輔助、集成調(diào)試器、部署向?qū)Ш虸DE自定義。
（如有侵權(quán)，請聯(lián)系小編，必刪）
今天HTML5編輯器就暫時講到這里了，其他編輯軟件可下邊留言，期待你的表現(xiàn)哦！！！
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
