你好，想在被添加自動(dòng)回復(fù)中回復(fù)H5頁面，除了第三方開發(fā)外，只能在回復(fù)文字中添加H5頁面的鏈接，如圖：具體代碼為：<a hrel="展示內(nèi)容的鏈接">自動(dòng)回復(fù)顯示的文字</a> 這個(gè)我也知道，但是還是非常感謝

1.H5的性能很差，一般經(jīng)常改的地方可以用H5，比如論壇，咨詢之類的，而且限制也是很大，很多效果是沒辦法做到的。GUI框架的WebView普遍是這樣的。如果一個(gè)APP全部由H5來做(不太可能，送審很可能被拒)，那么會(huì)顯得非?？?。2.用iOS SDK，如果實(shí)現(xiàn)熱更新是比較麻煩的。對(duì)于論壇，咨詢這種模塊，動(dòng)不動(dòng)就改版，做起來比較頭疼，用H5就很合適了。尤其在APP跨安卓和iOS的時(shí)候，這類模塊如果直接用H5，那么就很容易共用。H5網(wǎng)頁App開發(fā)和純?cè)腁pp的差距主要聚集在以下幾個(gè)方面：1、動(dòng)畫動(dòng)畫有很多種，比如側(cè)邊欄菜單的滑入滑出、元素的響應(yīng)動(dòng)畫、頁面切換之間的過場(chǎng)等等，在H5之下的眾多實(shí)現(xiàn)方法都沒有辦法達(dá)到純?cè)男阅?。一般這些的話有幾種不同的選擇：css3動(dòng)畫、javascript動(dòng)畫、原生動(dòng)畫。css3動(dòng)畫非常的消耗性能，如果某一個(gè)元素用到css3動(dòng)畫可能還看不出來，但大面積或過場(chǎng)使用css3動(dòng)畫會(huì)讓app低端手機(jī)體驗(yàn)非常差。最好的選擇一般是通過框架調(diào)用底層的動(dòng)畫，但不管怎么樣等于在原來的代碼上包上了一層，性能還是不可避免的受到影響。比如在一個(gè)新頁面的載入上，如果調(diào)用底層動(dòng)畫要考慮的問題有兩個(gè)，一個(gè)是本身資源頁面的渲染問題，另一個(gè)是遠(yuǎn)程數(shù)據(jù)的獲取。即便是這些動(dòng)畫能夠很快的響應(yīng)，但大量的css頁面會(huì)導(dǎo)致渲染卡頓，滑入時(shí)可能會(huì)有白屏/機(jī)器卡頓的現(xiàn)象。為了解決這些性能問題又必須要用到預(yù)加載或模擬動(dòng)畫。即便是這樣，滑入滑出的動(dòng)畫在低端的安卓機(jī)器上還是有很多問題，如果獲取服務(wù)端數(shù)據(jù)處理的方式不合適，卡頓白屏的現(xiàn)象會(huì)更嚴(yán)重。具體看下面的數(shù)據(jù)獲取方式。2、獲取服務(wù)端數(shù)據(jù)首先要接受的是，這里的數(shù)據(jù)獲取都是在資源頁面上異步完成的，因?yàn)橹挥羞@樣才能讓這些資源頁面完成預(yù)加載或者渲染。但是異步拿到的數(shù)據(jù)在填入頁面中時(shí)可能會(huì)涉及DOM操作，眾所周知，DOM操作非常消耗性能，如果頁面小還好，頁面稍大數(shù)據(jù)稍微復(fù)雜一點(diǎn)，頻繁的DOM操作會(huì)導(dǎo)致明顯的閃白。而且最重要的一點(diǎn)是，如果頁面加載進(jìn)來之后數(shù)據(jù)更新的速度太慢，也會(huì)讓頁面模板等待很長(zhǎng)時(shí)間，對(duì)用戶體驗(yàn)又不友好，總不能每次打開都像瀏覽器一樣等待刷新是吧這個(gè)問題如果沒有得到解決，H5開發(fā)是很難承擔(dān)大規(guī)模數(shù)據(jù)的頁面，在它們之中頻繁切換更是難上加難，那么肯定有人也會(huì)想到用MVVM的方式，其實(shí)我也寫過一些基于MVVM的H5app開發(fā)，相對(duì)來說它們獲取數(shù)據(jù)和更新數(shù)據(jù)的方式更敏捷更科學(xué)，但寫的過程中又要注意很多H5獨(dú)有的問題，這些問題在下面的頁面切換里來講。3、頁面切換上面我們看到了幾種不錯(cuò)的實(shí)現(xiàn)方式，比如預(yù)加載和模擬動(dòng)畫，甚至有批量的預(yù)加載，批量的截圖模擬動(dòng)畫等等，雖然看起來很友好解決了不少問題，但事實(shí)上如果頁面足夠多就會(huì)引發(fā)另一個(gè)問題——頁面的生存周期。試想一下，如果引導(dǎo)頁或者主頁面緩存了5個(gè)子頁面的資源，在跳轉(zhuǎn)到響應(yīng)的子頁面時(shí)又會(huì)緩存這些子頁面的下級(jí)頁面資源，如此反復(fù)肯定會(huì)占據(jù)大量?jī)?nèi)存使APP的體驗(yàn)下降。那么怎么知道那些頁面是需要的，最多緩存多少頁面，什么時(shí)候結(jié)束哪些頁面的生存周期呢？在我用過的很多H5APP的框架里都沒有對(duì)這些問題有一個(gè)完美的解答，因此在頁面較多內(nèi)容較多的app開發(fā)中可能會(huì)因這些資源分配的問題降低性能。這時(shí)候我們回過頭來再看看MVVM的數(shù)據(jù)加載問題，實(shí)際上不管哪個(gè)MVVM框架，寫過的人都知道管理這種新型的前端代碼最重要的問題是內(nèi)存的問題，你既要保證代碼寫的足夠優(yōu)雅沒有任何內(nèi)存泄露問題，也要考慮到在頁面生存周期結(jié)束時(shí)它們的控制器/頁面資源是否得到釋放，這對(duì)全局有沒有什么影響，在多個(gè)請(qǐng)求時(shí)也要合理的分配資源，甚至是復(fù)用這些父級(jí)頁面?zhèn)鬟^來的緩存資源等等。較小的APP可能并不會(huì)有這些問題，如果你想用純H5來開發(fā)大型app，這很可能會(huì)浪費(fèi)你很多時(shí)間——而且結(jié)果還不會(huì)讓你滿意。4、Android/iOS的區(qū)別很多人都說純H5app開發(fā)一次編寫就能編譯Android/iOS兩種不同的APP，大大降低了成本。實(shí)際上這個(gè)觀點(diǎn)本身就是值得懷疑的，如果你寫過這類APP就能明白我在說什么，它們既不省事，又存在很多BUG，調(diào)試時(shí)尤其繁瑣。舉一個(gè)很簡(jiǎn)單的例子，Android和iOS在返回上一頁的處理方式上就有明顯的區(qū)別，iOS的頂部bar在全屏下怎樣處理，Android機(jī)器出現(xiàn)smart bar怎樣處理頁面的布局，調(diào)用底層硬件時(shí)怎樣區(qū)分不同的場(chǎng)景等等，你需要寫一個(gè)又一個(gè)機(jī)型和系統(tǒng)的判斷，然后分別在Android和iOS下調(diào)試，最后你卻發(fā)現(xiàn)這并沒有卵用，累的要死卻什么沒學(xué)到，只有一堆不知道什么時(shí)候會(huì)過時(shí)的經(jīng)驗(yàn)?，F(xiàn)在做H5混合APP開發(fā)的人很多，但是純H5卻很年輕，很多問題都沒有很好的解決，這幾個(gè)是我在做這些APP時(shí)考慮最多的問題。最后說一個(gè)很少人注意到的H5優(yōu)勢(shì)，大家大談H5APP時(shí)都是快速開發(fā)、低成本、多平臺(tái)等等，但我卻覺得它和很多APP開發(fā)方式相比有一個(gè)不同之處——圖文混合的排版。正是這些復(fù)雜多變的CSS樣式消耗了性能，但是它帶來了排版的多樣性，能夠細(xì)致到每一個(gè)字寬行高和風(fēng)格的像素級(jí)處理，才是H5的優(yōu)異之處。

