【51CTO.com原創(chuàng)稿件】51CTO攜手APICloud為廣大開(kāi)發(fā)者分享“移動(dòng)互聯(lián)網(wǎng)產(chǎn)品中如何用好HTML5”，邀請(qǐng)到APICLoud技術(shù)專家許志鋒老師做直播分享課。內(nèi)容涵蓋移動(dòng)互聯(lián)網(wǎng)時(shí)代產(chǎn)品的整體架構(gòu)，HTML5 For App 需要功能擴(kuò)展、優(yōu)化渲染、開(kāi)發(fā)技巧、跨平臺(tái)產(chǎn)品選取等。

直播間：QQ群312724475

內(nèi)容簡(jiǎn)介：

1、移動(dòng)互聯(lián)網(wǎng)時(shí)代產(chǎn)品的整體架構(gòu)

2、HTML5 For App 需要功能擴(kuò)展

3、HTML5 For App 需要優(yōu)化渲染

4、HTML5 For App 一些開(kāi)發(fā)技巧

5、HTML5 For App 跨平臺(tái)產(chǎn)品

一、移動(dòng)互聯(lián)網(wǎng)時(shí)代產(chǎn)品的整體架構(gòu)

移動(dòng)互聯(lián)網(wǎng)時(shí)代下的產(chǎn)品整體架構(gòu)，一種理想的架構(gòu)是端到端架構(gòu)，客戶端到云端?？蛻舳藢Ｗa(chǎn)品功能、UI展示以及用戶體驗(yàn)；云端提供數(shù)據(jù)及服務(wù)，兩者之間通過(guò)開(kāi)放API進(jìn)行交互，耦合度越來(lái)越低。

移動(dòng)互聯(lián)網(wǎng)背景下，一個(gè)典型的產(chǎn)品其系統(tǒng)架構(gòu)核心應(yīng)該是API，云端通常需要提供基本數(shù)據(jù)服務(wù)（NoSQL、MySQL等），系統(tǒng)服務(wù)（Redis、消息隊(duì)列等），聚合第三方開(kāi)放平臺(tái)服務(wù)（IM、PUSH、支付、LBS等）等能力，并通過(guò)開(kāi)放標(biāo)準(zhǔn)規(guī)范的API對(duì)外提供服務(wù)能力。
而客戶端通常需要包含3個(gè)端，APP端，Web端（即H5端）和微信端（微信公眾號(hào)）。APP功能全面，滿足所有功能需求，但開(kāi)發(fā)周期長(zhǎng)，成本高，難為護(hù)；H5網(wǎng)站開(kāi)發(fā)簡(jiǎn)單，周期短，版本迭代速度快，成本低，但功能相比APP存在不足；微信公眾號(hào)其實(shí)也是H5，但運(yùn)行在封閉的微信體系內(nèi)，相比H5功能限制更大。

二、HTML5 For App 需要功能擴(kuò)展

接下來(lái)向大家分享，如何避開(kāi)H5的不足，將H5有效的應(yīng)用于APP中，實(shí)現(xiàn)APP的低成本快速開(kāi)發(fā)。

如何將HTML5***的應(yīng)用到APP中，我們認(rèn)為，HTML5在現(xiàn)階段無(wú)法直接應(yīng)用于APP，它需要進(jìn)行擴(kuò)展。

HTML5現(xiàn)階段還存在種種不足。HTML5作為一個(gè)工業(yè)標(biāo)準(zhǔn)，是一個(gè)靜態(tài)標(biāo)準(zhǔn)，迭代速度非常慢，遠(yuǎn)遠(yuǎn)滯后于OS、硬件技術(shù)的發(fā)展，同時(shí)微軟，Google，蘋果等瀏覽器引擎廠商各自為據(jù)，多年以來(lái)形成的商業(yè)體系難以在短時(shí)間內(nèi)憑借一項(xiàng)標(biāo)準(zhǔn)的更新而改變，這造成了HTML5在實(shí)際使用過(guò)程中的渲染、動(dòng)畫、交互不理想等兼容問(wèn)題，同時(shí)HTML5是一項(xiàng)與平臺(tái)無(wú)關(guān)的靜態(tài)標(biāo)準(zhǔn)，基本無(wú)擴(kuò)展性（比如接入推送、支持IoT等）。尤其在移動(dòng)端，更是因?yàn)橛布O(shè)備的參差不齊，致使用HTML5技術(shù)實(shí)現(xiàn)的web產(chǎn)品功能及體驗(yàn)遠(yuǎn)不及APP。

