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

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