就是html5，HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 標(biāo)準(zhǔn)的 HTML 標(biāo)準(zhǔn)版本，現(xiàn)在仍處于發(fā)展階段，但大部分瀏覽器已經(jīng)支持某些 HTML5 技術(shù)。HTML 5有兩大特點(diǎn)：首先，強(qiáng)化了 Web 網(wǎng)頁的表現(xiàn)性能。其次，追加了本地?cái)?shù)據(jù)庫等 Web 應(yīng)用的功能。廣義論及HTML5時(shí)，實(shí)際指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。它希望能夠減少瀏覽器對(duì)于需要插件的豐富性網(wǎng)絡(luò)應(yīng)用服務(wù)（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft Silverlight，與Oracle JavaFX的需求，并且提供能有效增強(qiáng)網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集

1. Bootstrap Boostrap絕對(duì)是目前最流行用得最廣泛的一款框架。它是一套優(yōu)美，直觀并且給力的web設(shè)計(jì)工具包，可以用來開發(fā)跨瀏覽器兼容并且美觀大氣的頁面。它提供了很多流行的樣式簡(jiǎn)潔的UI組件，柵格系統(tǒng)以及一些常用的JavaScript插件。 Bootstrap是用動(dòng)態(tài)語言LESS寫的，主要包括四部分的內(nèi)容： 腳手架——全局樣式，響應(yīng)式的12列柵格布局系統(tǒng)。記住Bootstrap在默認(rèn)情況下并不包括響應(yīng)式布局的功能。因此，如果你的設(shè)計(jì)需要實(shí)現(xiàn)響應(yīng)式布局，那么你需要手動(dòng)開啟這項(xiàng)功能?；A(chǔ)CSS——包括基礎(chǔ)的HTML頁面要素，比如表格(table)，表單(form)，按鈕(button)，以及圖片(image)，基礎(chǔ)CSS為這些要素提供了優(yōu)雅，一致的多種樣式。組件——收集了大量可以重用的組件，如下拉菜單（dropdowns），按鈕組（button groups），導(dǎo)航面板（navigation control）——包括：tabs,pills,lists標(biāo)簽，面包屑導(dǎo)航（breadcrumbs）以及頁碼（pagination），縮略圖(thumbnails)，進(jìn)度條（progress bars），媒體對(duì)象（media objects）等等。JavaScript——包括一系列jQuery的插件，這些插件可以實(shí)現(xiàn)組件的動(dòng)態(tài)頁面效果。插件主要包括模態(tài)窗口（modals），提示效果（tool tips），“泡芙”效果（popovers），滾動(dòng)監(jiān)控（scrollspy），旋轉(zhuǎn)木馬(carousel)，輸入提示(typeahead)，等等。Bootstrap已經(jīng)足夠強(qiáng)大，能夠?qū)崿F(xiàn)各種形式的 Web 界面。為了更加方便地利用Bootstrap進(jìn)行開發(fā)，很多工具和資源可以用來配合使用，下面列舉了其中的一部分工具和資源。 jQuery UI Bootstrap —— 對(duì)于jQuery和Bootstrap愛好者來說這是個(gè)非常好的資源，能夠把 Bootstrap的清爽界面組件引入到j(luò)Query UI中。jQuery Mobile Bootstrap Theme —— 和上面提到的jQuery UI主題類似，這是一個(gè)為jQuery Mobile建立的主題。如果你想讓用Bootstrap開發(fā)的網(wǎng)站在手機(jī)端也可以優(yōu)雅訪問，那么這個(gè)資源對(duì)你來說很方便易用。Fuel UX —— 它為Bootstrap添加了一些輕量的JavaScript控件。Fuel UI 安裝，修改，更新以及優(yōu)化都很簡(jiǎn)單方便。StyleBootstrap.info —— Bootstrap提供了自己的幾種界面風(fēng)格，StyleBootstrap提供了的配色選項(xiàng)，并且你可以給每個(gè)組件都應(yīng)用不同的配色。BootSwatchr —— 利用這個(gè)工具你可以立刻查看主題修改后的效果。對(duì)于每一次變動(dòng)的效果，這個(gè)應(yīng)用都會(huì)生成一個(gè)唯一的URL方便你與他人分享，你也可以在任意時(shí)刻修改你的主題。Bootswatch —— 提供大量免費(fèi)的Bootstrap主題。Bootsnipp —— 在線前端框架交互組件制作工具，是一個(gè)供給設(shè)計(jì)師和開發(fā)者的基于Bootstrap HTML/CSS/JavaScript 架構(gòu)的免費(fèi)元素。LayoutIt —— 通過界面拖放生成器簡(jiǎn)便快捷地創(chuàng)建基于Bootstrap的前端代碼。通過拖放動(dòng)作將Bootstrap風(fēng)格的組件加入到你的個(gè)人設(shè)計(jì)里并且可以方便地修改他們的屬性，簡(jiǎn)單便捷。 2. Fbootstrapp Fbootstrapp基于Bootstrap并且提供了跟Facebook iframe apps和設(shè)計(jì)相同的功能。包含用于所有標(biāo)準(zhǔn)組件的基本的CSS和HTML，包括排版、表單、按鈕、表格、柵格、導(dǎo)航等等，風(fēng)格與Facebook類似。3. BootMetro BootMetro框架的靈感來自于Metro UI CSS，基于Bootstrap 框架構(gòu)建，用于創(chuàng)建Windows 8 的Metro風(fēng)格的網(wǎng)站。它包括所有Bootstrap的功能，并添加了幾個(gè)額外的功能，比如頁面平鋪，應(yīng)用程序欄等等。4. Kickstrap Kickstrap是Bootstrap的一個(gè)變體。它基于Bootstrap，并在它的基礎(chǔ)上添加了許多app，主題以及附加功能。這使得這個(gè)框架可以單獨(dú)地用于構(gòu)建網(wǎng)站，而不需要額外安裝什么。你需要做的僅僅是把它放到你的網(wǎng)站上，然后用就可以了。 App 是一些頁面加載完成之后加載運(yùn)行的JavaScript和CSS打包文件。默認(rèn)加載的app有Knockout.js, Retina.js, Firebug Lite, and Updater，你也可以自行添加的app。 選擇不同的主題可以讓你的網(wǎng)站在眾多Bootstrap構(gòu)建的類似網(wǎng)站中顯得與眾不同。 附加功能是一些用來擴(kuò)展Bootstrap UI 庫的附件，它們的語法基本相同或者相似。5. Foundation Foundation 是一款強(qiáng)大的，功能豐富的并且支持響應(yīng)式布局的前端開發(fā)框架，你可以通過Foundation快速創(chuàng)建原型，利用它所包含的大量布局框架，元素以及最優(yōu)范例快速創(chuàng)建在各種設(shè)備上可以正常運(yùn)行的網(wǎng)站以及app。Foundation在構(gòu)建的時(shí)候秉承移動(dòng)優(yōu)先的策略，它擁有大量實(shí)用的語義化功能，并且使用Zepto類庫來取代jQuery，這樣可以帶來更好的用戶體驗(yàn)，并且提高運(yùn)行的速度。 Foundation擁有一套12列的靈活可嵌套的網(wǎng)格系統(tǒng)，你可以用它快速創(chuàng)建適應(yīng)多種瀏覽設(shè)備的布局。它有很多的功能。它定義了很多的樣式，比如字體排版，按鈕，表單，以及多種多樣的導(dǎo)航控件。它也提供了很多的CSS組件，例如操作面板（panels），價(jià)格表（price tables），進(jìn)度條（progress bars），表格（tables）以及可以適應(yīng)不同設(shè)備的可伸縮視頻（flex video）。與此同時(shí)，F(xiàn)oundation還包括了很多的JavaScript插件，如下拉菜單（dropdowns），joyride（網(wǎng)站功能引導(dǎo)插件），magellan（網(wǎng)站固定導(dǎo)航插件），orbit（支持觸摸的響應(yīng)式圖片輪播插件），reveal（彈出框插件），sections（強(qiáng)大的tab插件）以及tooltips（工具提示）等。 Foundation框架還提供了很多有用的擴(kuò)展。 模板（Stencils）——Foundation框架中的所有UI元素都有Omnigraffle stencils以及矢量PDF兩種格式的下載，你可以用它們來方便快捷的繪制線框圖和原型圖。HTML模板 —— HTML模板可以方便地用來快速創(chuàng)建頁面布局。你所要做的僅僅是復(fù)制得到模板代碼，然后丟到頁面的標(biāo)簽之間就好了。圖標(biāo)字體（Icon Fonts） —— 包含自定義圖標(biāo)的一種網(wǎng)頁字體。SVG 社交網(wǎng)絡(luò)圖標(biāo)（Social Icons）—— 一組不依賴分辨率的社交網(wǎng)絡(luò)圖標(biāo)（可縮放矢量圖標(biāo)）。響應(yīng)式表格——Foundation框架中響應(yīng)式表格的實(shí)現(xiàn)機(jī)制是固定表格的左邊第一列，然后表格的其他列可以通過滾動(dòng)條拖拉進(jìn)行訪問。關(guān)閉帆布布局（Off-Canvas Layouts）—— 這些布局可以允許一些網(wǎng)頁內(nèi)容或者導(dǎo)航控件在移動(dòng)端設(shè)備上默認(rèn)隱藏，當(dāng)瀏覽屏幕變大或者用戶進(jìn)行相應(yīng)操作的時(shí)候這些內(nèi)容再出現(xiàn)。當(dāng)用戶進(jìn)行相關(guān)操作的時(shí)候，網(wǎng)頁內(nèi)容或者導(dǎo)航控件將會(huì)滑動(dòng)出現(xiàn)。如你所見，對(duì)于web開發(fā)者以及設(shè)計(jì)師來說，F(xiàn)oundation就像是一個(gè)巨大的寶藏。在下載框架的時(shí)候，你可以自定義下載框架的內(nèi)容。6. GroundworkCSS GroundworkCSS 是前端框架家族里面新添的一款小清新框架。它是基于Sass和Compass的一個(gè)高級(jí)響應(yīng)式的HTML5，CSS以及JavaScript工具包，可以用于快速創(chuàng)建原型并且建立在各種瀏覽設(shè)備上可以正常工作的網(wǎng)站和app。 GroundworkCSS擁有一個(gè)靈活，可嵌套的流式網(wǎng)格系統(tǒng)，方便你創(chuàng)建任何布局。這個(gè)框架有很多讓人印象深刻的功能，比如在平板以及移動(dòng)端上的網(wǎng)格系統(tǒng)，當(dāng)屏幕的寬度小于768或者480像素時(shí)，頁面中原本并列排版的表格列（grid column）會(huì)自動(dòng)變?yōu)楠?dú)立的行，而不是折疊在一起。另一個(gè)很酷的功能是jQuery的響應(yīng)式文本（ResponsiveText）插件，這個(gè)插件可以動(dòng)態(tài)調(diào)整頁面文字的大小以適應(yīng)瀏覽設(shè)備的屏幕大小。這個(gè)插件對(duì)于可伸縮的標(biāo)題以及創(chuàng)建響應(yīng)式表格的時(shí)候特別有用。 GroundworkCSS包含了大量的UI組件，如tabs、響應(yīng)式數(shù)據(jù)表格導(dǎo)航、按鈕、表單、響應(yīng)式導(dǎo)航控件、tiles（一套替代radio按鈕以及其他默認(rèn)表單元素的優(yōu)雅組件）、工具提示、對(duì)話框、Cycle2（一款強(qiáng)大的，響應(yīng)式的內(nèi)容滑塊）以及其他很多的有用組件。它還提供了很多矢量社交網(wǎng)絡(luò)圖標(biāo)以及圖標(biāo)字體。 你可以通過切換頁面上方的導(dǎo)航按鈕選擇不同的瀏覽設(shè)備要來查看這款框架的效果。通過這種方式，你可以測(cè)試在不同的瀏覽設(shè)備上各種組件的響應(yīng)式布局情況。 GroundworkCSS的文檔寫的非常好，并且包含著很多的示例，為了讓你更快的上手，他還提供了多種響應(yīng)式的模板。對(duì)于這款框架，唯一我可以想到的缺點(diǎn)就是不能自定義要下載的框架內(nèi)容。7. Gumby Gumby 是一款基于Sass和Compass的簡(jiǎn)單靈活并且穩(wěn)定的前端開發(fā)框架。 它的流式-固定布局（fluid-fixed layout）可以根據(jù)桌面端以及移動(dòng)設(shè)備的分辨率自動(dòng)優(yōu)化要呈現(xiàn)的網(wǎng)頁內(nèi)容。它支持多種網(wǎng)格布局，包括多列混雜的嵌套模式。Gumby提供兩套PSD的模板，方便你在12列和16列的網(wǎng)格系統(tǒng)上進(jìn)行設(shè)計(jì)。 Gumby提供了一個(gè)功能豐富的UI工具包，包括按鈕，表單，移動(dòng)端導(dǎo)航，tabs，跳轉(zhuǎn)鏈接（skip links），撥動(dòng)開關(guān)（toggles and switches，可以方便快捷地切換元素的class，而不需要進(jìn)行額外的js操作），抽屜功能（drawers），響應(yīng)式圖片以及retina圖片等等。為了緊跟最近的設(shè)計(jì)潮流，Gumby的UI元素中還包括了Metro風(fēng)格的扁平化設(shè)計(jì)，你也可以用Pretty風(fēng)格的漸變?cè)O(shè)計(jì)，或者按照你的想法糅合兩種設(shè)計(jì)風(fēng)格。該框架還提供了一套出眾的響應(yīng)式，擁有獨(dú)立分辨率的Entypo圖標(biāo)，你可以在自己的web項(xiàng)目中盡情使用。 Gumby有一個(gè)很好自定義下載選擇器，你可以自行配置各個(gè)組件的顏色，并且按自己的需求方便地下載。8. HTML KickStart HTML Kickstart 是一款可以用來方便創(chuàng)建任何布局的集合HTML5，CSS和jQuery的工具包。它提供了干凈，符合標(biāo)準(zhǔn)以及跨瀏覽器兼容的代碼。 這款框架提供了多種樣式表，包括網(wǎng)格，排版，表單，按鈕，表格，列表以及一些跨瀏覽器兼容的web組件比如JavaScript的幻燈片功能，tabs，面包屑導(dǎo)航，包含子菜單的菜單以及工具提示等等。 你可以使用99Lime UIKIT提供的UI組件來搭建你的產(chǎn)品線框圖。9. IVORY IVORY 是一款輕量，簡(jiǎn)單但是強(qiáng)大的前端框架，可以用于320到1200像素寬度的響應(yīng)式布局。它基于12列的響應(yīng)式網(wǎng)格布局，包含表格，按鈕，表格，分頁，撥動(dòng)開關(guān)，工具提示，手風(fēng)琴，選項(xiàng)卡等網(wǎng)站中常用的組件和樣式。 當(dāng)你需要一款輕量靈活，不需要額外的其他功能，并且適應(yīng)不同瀏覽設(shè)備的框架時(shí)，IVORY是你最好的選擇。10.Kube 最后，如果你的新項(xiàng)目需要一款實(shí)在的，不需要復(fù)雜的額外功能組件的，足夠簡(jiǎn)單的框架，那么 Kube 將會(huì)是你正確的選擇。Kube是一款最小化的，支持響應(yīng)式的前端框架，它沒有強(qiáng)加的樣式設(shè)計(jì)，因此給了你充分的自由來開發(fā)自己的樣式表。它提供了一些web元素的基本樣式，比如網(wǎng)格，表單，排版，表格，按鈕，導(dǎo)航，鏈接以及圖片等等。 Kube框架包括一個(gè)簡(jiǎn)潔的CSS文件用于方便地創(chuàng)建響應(yīng)式布局，還包括了兩個(gè)JS文件來完成tab以及頁面的按鈕操作。如果你希望得到Kube最大化的靈活性以及個(gè)性化定制，那么你可以下載開發(fā)者版本（developer version），這個(gè)版本包括了LESS文件（包括各種變量，mixins以及模塊）。如何選擇一款優(yōu)秀的前端開發(fā)框架？ 可以根據(jù)以下評(píng)估標(biāo)準(zhǔn)： 將根據(jù)以下標(biāo)準(zhǔn)對(duì)這些框架進(jìn)行評(píng)估： 學(xué)習(xí)曲線針對(duì)簡(jiǎn)單任務(wù)的開發(fā)效率針對(duì)復(fù)雜、特殊任務(wù)的開發(fā)效率依賴管理代碼性能/安全優(yōu)化調(diào)整的能力平臺(tái)升級(jí)/冗余能力在企業(yè)市場(chǎng)中的認(rèn)同度開發(fā)、使用SOAP和REST服務(wù)的復(fù)雜性 總結(jié)：靈活運(yùn)用框架，將會(huì)得到意想不到的效果。這個(gè)看怎么靈活運(yùn)用，有好的方案大家分享一下共同學(xué)習(xí)，進(jìn)步。學(xué)習(xí)前端，重在分享！

