3-1-Hybrid App 走向“輕混”：剖析 WeX5 開(kāi)源高性能 H5 App 開(kāi)發(fā)框架-王潔,宋興烈

HybridApp走向“輕混”剖析WeX5開(kāi)源高性能H5App開(kāi)發(fā)框架宋興烈、王潔北京起步科技有限公司2016-4-232016-4-23nHybridApp的技術(shù)發(fā)展歷程：從“重混”到“輕混”n構(gòu)建高性能H5App開(kāi)發(fā)框架nWeX5可視化快速開(kāi)發(fā)實(shí)踐HybridApp的技術(shù)發(fā)展歷程從“重混”到“輕混”2007年6月，喬布斯發(fā)布第一代iPhone。2008年10月，Google發(fā)布第一部Android智能手機(jī)。Web成為HybridApp的首選技術(shù)技術(shù)簡(jiǎn)單、支持廣泛、開(kāi)發(fā)者眾多、更擅長(zhǎng)“炫”的頁(yè)面HybridApp=Web+Native但是在HybridApp技術(shù)發(fā)展的早期，Web的運(yùn)行性能成為主要瓶頸?。?！iPhone3G(CPU：620MHZ，RAM：256MB)為解決性能問(wèn)題HybridApp走向“重混”“重混”的優(yōu)缺點(diǎn)–提升了運(yùn)行性能–增強(qiáng)了交互體驗(yàn)–Web和Native技術(shù)交叉混雜–需要同時(shí)掌握Web和Native技術(shù)，學(xué)習(xí)難度增加–一個(gè)頁(yè)面有Web組件也有Native組件，編程調(diào)試?yán)щy隨著時(shí)代的發(fā)展，性能不再是瓶頸H5已經(jīng)可以支持復(fù)雜應(yīng)用，并擁有良好的運(yùn)行性能瀏覽器技術(shù)瀏覽器技術(shù)硬件能力無(wú)線網(wǎng)絡(luò)技術(shù)又一個(gè)偉大的公司重新定義了移動(dòng)應(yīng)用2011年1月，騰訊推出了微信；2012年8月，微信公眾平臺(tái)上線?！啊爸鼗臁笨蚣軓U了“輕混”成為HybridApp的必然選擇外殼瀏覽器+插件HTML5JavaScriptCSS3用的本質(zhì)也是H5外殼瀏覽器+插件HTML5JavaScriptCSS3用的本質(zhì)也是H5頁(yè)的運(yùn)行環(huán)供了大量的JS插件接口。H5App簡(jiǎn)單理解就是以網(wǎng)頁(yè)技術(shù)為主來(lái)實(shí)現(xiàn)的移動(dòng)應(yīng)用。H5App由網(wǎng)頁(yè)和外殼兩部分組成。網(wǎng)頁(yè)主要負(fù)責(zé)界面的顯示和交互；而外殼會(huì)內(nèi)置一個(gè)瀏覽器來(lái)提供網(wǎng)頁(yè)的運(yùn)行環(huán)境，并且會(huì)通過(guò)插件為網(wǎng)頁(yè)提供擴(kuò)展的原生調(diào)用能設(shè)備信息通訊錄地理位置Native框架的選擇ü業(yè)界最主流的開(kāi)源移動(dòng)跨端框架üHTML+CSS+JS+原生插件ü開(kāi)放式的原生插件框架ü“干凈”的輕混合跨端框架整頁(yè)刷新單頁(yè)應(yīng)用模式整頁(yè)刷新單頁(yè)應(yīng)用模式SPA(SinglePageApplication)多頁(yè)應(yīng)用模式MPA(MultiPageApplication)ww跳轉(zhuǎn)XhttpxxxshellwpagehtmlDHTML頁(yè)面資源局部刷新ID離設(shè)計(jì)時(shí)用屬性xid替代id，運(yùn)行時(shí)動(dòng)態(tài)生成idID離設(shè)計(jì)時(shí)用屬性xid替代id，運(yùn)行時(shí)動(dòng)態(tài)生成id。生成規(guī)則：xid+頁(yè)面實(shí)例標(biāo)識(shí)=id訪問(wèn)方法：this.getElementByXid(xid)、p(xid)ID突義沖突沖突ID突義沖突沖突ID突義沖突沖突ID突義沖突沖突ID突義沖突沖突每個(gè)頁(yè)面都有一個(gè)同名的css樣式文件，只作用于當(dāng)前頁(yè)面。技術(shù)實(shí)現(xiàn)：編譯時(shí)為頁(yè)面文件中每個(gè)元素的class屬性和樣式文件中的樣式選擇器都添加一個(gè)“頁(yè)面標(biāo)識(shí)”，使局部樣式文件中定義的樣式只能作用于class包含“頁(yè)面標(biāo)識(shí)”的HTML元素。RequireJS外外殼頁(yè)面test.jsdefine(test.jsdefine([],function(){return{hello:function(){alert("HelloWorld！");?模塊隔離}});require(['testrequire(['test'],function(test){test.hello(););?資源按需動(dòng)態(tài)加載?外殼Shell——負(fù)責(zé)管理所有的頁(yè)面–justep.Shell.loadPage(url,params)–justep.Shell.showPage(url,params)–justep.Shell.closePage()?卸載頁(yè)面防止內(nèi)存泄漏–卸載HTML片段–釋放組件對(duì)象?路由管理–支持前進(jìn)、后退–基于HTML5HistoryAPI實(shí)現(xiàn)–http://xxx/shell.w#page1.html服務(wù)端XBaaS(后端服務(wù))數(shù)據(jù)服務(wù)地圖VA服務(wù)端XBaaS(后端服務(wù))數(shù)據(jù)服務(wù)地圖VA第三方服務(wù)支付JSONAJAXWebSocketsocket.io移動(dòng)移動(dòng)App(安卓、蘋(píng)果)、微信App、網(wǎng)頁(yè)App客戶端客戶端XPage(頁(yè)面框架)XComponents(組件框架)XData(數(shù)據(jù)綁定)Bootstrap (統(tǒng)一樣式庫(kù))CSS3Cordova (安卓、蘋(píng)果…)NativeAPI (統(tǒng)一原生API)WeChat (微信)JavascriptRequireJSjQueryHTML5動(dòng)設(shè)備WeX5是基于HTML5的開(kāi)源跨端可視化快速開(kāi)發(fā)工具可視化頁(yè)面設(shè)計(jì)模板化快速開(kāi)發(fā)編碼、調(diào)試、發(fā)布droidAppWeChat微信)