我們認(rèn)為可以通過(guò)對(duì)HTML5進(jìn)行原生模塊擴(kuò)展，并且開(kāi)放API的方式，使用HTML5 + 原生模塊的APP開(kāi)發(fā)模式來(lái)彌補(bǔ)HTML5的不足，解決HTML5功能有限，且無(wú)法擴(kuò)展的問(wèn)題。

需要擴(kuò)展的模塊包括UI（ListView、scrollPictrue等）、設(shè)備本地功能（攝像頭、重力感應(yīng)等）、數(shù)據(jù)存儲(chǔ)（fs、db等）、網(wǎng)絡(luò)（http、socket、download等）、第三方服務(wù)（支付寶、微信、融云、機(jī)制云等）等等。通過(guò)封裝模塊擴(kuò)展API給JS調(diào)用，原生APP具備的功能，HTML5也完全可以實(shí)現(xiàn)。

三、HTML5 For App 需要優(yōu)化渲染

另外一方面，為解決HTML5渲染效率低的問(wèn)題，提升用戶體驗(yàn)，還需對(duì)HTML5進(jìn)行渲染優(yōu)化。我們從HTML5和原生APP的渲染原理兩方面進(jìn)行介紹。

簡(jiǎn)單介紹一下瀏覽器引擎如何渲染一張HTML5頁(yè)面。瀏覽器渲染HTML5頁(yè)面通常分為5個(gè)步驟：
1、從遠(yuǎn)程或者本地獲得html，html包含body、header、footer等元素
2、將html解析為dom數(shù)據(jù)結(jié)構(gòu)
3、根據(jù)dom元素的屬性進(jìn)行排版運(yùn)算，實(shí)現(xiàn)layout數(shù)據(jù)結(jié)構(gòu)，用于最終渲染
4、將layout流推送給渲染硬件（GPU、CPU等）
5、最終html被畫到顯示設(shè)備上，如手機(jī)屏幕等

APP的界面渲染由系統(tǒng)提供或者開(kāi)發(fā)者自定義的各種視圖組件構(gòu)成，比如ActionButton、TabBar、ImageView等。通過(guò)開(kāi)發(fā)人員定義的屬性實(shí)現(xiàn)視圖組件的排版，定位以及層次和區(qū)域的劃分，最終展示到設(shè)備屏幕。

APICloud則將HTML5及原生APP兩者的渲染結(jié)合到一起，形成一種混合渲染機(jī)制。
APICloud APP的UI布局由 HTML5 + 原生UI模塊 構(gòu)成，既使用到HTML5簡(jiǎn)單快速開(kāi)發(fā)的能力，又結(jié)合原生UI組件的高效渲染能力，使得APP的開(kāi)發(fā)過(guò)程變得簡(jiǎn)單容易，同時(shí)功能和體驗(yàn)達(dá)到原生效果 。

四、HTML5 For App 一些開(kāi)發(fā)技巧

下面分享一些使用HTML5進(jìn)行APP開(kāi)發(fā)過(guò)程中，可有效提升APP性能和用戶體驗(yàn)的技巧。

充分尊重和利用HTML5的特性。去掉瀏覽器默認(rèn)樣式（比如輸入框的focus框）；可點(diǎn)擊區(qū)域應(yīng)使用div而非a標(biāo)簽；使用語(yǔ)義化的標(biāo)簽，如header、footer等，有利于代碼的可讀性和維護(hù)；充分發(fā)揮HTML5及CSS3的新特性，比如Video標(biāo)簽播放多媒體，比如CSS3圓角等。