作為前端工程師，從前端的視角，為大家分析下微信小程序和HTML5與之間的主要區(qū)別第一條是運(yùn)行環(huán)境的不同。傳統(tǒng)的HTML5的運(yùn)行環(huán)境是瀏覽器，包括webview，而微信小程序的運(yùn)行環(huán)境并非完整的瀏覽器，大家注意，我這里寫的是“非完整的瀏覽器”，有以下幾個(gè)原因小程序的開發(fā)過程中會(huì)用到HTML5相關(guān)的技術(shù)(并非全部)小程序最后的發(fā)布上線需要微信審核，微信在不更新自身軟件的情況下可以將小程序更新到自身軟件內(nèi)，這就聯(lián)想到了React Native框架,并且已經(jīng)有開發(fā)者在微信小程序的開發(fā)工具源碼中發(fā)現(xiàn)使用了React和NodeWebkit庫官方文檔中著重強(qiáng)調(diào)了腳本內(nèi)是無法使用瀏覽器中常用的window對(duì)象和document對(duì)象（基于這一點(diǎn)，像zepto/jquery這種操作dom的庫就被完全拋棄了）所以我個(gè)人認(rèn)為，小程序的運(yùn)行環(huán)境很有可能是微信開發(fā)團(tuán)隊(duì)基于瀏覽器內(nèi)核完全重構(gòu)的一個(gè)內(nèi)置解析器，針對(duì)小程序?qū)ｉT做了優(yōu)化，配合自己定義的開發(fā)語言標(biāo)準(zhǔn)，提升了小程序的性能。不過由于微信給開發(fā)者提供了開發(fā)工具，而開發(fā)工具中也內(nèi)置了編程、調(diào)試、開發(fā)環(huán)境、發(fā)布于一身，我們也不用再探討它的最終運(yùn)行環(huán)境了，只要按照官方文檔進(jìn)行開發(fā)就可以了。并且從微信團(tuán)隊(duì)給開發(fā)者提供開發(fā)工具這一舉動(dòng)，讓我聯(lián)想到了蘋果給開發(fā)者提供的X-CODE開發(fā)工具，可以想象微信的“野心”可見一斑第二條是開發(fā)成本的不同。這里我提出了一個(gè)問題，當(dāng)我們面對(duì)一個(gè)HTML5 web開發(fā)需求時(shí)，我們需要考慮什么呢？拋去開發(fā)工具（vscode、sublimtext、Atom等）不談，大到前端框架（Angular、react、vue、backbone等）、模塊管理工具（Webpack 、Browserify 等）、任務(wù)管理工具（Grunt、Gulp等），小到UI庫選擇、接口調(diào)用工具（ajax、Fetch Api等）、瀏覽器兼容性等都要我們一一考略，再不濟(jì)用jqery插件寫H5，也要在開發(fā)過程中去尋找合適的jquery插件來配合項(xiàng)目。盡管這些工具可定制化非常高，并且提高了開發(fā)者的開發(fā)效率，但我相信項(xiàng)目開發(fā)的配置工作已經(jīng)消耗了不少精力，盡管大部分開發(fā)者都有自己的配置模板，但長(zhǎng)久以來對(duì)于項(xiàng)目中使用的各種外部庫的版本迭代、版本升級(jí)所產(chǎn)生的成本應(yīng)該也不低。而當(dāng)我們面對(duì)一個(gè)微信小程序的開發(fā)需求時(shí)，我們需要考慮什么呢？微信團(tuán)隊(duì)提供了開發(fā)者工具，并且規(guī)范了開發(fā)標(biāo)準(zhǔn)，前端常見的HTML、CSS變成了微信自定義的WXML、WXSS，WXML中盡管全部是自定義標(biāo)簽，但官方文檔中都有明確的使用介紹，相信上手應(yīng)該是非常容易的；WXSS、JSON和JS文件中的寫法稍有限制，但整體相差不多。在統(tǒng)一了這些標(biāo)準(zhǔn)之后，作為一個(gè)開發(fā)者，你會(huì)發(fā)現(xiàn)，自己只要專注寫程序就可以了：當(dāng)需要調(diào)用后端接口時(shí)，調(diào)用發(fā)起請(qǐng)求API當(dāng)需要上傳下載時(shí)，調(diào)用上傳下載API當(dāng)需要數(shù)據(jù)緩存時(shí)，調(diào)用本地存儲(chǔ)API引入地圖、使用羅盤、調(diào)用支付、調(diào)用掃碼等等功能都可以直接使用UI庫方面，框架自然帶有自家weui庫加成并且在使用這些API時(shí)，你不用再去顧慮瀏覽器兼容性，不用擔(dān)心生產(chǎn)環(huán)境中出現(xiàn)不可預(yù)料的奇妙BUG，可見微信小程序的開發(fā)成本確實(shí)相比以往的web開發(fā)低很多。第三條是獲取系統(tǒng)級(jí)權(quán)限的不同。微信小程序相對(duì)于HTML5 web應(yīng)用能獲得的系統(tǒng)權(quán)限，比如網(wǎng)絡(luò)通信狀態(tài)、數(shù)據(jù)緩存能力等，這些系統(tǒng)級(jí)權(quán)限都可以和微信小程序無縫銜接，也就是官方宣稱的擁有Native App的流暢性能，而這一點(diǎn)恰巧是HTML5 web應(yīng)用經(jīng)常被詬病的地方，這也是HTML5的大多應(yīng)用場(chǎng)景被定位在業(yè)務(wù)邏輯簡(jiǎn)單、功能單一的原因。第四條便是應(yīng)用在生產(chǎn)環(huán)境的運(yùn)行流暢度。這條無論對(duì)于用戶還是開發(fā)者來說，都是最直觀的感受。長(zhǎng)久以來，當(dāng)HTML5應(yīng)用面對(duì)復(fù)雜的業(yè)務(wù)邏輯或者豐富的頁面交互時(shí)，它的體驗(yàn)總是不盡人意，需要不斷的對(duì)項(xiàng)目?jī)?yōu)化來提升用戶體驗(yàn)。但是由于微信小程序運(yùn)行環(huán)境獨(dú)立，盡管同樣用html+css+js去開發(fā)，但配合微信的解析器最終渲染出來的是原生組件的效果，自然體驗(yàn)上將會(huì)更進(jìn)一步。你可以通過第三方開發(fā)商西里奧布科技獲取微信小程序。

