国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

寫在前面：

由于業(yè)務(wù)需要，接觸到一個(gè)Hybrid APP混合開(kāi)發(fā)的項(xiàng)目。當(dāng)時(shí)是第一次接觸混合開(kāi)發(fā)，有一些經(jīng)驗(yàn)和總結(jié)，歡迎各位一起交流學(xué)習(xí)~

1、混合開(kāi)發(fā)概述

Hybrid App主要以JS Native兩者相互調(diào)用為主，從開(kāi)發(fā)層面實(shí)現(xiàn)“一次開(kāi)發(fā)，多處運(yùn)行”的機(jī)制，成為真正適合跨平臺(tái)的開(kāi)發(fā)。Hybrid App兼具了Native App良好用戶體驗(yàn)的優(yōu)勢(shì)，也兼具了Web App使用HTML5跨平臺(tái)開(kāi)發(fā)低成本的優(yōu)勢(shì)。

目前已經(jīng)有眾多Hybrid App開(kāi)發(fā)成功應(yīng)用，比如美團(tuán)、愛(ài)奇藝、微信等知名移動(dòng)應(yīng)用，都是采用Hybrid App開(kāi)發(fā)模式。

2、移動(dòng)應(yīng)用開(kāi)發(fā)的三種方式比較

移動(dòng)應(yīng)用開(kāi)發(fā)的方式，目前主要有三種：

• Native App： 本地應(yīng)用程序（原生App）
• Web App：網(wǎng)頁(yè)應(yīng)用程序（移動(dòng)web）
• Hybrid App：混合應(yīng)用程序（混合App）

圖1：三種移動(dòng)應(yīng)用開(kāi)發(fā)方式

如圖1所示，三種移動(dòng)應(yīng)用開(kāi)發(fā)方式具體比較如表2所示：

表2：三種移動(dòng)應(yīng)用開(kāi)發(fā)方式比較

3、混合開(kāi)發(fā)應(yīng)用場(chǎng)景

（1）折中考慮——如果企業(yè)使用 Hybrid 開(kāi)發(fā)方法，就能集Native 和web兩者之所長(zhǎng)。一方面，Native 讓開(kāi)發(fā)者可以充分利用現(xiàn)代移動(dòng)設(shè)備所提供的全部不同的特性和功能。另一方面，使用 Web 語(yǔ)言編寫的所有代碼都可以在不同的移動(dòng)平臺(tái)之間共享，使得開(kāi)發(fā)和日常維護(hù)過(guò)程變得集中式、更簡(jiǎn)短、更經(jīng)濟(jì)高效。

（2）內(nèi)部技能——許多企業(yè)都擁有Web 開(kāi)發(fā)技能。如果選擇 Hybrid 開(kāi)發(fā)方法，在合適解決方案的支持下，Web 開(kāi)發(fā)者只要僅僅運(yùn)用 HTML、CSS 和 JavaScript 等 Web 技能，就能構(gòu)建 App，同時(shí)提供 Native 用戶體驗(yàn)。

（3）考慮未來(lái)——HTML5的可用性和功能都在迅速改進(jìn)。許多分析師預(yù)測(cè)，它可能會(huì)成為開(kāi)發(fā)前端 App 的默認(rèn)技術(shù)。如果用 HTML 來(lái)編寫 App 的大部分代碼，并且只有在需要時(shí)才使用 Native 代碼，公司就能確保他們今天的投入在明天不會(huì)變得過(guò)時(shí)，因?yàn)?nbsp;HTML 功能變得更豐富，可以滿足現(xiàn)代企業(yè)一系列更廣泛的移動(dòng)要求。

4、混合開(kāi)發(fā)框架和層次結(jié)構(gòu)圖

混合開(kāi)發(fā)結(jié)構(gòu)圖

1）移動(dòng)終端web殼（以下簡(jiǎn)稱“殼”）：殼是使用操作系統(tǒng)的 API 來(lái)創(chuàng)建嵌入式 HTML的渲染引擎。殼主要功能是定義Android應(yīng)用程序與網(wǎng)頁(yè)之間的接口，允許網(wǎng)頁(yè)中的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。

混合開(kāi)發(fā)層次結(jié)構(gòu)圖

1） 頁(yè)面加載

1. 頁(yè)面容器（XdjaWebView）類，是整個(gè)框架的核心和基礎(chǔ)，主要用來(lái)實(shí)現(xiàn)頁(yè)面的加載，以及對(duì)頁(yè)面加載完成后的后續(xù)操作提供支持，例如：文件下載、js支持、文件上傳，數(shù)據(jù)緩存、進(jìn)度條等；
2. 頁(yè)面加載接口：對(duì)頁(yè)面的加載過(guò)程進(jìn)行跟蹤；例如：頁(yè)面加載進(jìn)度百分比，頁(yè)面開(kāi)始加載、頁(yè)面加載出錯(cuò)、頁(yè)面加載完成等