***屏幕適配。每個(gè)html頁(yè)面都必須加viewport，自適應(yīng)設(shè)備屏幕；UI出圖尺寸使用1280×720；量圖標(biāo)準(zhǔn)適用2倍圖，即1280 / 2 | 720 / 2；CSS布局應(yīng)使用box布局，自動(dòng)適應(yīng)屏幕。

避免使用一些功能大而全的重型JS/CSS框架，可以使用一些簡(jiǎn)單的，移動(dòng)優(yōu)先場(chǎng)景下的框架，建議自己總結(jié)封裝合適APP使用的框架。

加速網(wǎng)絡(luò)數(shù)據(jù)加載和提升數(shù)據(jù)交互體驗(yàn)。使用api.ajax，實(shí)時(shí)監(jiān)聽(tīng)網(wǎng)絡(luò)狀態(tài)，合理使用下拉刷新和加載更多，并適當(dāng)?shù)倪M(jìn)行數(shù)據(jù)緩存，在斷網(wǎng)的情況下也可以保證有離線數(shù)據(jù)。

合理的使用圖片。根據(jù)不同場(chǎng)景使用原圖和縮略圖，減少內(nèi)存占用；圖片的大小應(yīng)盡量與img標(biāo)簽的寬高屬性匹配，減少圖片縮放帶來(lái)的性能損失；可借助第三方存儲(chǔ)處理圖片，比如根據(jù)不同屏幕的手機(jī)使用不同分辨率的圖片。

提升點(diǎn)擊速度，優(yōu)化事件響應(yīng)。響應(yīng)click事件的元素應(yīng)增加tapmode屬性，可消除HTML5默認(rèn)的300毫秒延遲；使用擴(kuò)展手勢(shì)事件、全局事件管理響應(yīng)操作；使用tapmode實(shí)現(xiàn)原生APP的點(diǎn)擊效果。

遵循系統(tǒng)特性。應(yīng)當(dāng)在適當(dāng)?shù)臅r(shí)候更新UI，理解窗口切換和HTML5渲染之間的關(guān)系，避免在窗口動(dòng)畫過(guò)程中更新HTML5；避免body級(jí)別的背景圖片，可使用APICloud提供的原生方式高效實(shí)現(xiàn)，節(jié)省資源和復(fù)用；頁(yè)面之間傳參應(yīng)避免過(guò)大，控制在數(shù)KB級(jí)別內(nèi)。

五、HTML5 For App 跨平臺(tái)產(chǎn)品

選擇HTML5跨平臺(tái)產(chǎn)品的一些核心要素，引擎性能（能否開(kāi)發(fā)出原生APP的體驗(yàn)）、功能覆蓋范圍（能否像原生APP一樣滿足所有需求）、開(kāi)放服務(wù)集成（是否支持推送、IM、支付、LBS等第三方服務(wù)的集成）、擴(kuò)展機(jī)制（使用有標(biāo)準(zhǔn)的模塊擴(kuò)展機(jī)制）、主流開(kāi)發(fā)工具的支持（尊重開(kāi)發(fā)者使用習(xí)慣，是否使用任意HTML5開(kāi)發(fā)工具均可實(shí)施）、學(xué)習(xí)成本（學(xué)習(xí)曲線如何，是否快速入門）、開(kāi)發(fā)者社區(qū)服務(wù)（遇到問(wèn)題時(shí)是否能夠得到及時(shí)有效的技術(shù)支持）、生態(tài)完整度（比如Cordova，由adobe長(zhǎng)期支持和維護(hù)，有開(kāi)發(fā)者貢獻(xiàn)代碼）。

目前市面上主流的框平臺(tái)產(chǎn)品分為兩個(gè)方向。一個(gè)是圍繞HTML5，以HTML5+原生的混合模式，典型代表為APICloud，PhoneGap等，開(kāi)發(fā)簡(jiǎn)單，跨平臺(tái)；另一個(gè)是以中間語(yǔ)言編譯的方式，典型代表為RN、Xamarin，開(kāi)發(fā)方式為原生開(kāi)發(fā)，學(xué)習(xí)成本高，開(kāi)發(fā)復(fù)雜。

