跨端開發(fā)面面談——基于WebView的Hybrid開發(fā)模式深度解析

一、引言

跨終端移動(dòng)開發(fā)是當(dāng)前熱門的話題，作為這一系列的開端，我們來深入探討基于WebView的Hybrid混合開發(fā)模式。這種模式借助原生端的WebView組件，實(shí)現(xiàn)了Native和JavaScript的雙向通信，將Web App與Mobile App相融合，開啟了混合開發(fā)的新紀(jì)元。

二、WebView Hybrid開發(fā)模式概述

對(duì)于有過混合應(yīng)用開發(fā)經(jīng)驗(yàn)的開發(fā)者來說，基于WebView的Hybrid開發(fā)模式并不陌生。這種模式已經(jīng)廣泛應(yīng)用于各大廠商的平臺(tái)型應(yīng)用，如微信、手Q等。它通過原生端的WebView組件，實(shí)現(xiàn)了Web技術(shù)和移動(dòng)原生應(yīng)用的完美結(jié)合。

三、JSBridge的角色與原理

在基于WebView的Hybrid開發(fā)模式中，JSBridge作為連接Native和JavaScript的橋梁，扮演著至關(guān)重要的角色。它是溝通原生代碼和JavaScript代碼的紐帶，使得兩者之間的數(shù)據(jù)交互成為可能。

從前端角度看，JSBridge可能被理解為在WebView中注入的全局變量，用于調(diào)用原生API的JavaScript工具庫。實(shí)際上JSBridge的設(shè)計(jì)實(shí)現(xiàn)已經(jīng)超越了這一層次。它是對(duì)底層通道的抽象封裝，包括原生和JavaScript兩側(cè)的內(nèi)容。在原生端，需要考慮系統(tǒng)API差異，對(duì)上層調(diào)用提供統(tǒng)一接口；在JavaScript端，需要考慮調(diào)用方式、請(qǐng)求管理等內(nèi)容。

四、基于WebView的Hybrid開發(fā)模式的應(yīng)用與優(yōu)化

目前，基于WebView的Hybrid開發(fā)模式已經(jīng)相當(dāng)成熟，廣泛應(yīng)用于各類平臺(tái)型App中。在實(shí)現(xiàn)了一個(gè)完善的JSBridge后，開發(fā)者可以在各個(gè)方向上進(jìn)行深挖，不斷優(yōu)化性能和體驗(yàn)。

多數(shù)App的Hybrid部分在完成JSBridge的建設(shè)后，已經(jīng)具備了不錯(cuò)的體驗(yàn)。在此基礎(chǔ)上，空間團(tuán)隊(duì)進(jìn)行了更多的優(yōu)化，給出了當(dāng)前更為優(yōu)秀的解決方案?；谶@一技術(shù)還可以開發(fā)獨(dú)立App，例如早期的PhoneGap、Cordova以及現(xiàn)在的Ionic等框架，都是這一領(lǐng)域的知名開發(fā)框架。

五、實(shí)際項(xiàng)目中的應(yīng)用體驗(yàn)

在我司的前端技術(shù)棧中，曾以Angular為主，一些App也由前端團(tuán)隊(duì)基于Angular技術(shù)棧選型Ionic進(jìn)行開發(fā)。對(duì)于初入團(tuán)隊(duì)的前端開發(fā)者來說，采用Ionic框架開發(fā)App的學(xué)習(xí)成本不高。開發(fā)過程中仍沿用前端技術(shù)，寫的是Web App，運(yùn)行在原生WebView容器中。Ionic提供的組件庫可以迅速搭建項(xiàng)目界面，提高開發(fā)效率和用戶體驗(yàn)。

基于WebView的Hybrid開發(fā)模式為跨端開發(fā)提供了便捷的途徑，結(jié)合了Web技術(shù)和移動(dòng)原生應(yīng)用的優(yōu)點(diǎn)，是當(dāng)下移動(dòng)開發(fā)的重要趨勢(shì)之一。Ionic框架在跨端應(yīng)用中的優(yōu)勢(shì)與挑戰(zhàn)

隨著移動(dòng)應(yīng)用的快速發(fā)展，跨端開發(fā)的需求與日俱增。Ionic框架作為一種流行的跨端開發(fā)解決方案，憑借其方便的原生擴(kuò)展機(jī)制和豐富的開發(fā)工具，受到廣泛關(guān)注。但在實(shí)際應(yīng)用中，Ionic也存在一些明顯的不足。本文將深入探討Ionic的優(yōu)勢(shì)、挑戰(zhàn)及應(yīng)對(duì)方法。

一、Ionic的原生擴(kuò)展機(jī)制與優(yōu)勢(shì)

Ionic框架允許開發(fā)者方便地使用原生功能。當(dāng)開發(fā)者有特定的原生需求時(shí)，可以自行封裝使用。在安卓端消息推送模塊中，正是原生開發(fā)為Ionic應(yīng)用提供了強(qiáng)有力的支持。對(duì)于拍照、相冊(cè)訪問等常見需求，Ionic也提供了現(xiàn)成方案，極大地簡(jiǎn)化了開發(fā)過程。Ionic不斷迭代更新，新的版本與Angular緊密結(jié)合，提供了更豐富的開發(fā)工具鏈和拖拽式項(xiàng)目生成工具。Ionic Pro提供的開發(fā)者工具為應(yīng)用整個(gè)生命周期提供了完善的支持平臺(tái)。

二、Ionic的挑戰(zhàn)與應(yīng)對(duì)