H5是指第5代HTML，html5增加了一些新標(biāo)簽和新的屬性，對(duì)于移動(dòng)端開發(fā)有很大的優(yōu)勢(shì)。HTML5將會(huì)取代1999年制定的HTML 4.01、XHTML 1.0標(biāo)準(zhǔn)，以期能在互聯(lián)網(wǎng)應(yīng)用迅速發(fā)展的時(shí)候，使網(wǎng)絡(luò)標(biāo)準(zhǔn)達(dá)到符合當(dāng)代的網(wǎng)絡(luò)需求，為桌面和移動(dòng)平臺(tái)帶來無縫銜接的豐富內(nèi)容。HTML5的設(shè)計(jì)目的是為了在移動(dòng)設(shè)備上支持多媒體。新的語法特征被引進(jìn)以支持這一點(diǎn)，如video、audio和canvas 標(biāo)記。HTML5還引進(jìn)了新的功能，可以真正改變用戶與文檔的交互方式，包括：· 新的解析規(guī)則增強(qiáng)了靈活性· 新屬性· 淘汰過時(shí)的或冗余的屬性· 一個(gè)HTML5文檔到另一個(gè)文檔間的拖放功能· 離線編輯· 信息傳遞的增強(qiáng)· 詳細(xì)的解析規(guī)則· 多用途互聯(lián)網(wǎng)郵件擴(kuò)展（MIME）和協(xié)議處理程序注冊(cè)· 在SQL數(shù)據(jù)庫中存儲(chǔ)數(shù)據(jù)的通用標(biāo)準(zhǔn)（Web SQL）