HTML5在微信開(kāi)發(fā)中的應(yīng)用：微信是一個(gè)獨(dú)立的APP，運(yùn)行于移動(dòng)設(shè)備，因此HTML5既受限于設(shè)備性能，同時(shí)受限于微信的封閉體系，因此在選擇JS/CSS框架時(shí)應(yīng)更多的考慮移動(dòng)優(yōu)先的框架。

這是一個(gè)APICloud上的典型的端到端的項(xiàng)目，該項(xiàng)目為Intel硬享公社，***別的項(xiàng)目，主要為Intel在IC領(lǐng)域提供垂直服務(wù)。他包括服務(wù)端 + APP端 + 微信端 + HTML5端。其中APP端通過(guò)APICloud使用HTML5耗時(shí)一個(gè)月快速實(shí)現(xiàn)。

Q&A

1、Q：H5-君-大連：以前用的1寫的APP的代碼，怎么導(dǎo)到APICloud Studio 2 中？

A：APICloud-許志鋒：直接用APICloud Studio 2 重新檢出即可使用了。

2、Q：天津-前端-小恐龍：APICloud 未來(lái)會(huì)不會(huì)和Vue 這樣的MVVM框架整合？

A：APICloud-許志鋒：恩 ,其實(shí)現(xiàn)在 就是支持 Vue.js 的。

3、Q：Java-劉飛-南京：安全怎么保證呢？這個(gè)在手機(jī)端具體怎么弄呢？

A：APICloud-許志鋒：App 安全,可以使用HTTPS協(xié)議，必要時(shí)可以進(jìn)行雙向認(rèn)證。你搜，App 雙向認(rèn)證,簡(jiǎn)單說(shuō)就App中內(nèi)置一個(gè) HTTPS證書, 服務(wù)器也是HTTPS服務(wù)器。

4、Q：天津-前端-小恐龍：直接引入 vuejs 這個(gè)腳本這樣去使用嗎 ？

A：APICloud-許志鋒：Webpack 預(yù)編譯為.js

5、Q：天津-前端-小恐龍：APICloud的代碼如何直接轉(zhuǎn)成Web H5 有沒(méi)有相關(guān)的方法？如何直接把 App的代碼轉(zhuǎn)成Web 和H5 直接可以使用的？

A：APICloud-許志鋒：也可以把樣式寫在單獨(dú)的CSS里。

App的代碼，如果是非原生模塊部分的話，可以直接在 Web 瀏覽器里打開(kāi)。

6、Q：天津-前端-小恐龍：APICloud 如何實(shí)現(xiàn)ajax 跨域請(qǐng)求的？如果我想把App的項(xiàng)目，直接轉(zhuǎn)成一套H5的，還是要搞一個(gè)服務(wù)器 ？

A：APICloud-許志鋒：Native 就是直接拿到 Cookie 發(fā)請(qǐng)求；如果是想在 Web中用，那就得服務(wù)器本身支持跨越了，瀏覽器本身是不能跨越的 , 如果服務(wù)器不允許跨域訪問(wèn)。

7、Q：成都-前端-莽哥：我的HTML頁(yè)面，在Chrom瀏覽器里預(yù)覽是正常的，海馬模擬器中預(yù)覽上看布局就全亂了，運(yùn)用的是display：flex的布局，在APICloud里樣式都是寫在HTML里，用Postcss處理的話，有沒(méi)有方便快捷的方式？

A：APICloud-許志鋒：應(yīng)該是你寫法可能不太兼容。

8、Q：H5-君-大連：那個(gè)box布局怎么用？

A：APICloud-許志鋒：可以考慮用PostCSS處理下。

9、Q：北京-unicorn-數(shù)據(jù)：接口是Rest API。是否有Graphql ？

APICloud-許志鋒：APICloud Studio 操作說(shuō)明的視頻教程可以看這里>> 

歡迎加群學(xué)習(xí)：312724475

【51CTO原創(chuàng)稿件，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文作者和出處為51CTO.com】