中文字幕 日本 在线 高清,久久精品国产99精品国,超碰人人香蕉,一区二区三区无码高清视频

2017-2018年Hybrid APP混合跨平臺(tái)開(kāi)發(fā)的一些經(jīng)驗(yàn)和總結(jié)(混合app開(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)

017-2018年Hybrid

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

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

017-2018年Hybrid

表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)?HTML 功能變得更豐富,可以滿足現(xiàn)代企業(yè)一系列更廣泛的移動(dòng)要求。

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

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

017-2018年Hybrid

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)圖

017-2018年Hybrid

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)更好。從性能的角度考慮,速度也更快。

版權(quán)聲明:本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn),該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容, 請(qǐng)發(fā)送郵件至 舉報(bào),一經(jīng)查實(shí),本站將立刻刪除。

(0)
上一篇 2024年9月14日 下午1:30
下一篇 2024年9月14日 下午1:42

相關(guān)推薦