【尚武科技APP開發(fā)原創(chuàng)內(nèi)容】這段時(shí)間石家莊很多APP開發(fā)的客戶做的一次分享會(huì)上很多客戶，首先我們應(yīng)該知道混合開發(fā)應(yīng)用場景到底是什么，為什么要用混合開發(fā)：1、集合優(yōu)勢——如用 Hybrid 開發(fā)方法，就能集Native 和web兩者之所長。一方面，Native 讓開發(fā)者可以充分利用設(shè)備所提供的全部不同的特性和功能。另一方面，Web 語言編寫的所有代碼都可以在不同的移動(dòng)平臺(tái)使用，使得開發(fā)和日常維護(hù)過程變得集中式、更簡短、更經(jīng)濟(jì)高效。2、HTML5的可用性和功能都在迅速改進(jìn)。會(huì)成為開發(fā)前端 App 的默認(rèn)技術(shù)。用 HTML 來編寫 App 的大部分代碼，在需要時(shí)才使用 Native 代碼，確保今天的投入在明天不會(huì)變得過時(shí)， HTML 功能變豐富，可以滿足現(xiàn)代企業(yè)一系列更廣泛的要求。
接下來系統(tǒng)的了解一下混合開發(fā)框架和層次結(jié)構(gòu)圖
APP混合開發(fā)結(jié)構(gòu)圖
1）移動(dòng)終端web殼：是使用操作系統(tǒng)的 API 來創(chuàng)建嵌入式 HTML的渲染引擎。主要功能是定義Android應(yīng)用程序與網(wǎng)頁之間的接口，允許網(wǎng)頁中的JavaScript調(diào)用Android應(yīng)用程序，提供基于web的應(yīng)用程序的Android API，將Web嵌入到Android應(yīng)用程序中。
2）前端交互js：包括基礎(chǔ)功能js和業(yè)務(wù)功能js。
3）前端適配器：適配不同的終端：Pad、android、ios、wap。
接下來我們最關(guān)心的莫過于性能優(yōu)化的問題了：
1、 單個(gè)頁面，我們觀察登錄、首頁以及共用代碼（樣式文件、JS文件、頁面加載loading代碼）等放在index頁面里。頁面展示前顯示fake頁面（過場頁面），首屏加載完后，fake頁面消失。頁面雖然按照業(yè)務(wù)模塊分為不同的頁面，但是展示的時(shí)候會(huì)在同一個(gè)頁面即index頁面展示。具體的說，需要某個(gè)功能頁面的時(shí)候?qū)㈨撁嬉訟JAX的形式請(qǐng)求到index頁面，使用完畢刪除。
使用一個(gè)頁面，公共的CSS和JS只會(huì)加載一次。
2）CSS、JavaScript
一般情況下，在本次混合開發(fā)框架開發(fā)中，CSS全部寫在一個(gè)文件里。CSS和Jquery Mobile的相關(guān)文件寫在index頁面頭部，其余公用JS等寫在index頁面底部。防止JS阻塞頁面加載。各業(yè)務(wù)邏輯JS寫在各業(yè)務(wù)頁面的底部。開發(fā)完成后，CSS和JS需要進(jìn)行壓縮，減少用戶使用時(shí)初次請(qǐng)求時(shí)間。這個(gè)是開發(fā)很關(guān)鍵的因素。
3） @font-face
混合開發(fā)中使用@font-face來實(shí)現(xiàn)圖標(biāo)字體化，統(tǒng)一控制圖標(biāo)的顏色和大小。優(yōu)點(diǎn)在于可以：減少頁面因使用圖片而帶來的流量，大大縮短頁面響應(yīng)時(shí)間；圖標(biāo)可以隨意改變大小和顏色，而不會(huì)導(dǎo)致失真。
4） 本地存儲(chǔ)LocalStorage，HTML5本地存儲(chǔ)LocalStorage，在混合開發(fā)中主要用來存儲(chǔ)最近查詢記錄等。首頁最近查詢來說，用戶每次在綜合查詢中點(diǎn)擊一個(gè)模塊，通過LocalStorage將圖標(biāo)和對(duì)應(yīng)的功能名字存儲(chǔ)起來，如果用戶不清除，LocalStorage中的數(shù)據(jù)是一直存在本地的。下次打開應(yīng)用的時(shí)候從LocalStorage中讀取最近查詢記錄等。這樣可以大大的優(yōu)化整個(gè)流程。
使用LocalStorage的好處是，不進(jìn)行后臺(tái)交互，速度快。
5）異步AJAX
通過使用AJAX，顯示頁面時(shí)，先顯示框架，然后異步加載內(nèi)容；其次，分頁功能中，先顯示部分簡項(xiàng)列表，上拉獲取更多內(nèi)容。再次，每打開一個(gè)新功能，頁面以AJAX的形式獲取新頁面的內(nèi)容并展示出來。交互體驗(yàn)更好。從性能的角度考慮，速度也更快。
今天我們比較系統(tǒng)的讓用戶從系統(tǒng)結(jié)構(gòu)上面去了解APP混合開發(fā)框架的體系結(jié)構(gòu)，就是讓用戶更清晰的認(rèn)識(shí)混合開發(fā)和更深入了解。