盡管Ionic具有諸多優(yōu)勢(shì)，但在實(shí)際應(yīng)用中也面臨一些挑戰(zhàn)。在聊天列表方面，Ionic在模擬微信和QQ的異構(gòu)無限滾動(dòng)長(zhǎng)列表時(shí)，效果并不理想。盡管可以通過各種手段嘗試實(shí)現(xiàn)，但結(jié)果往往不盡如人意。在動(dòng)畫方面，Ionic提供的動(dòng)畫效果流暢程度一般，難以滿足高要求的動(dòng)畫設(shè)計(jì)需求。前端開發(fā)的通病是瀏覽器兼容性問題。雖然Crosswalk提供了一種解決方案，但其體積龐大，實(shí)際應(yīng)用中很少被采用。

三、調(diào)試手機(jī)上的網(wǎng)頁及Cordova/Phonegap的Hybrid應(yīng)用

針對(duì)手機(jī)上的網(wǎng)頁及Hybrid應(yīng)用的調(diào)試，操作步驟主要分為電腦和手機(jī)（或模擬器）兩部分。在手機(jī)上打開開發(fā)者選項(xiàng)并進(jìn)行USB調(diào)試設(shè)置。對(duì)于不同版本的Android系統(tǒng)，操作略有不同。接下來，在手機(jī)上打開Chrome瀏覽器，瀏覽相應(yīng)網(wǎng)站或打開Hybrid程序，并通過USB線連接到電腦。在電腦上打開Chrome瀏覽器并訪問chrome://inspect/devices頁面，即可進(jìn)行調(diào)試。如果是使用Cordova Hybrid框架，可能需要在程序的入口點(diǎn)添加特定的代碼以開啟調(diào)試功能。

四、結(jié)論與展望

對(duì)于前端技術(shù)背景開發(fā)者而言，Ionic是一個(gè)快速開發(fā)跨端應(yīng)用的可行方案，尤其對(duì)于已有Angular基礎(chǔ)的開發(fā)者來說，Ionic的學(xué)習(xí)成本相對(duì)較低。隨著跨端開發(fā)技術(shù)的不斷發(fā)展，前端開發(fā)者應(yīng)該關(guān)注新的技術(shù)熱點(diǎn)，如NativeScript、React Native、Flutter等。在選擇開發(fā)工具和框架時(shí)，需要綜合考慮項(xiàng)目需求、團(tuán)隊(duì)技能、學(xué)習(xí)成本等因素，做出最合適的選擇。

Ionic框架在跨端開發(fā)中具有一定的優(yōu)勢(shì)，但也面臨一些挑戰(zhàn)。通過深入了解其優(yōu)勢(shì)和不足，并結(jié)合項(xiàng)目實(shí)際需求進(jìn)行選擇，可以幫助開發(fā)者更好地利用Ionic框架進(jìn)行移動(dòng)應(yīng)用開發(fā)。關(guān)注新的技術(shù)趨勢(shì)，不斷學(xué)習(xí)和實(shí)踐，是前端開發(fā)者持續(xù)進(jìn)步的關(guān)鍵。在Iconic框架中，代碼實(shí)現(xiàn)特定功能的過程如下：首先獲取當(dāng)前應(yīng)用的包名，然后通過包名獲取應(yīng)用信息，并檢查應(yīng)用是否處于調(diào)試模式且Android版本是否支持。如果滿足條件，則啟用網(wǎng)頁內(nèi)容調(diào)試。下面，我們將深入探討hybrid APP中js調(diào)用native接口的原理。

一、移動(dòng)APP開發(fā)技術(shù)概述

隨著移動(dòng)網(wǎng)絡(luò)的發(fā)展，移動(dòng)APP盛行，目前市場(chǎng)上的APP開發(fā)技術(shù)主要可分為三種：native開發(fā)、hybrid開發(fā)以及RN/Weex開發(fā)。本文將重點(diǎn)講述hybrid APP中js調(diào)用native的原理。

二、Hybrid APP的特點(diǎn)

Hybrid APP是利用Android/iOS上的webview加載web網(wǎng)頁，相當(dāng)于用native做了一個(gè)外殼，內(nèi)部加載網(wǎng)頁。這種架構(gòu)在業(yè)務(wù)層面上，只要不太依賴性能，都能滿足需求。對(duì)于需要使用到硬件功能如相機(jī)、位置等，就必須調(diào)用native接口。

三、JS調(diào)用Native的原理

在Hybrid APP中，js調(diào)用native主要通過WebViewClient的shouldOverrideUrlLoading方法。此方法可以攔截指定格式的URL，通過攔截特定URL和獲取對(duì)應(yīng)的參數(shù)，來調(diào)用native對(duì)應(yīng)的功能。以Cordova插件為例，我們來看一下具體的實(shí)現(xiàn)過程。

四、Cordova插件與JS調(diào)用Native的實(shí)現(xiàn)

1. Cordova初始化過程中，主要定義了回調(diào)callback。js調(diào)用native后，native處理完結(jié)果，通過callback返回js。

2. 構(gòu)造鏈接并發(fā)送鏈接“pokeNative”。這里可以通過iframe和XHR兩種方式完成調(diào)用。

3. Native完成處理后，通過webView.addJavascriptInterface調(diào)用js中掛載在window對(duì)象的方法。這是一個(gè)統(tǒng)一的回調(diào)nativeCallback，通過callbackID識(shí)別出本次結(jié)果需要回調(diào)js中的哪個(gè)function。至此，本次交互完成。

五、總結(jié)

JS調(diào)用native的方式主要通過native的兩個(gè)方法：addJavascriptInterface和shouldOverrideUrlLoading來完成交互。其中，addJavascriptInterface用于native調(diào)用js中掛載在window對(duì)象的方法，shouldOverrideUrlLoading則用于攔截URL并獲取參數(shù)，進(jìn)而調(diào)用對(duì)應(yīng)的native功能。這就是hybrid APP中js調(diào)用native接口的基本原理。