2） JS調(diào)用Android功能

1. 網(wǎng)頁(yè)：頁(yè)面調(diào)用js接口中的具體方法；
2. JS接口：調(diào)用android接口中一一對(duì)應(yīng)的具體方法；
3. android接口：直接調(diào)用框架中集成的功能，或者通過(guò)框架接口在應(yīng)用系統(tǒng)中自定義功能（例如，退出、返回鍵響應(yīng)等)；其中升級(jí)功能的返回結(jié)果或者過(guò)程信息，可以在客戶端中通過(guò)升級(jí)接口獲取。
4. XdjaClientHelper：如果需要將框架中的方法返回值通知給js方法，你們可以通過(guò)XdjaClientHelper類來(lái)實(shí)現(xiàn)；

3）應(yīng)用系統(tǒng)調(diào)用JS功能

應(yīng)用系統(tǒng)通過(guò)XdjaClientHelper來(lái)實(shí)現(xiàn)對(duì)js功能的調(diào)用；

4） 應(yīng)用系統(tǒng)調(diào)用HDF功能

應(yīng)用系統(tǒng)可以調(diào)用框架集成的工具類、消息提示框、升級(jí)模塊以及手機(jī)上常見(jiàn)的打電話發(fā)短信等功能。

5、性能優(yōu)化

1） 單個(gè)頁(yè)面

登錄、首頁(yè)以及共用代碼（樣式文件、JS文件、頁(yè)面加載loading代碼）等放在index頁(yè)面里。頁(yè)面展示前顯示fake頁(yè)面（過(guò)場(chǎng)頁(yè)面），首屏加載完后，fake頁(yè)面消失。

頁(yè)面雖然按照業(yè)務(wù)模塊分為不同的頁(yè)面，但是展示的時(shí)候會(huì)在同一個(gè)頁(yè)面即index頁(yè)面展示。具體的說(shuō)，需要某個(gè)功能頁(yè)面的時(shí)候?qū)㈨?yè)面以AJAX的形式請(qǐng)求到index頁(yè)面，使用完畢刪除。

使用一個(gè)頁(yè)面，公共的CSS和JS只會(huì)加載一次。

2）CSS、JavaScript

在本次混合開(kāi)發(fā)框架開(kāi)發(fā)中，CSS全部寫在一個(gè)文件里。

CSS和Jquery Mobile的相關(guān)文件寫在index頁(yè)面頭部，其余公用JS等寫在index頁(yè)面底部。防止JS阻塞頁(yè)面加載。各業(yè)務(wù)邏輯JS寫在各業(yè)務(wù)頁(yè)面的底部。

開(kāi)發(fā)完成后，CSS和JS需要進(jìn)行壓縮，減少用戶使用時(shí)初次請(qǐng)求時(shí)間。

3） @font-face

本次混合開(kāi)發(fā)中使用@font-face來(lái)實(shí)現(xiàn)圖標(biāo)字體化，統(tǒng)一控制圖標(biāo)的顏色和大小。

使用@font-face優(yōu)點(diǎn)：減少頁(yè)面因使用圖片而帶來(lái)的流量，大大縮短頁(yè)面響應(yīng)時(shí)間；圖標(biāo)可以隨意改變大小和顏色，而不會(huì)導(dǎo)致失真。

使用時(shí)注意：所有的圖標(biāo)需要是矢量的SVG格式。

使用限制：只適用于純色扁平化的圖標(biāo)。背景圖等比較復(fù)雜的圖片仍然使用圖片。

4） 本地存儲(chǔ)LocalStorage

HTML5本地存儲(chǔ)LocalStorage，在混合開(kāi)發(fā)中主要用來(lái)存儲(chǔ)最近查詢記錄等。

拿首頁(yè)最近查詢來(lái)說(shuō)，用戶每次在綜合查詢中點(diǎn)擊一個(gè)模塊，通過(guò)LocalStorage將圖標(biāo)和對(duì)應(yīng)的功能名字存儲(chǔ)起來(lái)，如果用戶不清除，LocalStorage中的數(shù)據(jù)是一直存在本地的。下次打開(kāi)應(yīng)用的時(shí)候從LocalStorage中讀取最近查詢記錄等。

使用LocalStorage的好處是，不進(jìn)行后臺(tái)交互，速度快。

5）異步AJAX

本次開(kāi)發(fā)中多處實(shí)現(xiàn)都是通過(guò)使用AJAX。首先，顯示頁(yè)面時(shí)，先顯示框架，然后異步加載內(nèi)容；其次，分頁(yè)功能中，先顯示部分簡(jiǎn)項(xiàng)列表，上拉獲取更多內(nèi)容。再次，每打開(kāi)一個(gè)新功能，頁(yè)面以AJAX的形式獲取新頁(yè)面的內(nèi)容并展示出來(lái)。

異步AJAX，交互體驗(yàn)更好。從性能的角度考慮，速度也更快。