經(jīng)常有朋友找我咨詢H5的問題，但是在和他們溝通的過程中，我發(fā)現(xiàn)很多人對(duì)H5的理解都是停留在用戶層面，邀請(qǐng)函、小游戲、品牌展示、抽獎(jiǎng)等等。其實(shí)如果上升到營(yíng)銷層面的話，僅在用戶層面去思考是遠(yuǎn)遠(yuǎn)不夠的，因?yàn)槿魏蝹鞑ザ家紤]有效性的問題，如果100w pv帶來的只是刷屏效果，而對(duì)品牌帶不來任何有效轉(zhuǎn)化，這樣的傳播顯然是不成功的。隨著微信用戶增多、H5小游戲、H5大翻頁，到H5站點(diǎn)、H5營(yíng)銷。在微信上內(nèi)容的數(shù)量和樣式的逐漸增多，下面給大家介紹借助 “布谷鳥” 這一個(gè)在線制作工具，可以輕松的制作出炫酷的微信h5頁面。點(diǎn)擊制作欄目，進(jìn)入模板選擇頁1：選擇空模板，自由創(chuàng)作、選擇主題模板，更快速的創(chuàng)作出炫麗的展示。預(yù)覽樹操作2：顯示的頁面的顯示順序；右鍵調(diào)整頁面的顯示順序；3、點(diǎn)擊頁面右上角的X,可以把不需要的頁面刪除。4.功能—添加修改文字1、添加文字：點(diǎn)擊右側(cè)的文字選項(xiàng)→主編輯區(qū)會(huì)出現(xiàn)文字輸入框→雙擊修改2、文字屬性修改：右側(cè)文字屬性修改選項(xiàng)，包括字體種類，字體大小、顏色等等。功能—添加修改按鈕添加按鍵：點(diǎn)擊右側(cè)按鈕選項(xiàng)→點(diǎn)擊編輯區(qū)的按鈕→修改文字、鏈接5.功能—添加修改底圖1、修改背景顏色：點(diǎn)擊右側(cè)底圖選項(xiàng)→選擇顏色2、上傳底圖：點(diǎn)擊右側(cè)底圖選項(xiàng)→點(diǎn)擊上傳按鈕→確定6：保存。生成1、添加標(biāo)題、描述、縮略圖2、生成的二維碼和鏈接可以用于分享到微信、微博等3、點(diǎn)擊生成按鈕，即完成了一個(gè)作品的制作過程。歡迎大家使用，免費(fèi)的模板。

