1前言
隨著移動(dòng)互聯(lián)網(wǎng)技術(shù)的發(fā)展以及移動(dòng)設(shè)備計(jì)算能力的提升和普及，移動(dòng)互聯(lián)網(wǎng)應(yīng)用在人們生活中越來越不可或缺，人們使用移動(dòng)APP查找需要的各種信息，如：新聞，購(gòu)物，視頻、娛樂以及工作事項(xiàng)等已成為現(xiàn)代社會(huì)的生活常態(tài)。移動(dòng)應(yīng)用市場(chǎng)的多樣性要求開發(fā)者們及時(shí)獲取用戶需求，快速迭代出符合用戶需求的移動(dòng)應(yīng)用。原生移動(dòng)APP的開發(fā)過程中，大部分開發(fā)時(shí)間用于處理不同移動(dòng)平臺(tái)間的差異以及底層系統(tǒng)操作上，導(dǎo)致業(yè)務(wù)功能開發(fā)的時(shí)間不夠充分。針對(duì)這種困境，基于HTML5的Hybrid App開發(fā)模式，即混合應(yīng)用開發(fā)模式，兼具傳統(tǒng)原生開發(fā)模式良好用戶體驗(yàn)的優(yōu)勢(shì)以及Web開發(fā)模式跨平臺(tái)以及快速迭代的優(yōu)勢(shì)，得到了快速的發(fā)展并被開始被開發(fā)者廣泛用于解決移動(dòng)應(yīng)用快速開發(fā)以及跨平臺(tái)的需求。
2研究現(xiàn)狀
每個(gè)移動(dòng)操作系統(tǒng)都有自己的SDK，用于創(chuàng)建移動(dòng)應(yīng)用。例如，對(duì)于IOS平臺(tái)來說，開發(fā)者需使用Objective-C和Swift語言創(chuàng)建應(yīng)用，而Android系統(tǒng)的應(yīng)用編程語言是Java，使用這些語言和官方SDK創(chuàng)建的應(yīng)用稱為原生應(yīng)用。但是為了實(shí)現(xiàn)跨平臺(tái)，可以通過封裝一個(gè)中間層代理原生SDK的調(diào)用，上層應(yīng)用通過中間層代理原生SDK所提供的API，這也就是“跨平臺(tái)”應(yīng)用實(shí)現(xiàn)的基本原理。
2.1HTML5 移動(dòng) Web 應(yīng)用開發(fā)
隨著HTML5和CSS3逐漸興起，基于HTML5的應(yīng)用將對(duì)移動(dòng)互聯(lián)網(wǎng)領(lǐng)域起到巨大的影響。所謂的HTML5實(shí)際上是指包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合，這些技術(shù)強(qiáng)化了Web網(wǎng)頁的表現(xiàn)能力。目前支持HTML5的主流瀏覽器有Google Chrome、Firefox、Internet Explorer 9和10等。
2.2Hybird 移動(dòng)應(yīng)用開發(fā)的類型
無論是Android、IOS，還是Windows Phone，在它們的SDK中都包含了一個(gè)非常高級(jí)的WebView組件，借助這個(gè)組件，程序員能夠使用標(biāo)準(zhǔn)的HTML5技術(shù)實(shí)現(xiàn)Hybird應(yīng)用的設(shè)計(jì)和編碼。Hybrid移動(dòng)APP的混合主要包由兩部分組成，底層是基于設(shè)備本地能力的Native應(yīng)用，上層是基于瀏覽器Web應(yīng)用，Web端可以通過接口調(diào)用Native端封裝好的功能。無論是Native端還是Web端，都具有各自的UI和布局能力、數(shù)據(jù)交互能力和腳本調(diào)用能力等。Hybrid APP引擎和框架一般使用HTML5和Javascript作為編程語言，調(diào)用引擎封裝的底層設(shè)備能力如照相機(jī)、通訊錄、文件系統(tǒng)、傳感器以及地圖API等。HTML5和Javascript只是作為一種解析語言，真正調(diào)用的都是基于Native封裝的底層API，這是和Web APP的最大區(qū)別。
3Hybird APP引擎
Hybrid App引擎技術(shù)開發(fā)的移動(dòng)程序通過Hybrid App引擎的打包服務(wù)可以生成Android、iOS 等不同平臺(tái)移動(dòng)App，還可以生成供移動(dòng)設(shè)備Web端訪問的代碼。
圖1 Hybird App通用框架
3.1Hybird引擎架構(gòu)設(shè)計(jì)
Hybird APP引擎本質(zhì)上是一個(gè)原生應(yīng)用，使用平臺(tái)相關(guān)語言編寫，針對(duì)不同的移動(dòng)平臺(tái)都需要開發(fā)一個(gè)Hybird APP引擎，一般情況下如果需要同時(shí)支持Android平臺(tái)以及IOS平臺(tái)，則需要開發(fā)兩個(gè)Hybird APP引擎，分別運(yùn)行與這兩個(gè)平臺(tái)。Hybird APP引擎通過集成系統(tǒng)Webview瀏覽器內(nèi)核組件，起到一個(gè)類似于虛擬機(jī)的作用，將原生應(yīng)用和系統(tǒng)級(jí)應(yīng)用對(duì)上層應(yīng)用隔離起來，同時(shí)運(yùn)行于不同移動(dòng)平臺(tái)的Hybird APP引擎對(duì)上層應(yīng)用提供原生系統(tǒng)接口調(diào)用時(shí)使用統(tǒng)一的接口調(diào)用規(guī)范，從而使得上層應(yīng)用具備基本的跨平臺(tái)能力。
3.2引擎通信機(jī)制
通訊機(jī)制是Hybird APP引擎首先應(yīng)該考慮和設(shè)計(jì)的一個(gè)關(guān)鍵的功能就是Webview和Native原生代碼層之間的相互調(diào)用，比如調(diào)用攝像頭以及本地存儲(chǔ)系統(tǒng)等。Native原生代碼和H5之間的通信有兩個(gè)方向，分別是Native原生代碼調(diào)用H5代碼，以及H5代碼調(diào)用Native原生代碼。
Native原生代碼調(diào)用H5是通過調(diào)用Webview對(duì)象的“lOAdUrl”方法直接執(zhí)行Javascript代碼片段，這種調(diào)用方法類似于在瀏覽器地址欄輸入一段Javascript代碼來觸發(fā)H5端代碼的執(zhí)行，具體的調(diào)用方式如下：
webview.loadUrl("javascript:alert('hello world')")；
圖2 H5橋接協(xié)議調(diào)用Android本地代碼
H5調(diào)用Native原生代碼的主要原理是通過Webview系統(tǒng)組件攔截H5代碼發(fā)起的url請(qǐng)求，如果被攔截到的url符合H5調(diào)用Native原生代碼的約定規(guī)范，即可實(shí)現(xiàn)H5端調(diào)用Native原生代碼，這種方法本質(zhì)上是一種通過注冊(cè)私有協(xié)議實(shí)現(xiàn)系統(tǒng)調(diào)用的方法。以下代碼通過一種名字為“jsbridge://”橋接協(xié)議，具體代碼如下：
var iframe = document.createElement('iframe')；
iframe.src = 'jsbridge://class.method？[...args]'；
圖3 H5橋接協(xié)議調(diào)用Android本地代碼
3.3引擎插件機(jī)制
Hybird APP應(yīng)用都是有H5端和Native原生代碼兩個(gè)部分的程序組成的。本質(zhì)上，H5端和Native原生代碼都能完成界面開發(fā)。為了充分利用二者的優(yōu)勢(shì)，應(yīng)該盡可能地將APP的UI展現(xiàn)部分使用H5來實(shí)現(xiàn)，而對(duì)于JavaScript解釋性語言本身的性能缺陷，應(yīng)該使用Native語言進(jìn)行計(jì)算密集型、IO密集型以及安全保障等功能的實(shí)現(xiàn)，如轉(zhuǎn)場(chǎng)動(dòng)畫、多線程作業(yè)、IO網(wǎng)絡(luò)操作以及交易支付等場(chǎng)景。
一般情況下在開發(fā)引擎擴(kuò)展插件時(shí)除了需要使用Native原生代碼完成插件所需的功能之外，還需要為擴(kuò)展插件編寫對(duì)應(yīng)的JavaScript API，通過 H5 頁面中調(diào)用插件暴露的 JavaScript API觸發(fā)對(duì)應(yīng)Native原生方法的調(diào)用，原生方法計(jì)算結(jié)束之后將結(jié)果通過JSBridge返回H5端。
4Hybird應(yīng)用調(diào)試
任何應(yīng)用程序在開發(fā)過程中，應(yīng)用調(diào)試都是一個(gè)不可或缺的環(huán)節(jié)，通過調(diào)試能夠幫助開發(fā)人員準(zhǔn)確的定位程序出現(xiàn)問題的位置，以方便進(jìn)行修復(fù)。而使用Hybird模式開發(fā)的APP其H5端的程序運(yùn)行在系統(tǒng)Webview組件中，無法直接對(duì)其進(jìn)行調(diào)試，于是我們引入Weinre作為調(diào)試工具。Weinre(WebInspector Remote)是一款基于 Web Inspector(Webkit)的遠(yuǎn)程調(diào)試工具，在PC上直接調(diào)試運(yùn)行在移動(dòng)設(shè)備上的遠(yuǎn)程頁面，通過Weinre開發(fā)人員可以在PC上可以即時(shí)修改目標(biāo)網(wǎng)頁的HTML/CSS/JavaScript。Weinre 基于Web Inspector開發(fā)，兼容WebKit核心的瀏覽器，可以在Chrome/Safari瀏覽器打開Weinre客戶端進(jìn)行調(diào)試。
5結(jié)論
隨著移動(dòng)互聯(lián)網(wǎng)技術(shù)的快速發(fā)展，越來越多開發(fā)者投入到移動(dòng)端應(yīng)用開發(fā)領(lǐng)域中。但是移動(dòng)平臺(tái)操作系統(tǒng)的多樣性給APP開發(fā)者帶來了很多困難，開發(fā)一款移動(dòng)應(yīng)用需要根據(jù)運(yùn)行平臺(tái)使用不同的開發(fā)語言，開發(fā)者需要掌握多種平臺(tái)開發(fā)的技術(shù)，導(dǎo)致開發(fā)成本高和開發(fā)周期長(zhǎng)。為了解決這些問題，兼具Native App和Web App優(yōu)勢(shì)的Hybrid App開發(fā)模式被開發(fā)者廣泛采用。Hybrid開發(fā)模式的優(yōu)點(diǎn)是顯而易見的，但是這種開發(fā)模式在計(jì)算密集型應(yīng)用場(chǎng)景上效率明顯低于原生應(yīng)用，所以未來混合開發(fā)模式的研究重點(diǎn)將是針對(duì)UI流暢性和轉(zhuǎn)場(chǎng)動(dòng)畫等場(chǎng)景進(jìn)行Hybrid APP引擎優(yōu)化的工作。
核心關(guān)注：拓步ERP系統(tǒng)平臺(tái)是覆蓋了眾多的業(yè)務(wù)領(lǐng)域、行業(yè)應(yīng)用，蘊(yùn)涵了豐富的ERP管理思想，集成了ERP軟件業(yè)務(wù)管理理念，功能涉及供應(yīng)鏈、成本、制造、CRM、HR等眾多業(yè)務(wù)領(lǐng)域的管理，全面涵蓋了企業(yè)關(guān)注ERP管理系統(tǒng)的核心領(lǐng)域，是眾多中小企業(yè)信息化建設(shè)首選的ERP管理軟件信賴品牌。
轉(zhuǎn)載請(qǐng)注明出處：拓步ERP資訊網(wǎng)http://www.ezxoed.cn/
本文標(biāo)題：Hybird移動(dòng)應(yīng)用框架實(shí)現(xiàn)研究
本文網(wǎng)址：http://www.ezxoed.cn/html/solutions/14019321067.html
相關(guān)文章