　　一、Adobe Edge　　目前還處于預(yù)覽階段的Adobe Edge是用HTML5、CSS、JavaScript開發(fā)動(dòng)態(tài)互動(dòng)內(nèi)容的設(shè)計(jì)工具。內(nèi)容可以同時(shí)兼容移動(dòng)設(shè)備和桌面電腦。Edge的一個(gè)重要功能是Web工具包界面，方便確保頁面在不同瀏覽器中的架構(gòu)一致性，此外Edge還將整合TypeKit這樣的字體服務(wù)。　　動(dòng)畫和圖形可以添加到HTML元素中，程序也能通過Edge自身的代碼片段庫或者JavaScript代碼進(jìn)行擴(kuò)展。動(dòng)畫可以在獨(dú)立的時(shí)間線上進(jìn)行嵌套，還能實(shí)現(xiàn)互動(dòng)功能。符合可以服用并通過API和代碼片段控制。通過Edge設(shè)計(jì)的內(nèi)容可以兼容iOS和Android設(shè)備，也可以運(yùn)行在火狐、Chrome、Safari和IE9等主流瀏覽器?！　《?、Adobe Dreamweaver CS6　　Adobe Dreamweaver CS6作為一個(gè)Web設(shè)計(jì)軟件，提供了對(duì)HTML網(wǎng)站和移動(dòng)程序的可視化編輯界面。其Fluid Grid排版系統(tǒng)整合CSS樣式表功能，提供自適應(yīng)版面的跨平臺(tái)兼容性。開發(fā)者可以完全實(shí)現(xiàn)Web設(shè)計(jì)的可視化操作，無需為代碼所困?！　∮脩舨坏€能在Live View中預(yù)覽，還提供多屏幕預(yù)覽功能。開發(fā)者可以通過MultiScreen預(yù)覽面板查看HTML5內(nèi)容的渲染效果。Live View通過WebKit渲染引擎支持HTML5?！　∪?、Adobe ColdFusion 10　　ColdFusion是用來開發(fā)企業(yè)Web程序的服務(wù)器端技術(shù)，通過Websockets、互動(dòng)表單、視頻和地理標(biāo)簽等HTML5技術(shù)創(chuàng)建富媒體用戶體驗(yàn)?！　∷?、Sencha Architect 2　　在開發(fā)移動(dòng)和桌面應(yīng)用的工具中，Sencha的定位是HTML5可視化應(yīng)用開發(fā)。開發(fā)團(tuán)隊(duì)可以在一個(gè)單一集成的環(huán)境中完成應(yīng)用的設(shè)計(jì)、開發(fā)和部署。開發(fā)者還可以開發(fā)Sencha Touch2和Ext JS4 JavaScript應(yīng)用，并實(shí)時(shí)預(yù)覽?！　∥?、Sencha Touch 2　　Sencha Touch2是移動(dòng)應(yīng)用框架，也被看作是Sencha的HTML5平臺(tái)。開發(fā)者可以用它開發(fā)面向iOS、Android和Blackberry、Kindle Fire等多種平臺(tái)的移動(dòng)應(yīng)用?！　×?、Dojo Foundation Maqetta　　來自于IBM的一個(gè)項(xiàng)目，Dojo Foundation Maqetta是為桌面和移動(dòng)設(shè)備開發(fā)HTML5應(yīng)用的開源工具，支持在瀏覽器中查看HTML5界面。用戶體驗(yàn)設(shè)計(jì)師可以通過拖放組裝UI樣板　　七、微軟Visual Studio 2010 ServicePack 1　　雖然一開始并不支持HTML5，但微軟在2011年三月發(fā)布的Visual Studio 2010 SP1中提供了IntelliSense，追加了針對(duì)HTML5的一些元素?！　“恕etBrains WebStorm 4.0　　作為擁有HTML編輯器的JavaScript集成開發(fā)環(huán)境，WebStorm4.0提供了開發(fā)web應(yīng)用的HTML5樣板。開發(fā)者可以在創(chuàng)建HTML文檔時(shí)可獲得對(duì)HTML5文件的支持。例如砍伐者鍵入。開發(fā)者還可以在chrome瀏覽器中實(shí)時(shí)預(yù)覽HTML文檔?！　【?、Google Web Toolkit　　該開發(fā)工具用于開發(fā)瀏覽器應(yīng)用，但庫中支持很多HTML5功能。包括對(duì)客戶端或web存儲(chǔ)的支持。其他HTML5功能還包括支持Canvas可視化，以及音頻和視頻widget。　　十、DCloud HBuilder　　HBuilder是當(dāng)前最快的HTML開發(fā)工具，強(qiáng)大的代碼助手幫你快速完成開發(fā)，最全的語法庫和瀏覽器兼容性數(shù)據(jù)讓瀏覽器碎片化不再頭痛。

指的是 HTML5 ；HTML5本身是由W3C推薦出來的，它的開發(fā)是通過谷歌、蘋果，諾基亞、中國(guó)移動(dòng)等幾百家公司一起醞釀的技術(shù)，這個(gè)技術(shù)最大的好處在于它是一個(gè)公開的技術(shù)。換句話說，每一個(gè)公開的標(biāo)準(zhǔn)都可以根據(jù)W3C的資料庫找尋根源。另一方面，W3C通過的HTML5標(biāo)準(zhǔn)也就意味著每一個(gè)瀏覽器或每一個(gè)平臺(tái)都會(huì)去實(shí)現(xiàn)。HTML5的設(shè)計(jì)目的是為了在移動(dòng)設(shè)備上支持多媒體。新的語法特征被引進(jìn)以支持這一點(diǎn)，如video、audio和canvas 標(biāo)記。HTML5還引進(jìn)了新的功能，可以真正改變用戶與文檔的交互方式；用HTML5的優(yōu)點(diǎn)主要在于，這個(gè)技術(shù)可以進(jìn)行跨平臺(tái)的使用。比如你開發(fā)了一款HTML5的游戲，你可以很輕易地移植到UC的開放平臺(tái)、Opera的游戲中心、Facebook應(yīng)用平臺(tái)，甚至可以通過封裝的技術(shù)發(fā)放到App Store或Google Play上，所以它的跨平臺(tái)性非常強(qiáng)大，這也是大多數(shù)人對(duì)HTML5有興趣的主要原因。