NativeBridge 原理

我們先來(lái)看一下現(xiàn)在的互聯(lián)網(wǎng)項(xiàng)目需要哪些部分組成,比如淘寶,天貓,京東,
微博,等等.我們會(huì)發(fā)現(xiàn)現(xiàn)階段一個(gè)互聯(lián)網(wǎng)項(xiàng)目它同時(shí)具有網(wǎng)頁(yè)端,app甚至還有一個(gè)微信入口,在過(guò)去我們的程序員選擇工作的時(shí)候,可以選擇做網(wǎng)頁(yè)開(kāi)發(fā),做網(wǎng)站又或者選擇學(xué)習(xí)安卓然后做app開(kāi)發(fā).

我們現(xiàn)在來(lái)看一些實(shí)際的例子,在微信群看文字分享的朋友可以看一下我們發(fā)送的截圖,這些項(xiàng)目都是使用NativeBridge技術(shù)來(lái)實(shí)現(xiàn)的,我們說(shuō)的FaceBook的框架ReactNative以及著名的混合App框架PhoneGap等也是使用的類(lèi)似NativeBridge原理.

1

京東的活動(dòng)頁(yè)面，點(diǎn)擊進(jìn)去草讶，是一個(gè)app的詳情頁(yè)张吉，是用原生的來(lái)寫(xiě)的

在微信火起來(lái)以后,外面就出現(xiàn)了很多微信公眾平臺(tái)開(kāi)發(fā)的崗位,然而現(xiàn)在企業(yè)需求的并不是我有一個(gè)企業(yè)官網(wǎng),然后再做一個(gè)app,而是一個(gè)完備的系統(tǒng).它的數(shù)據(jù)業(yè)務(wù)應(yīng)該是一個(gè)整體它的入口有很多,如網(wǎng)頁(yè),app,微信,微博等,都可以是整個(gè)平臺(tái)的流量入口,而整個(gè)產(chǎn)品也可以通過(guò)各個(gè)不同的端口來(lái)為用戶提供服務(wù)

這們的設(shè)計(jì)整個(gè)技術(shù)棧層級(jí)很深,通常企業(yè)要維系這樣的一個(gè)項(xiàng)目運(yùn)營(yíng),需要有Liunx運(yùn)維人員,然后需要有數(shù)據(jù)庫(kù)管理員,需要Web后端開(kāi)發(fā)人員如PHP,Java

若是做網(wǎng)頁(yè)端則需要H5前端工程師,做App的話需要分別有IOS,Android兩套

若是在加上WinPhone以及其它那些市場(chǎng)占有率不太高的平臺(tái),則開(kāi)發(fā)人員的數(shù)量會(huì)變得更多

這樣導(dǎo)致的直接后果就是項(xiàng)目開(kāi)發(fā)運(yùn)營(yíng)成本高,開(kāi)發(fā)周期長(zhǎng),團(tuán)隊(duì)管理難度大.
人才儲(chǔ)備困難,到項(xiàng)目穩(wěn)定運(yùn)營(yíng)后各崗位工作飽和度并不高.卻要維系一個(gè)龐大的團(tuán)隊(duì)來(lái)運(yùn)營(yíng)一個(gè)項(xiàng)目,如果從考慮項(xiàng)目穩(wěn)定性出發(fā),所有的崗位都需要冗余,這樣算下來(lái),有那么多移動(dòng)互聯(lián)網(wǎng)項(xiàng)目跨掉就不奇怪了

基于上述原因催生了全棧工程師這樣一類(lèi)技術(shù)人員的火爆,我們常常在招聘網(wǎng)站上看到這樣的崗位,招聘移動(dòng)互聯(lián)網(wǎng)項(xiàng)目開(kāi)發(fā)的php程序員,招聘混合app開(kāi)發(fā)的H5程序員,招聘微信開(kāi)發(fā)的Java程序員等諸如此類(lèi)的崗位.其實(shí)這些崗位都是全棧工程師能輕松拿下的崗位

可是在過(guò)去的幾年中,全棧工程師的發(fā)展卻沒(méi)有那么快.根本原因在于一個(gè)人要同時(shí)掌握那么多技能并靈活運(yùn)用,不是一件容易的事情.好在大公司給我們指明了方向國(guó)內(nèi)以騰訊,阿里為首;而國(guó)外最大的網(wǎng)絡(luò)社區(qū)facebook,它們都采用了同一種方式來(lái)解決這一問(wèn)題

我們知道做為單一程序員精通的技能越多越好,然而做為企業(yè)解決方案應(yīng)該盡可能的減少不同種類(lèi)的技術(shù)引用,因?yàn)槊慷嘁胍环N技術(shù),就要配備相應(yīng)技能的人員,尤其是引入了使用面不那么廣的技術(shù),可能導(dǎo)致招聘都困難

同時(shí)精通PHP,Java,JS,OC,Linux以及Mysql這樣的程序員肯定不多見(jiàn).如果有這樣的程序員也就大概三五個(gè),便能將傳統(tǒng)開(kāi)發(fā)模式下幾十人運(yùn)營(yíng)和維護(hù)的項(xiàng)目拿下來(lái).可這種程序員卻實(shí)是太少了,即便是像京東,百度這樣的公司里面?zhèn)鹘y(tǒng)意義上的全棧工程師數(shù)量也不多.我們來(lái)看看這些大公司是如何解決這些問(wèn)題的.市場(chǎng)上最多的就是Web程序員,徜若我們給Web開(kāi)發(fā)程序員增加一些額外的技能,能不能讓他們完成全棧工程師完成的工作呢?

當(dāng)然可以了,答案就是我們今天要給大家介紹的Native Bridge技術(shù).普通Web程序員通常會(huì)掌握一門(mén)后端開(kāi)發(fā)語(yǔ)言以及前端Web開(kāi)發(fā)語(yǔ)言JS,比如你之前學(xué)的是JavaEE那么你肯定會(huì)Java語(yǔ)言和JS語(yǔ)言,如果你學(xué)的是PHP,那么你精通的是PHP語(yǔ)言和JS語(yǔ)言.如果你專(zhuān)門(mén)去學(xué)H5在涉及到Ajax與服務(wù)器通信的時(shí)候,你也需要同PHP或者是Java等后端語(yǔ)言進(jìn)行交互

我們知道全球有82%的網(wǎng)站是用PHP做的,PHP程序員都會(huì)PHP和JS,如果我們僅使用兩種編程語(yǔ)言甚至是一種編程語(yǔ)言,就能完成一個(gè)擁有網(wǎng)頁(yè)端,微信端,app端的多端應(yīng)用.那么我們將能培養(yǎng)大量的全棧工程師,這批全棧工程師可以勝任移動(dòng)互聯(lián)網(wǎng)領(lǐng)域所有的開(kāi)發(fā)崗位

現(xiàn)在市面上流行的混合app框架有很多,這些構(gòu)架大部分都是國(guó)外的.比如
FaceBook開(kāi)源的ReactNative就是其中的佼佼者,在加上單頁(yè)App技術(shù)成熟與普及使得僅使用PHP加JS就可以完成整個(gè)項(xiàng)目開(kāi)發(fā)

那么是不是我們只學(xué)習(xí)類(lèi)似ReactNative構(gòu)架就可以做全棧工程師了呢?問(wèn)題沒(méi)那么簡(jiǎn)單,如果你在國(guó)外或許還真行,可是在國(guó)內(nèi)我們要想精通混合App開(kāi)發(fā)模式,我們需要了解混合App實(shí)現(xiàn)原理也就是NativeBridge技術(shù),因?yàn)閲?guó)外的框架是不會(huì)集成支付寶和微信的,而國(guó)外集成的很多好用的組件也因?yàn)閲?guó)內(nèi)網(wǎng)絡(luò)的特殊性導(dǎo)致我們部分組件無(wú)法正常使用

要能靈活地使用NativeBridge完成自己的項(xiàng)目開(kāi)發(fā),我們除了必要的編程語(yǔ)言技能外,還需要對(duì)移動(dòng)互聯(lián)網(wǎng)的整個(gè)生態(tài)與行業(yè)特點(diǎn),比如說(shuō)在國(guó)內(nèi)我們很多的項(xiàng)目會(huì)接入微信公眾平臺(tái),并且微信也有提供相應(yīng)的JSSDK讓我們的網(wǎng)頁(yè)擁有調(diào)用掃碼,語(yǔ)音識(shí)別的能力.那么我們開(kāi)發(fā)的平臺(tái)要想讓我們的程序做到一次開(kāi)發(fā)多端兼容,那么我們除了兼容IOS,Android以外還應(yīng)把微信,支付寶,微博這樣的行業(yè)巨頭考慮進(jìn)去

NativeBridge的實(shí)現(xiàn)原理其實(shí)并不復(fù)雜,大的原則來(lái)說(shuō)就是講數(shù)據(jù)渲染,用戶交互,流程控制等核心業(yè)務(wù)類(lèi)開(kāi)發(fā)需求交給Web程序員來(lái)完成.而涉及到手機(jī)硬件和第三方平臺(tái)提供的功能則使用底層封裝并提供統(tǒng)一的JS與PHP接口,這種封裝技術(shù)叫做NativeBridge

那么我們下面在來(lái)看一下Android和IOS分別是如何實(shí)現(xiàn)NativeBridge的.以下的演示是為了方便大家看懂原理,所以對(duì)代碼進(jìn)行了大量的簡(jiǎn)化,與兄弟會(huì)在商業(yè)項(xiàng)目中正在大量使用的封裝存在較大差距.如果是把商業(yè)級(jí)代碼直接擺出來(lái)不利于大家理解,也違反公司規(guī)定

Objective-C怎么訪問(wèn)JavaScript呢？

在我們iOS應(yīng)用里面會(huì)嵌套一個(gè)叫UIWebView的類(lèi)似瀏覽器的組件酪耳，可以展示HTML

UIWebView對(duì)象有一個(gè)方法

• (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script
  該方法能夠執(zhí)行一段JavaScript字符串, 并返回字符串類(lèi)型的返回值

在iOS里面粟瞬，JavaScript 是不能直接調(diào)用Objective-C的，在ios7以前我們會(huì)用攔截協(xié)議的形式實(shí)現(xiàn)玩裙。這個(gè)適合一些比較簡(jiǎn)單的情況姜挺，不需要引入框架齿税，只需要web前端配合就可以

攔截協(xié)議。其實(shí)就是URL請(qǐng)求截獲初家。在UIWebView的瀏覽器的JavaScript中, 沒(méi)有相關(guān)的接口可以調(diào)用Objective-C的相 關(guān)方法. 一般采用JavaScript 在瀏覽器環(huán)境中發(fā)出URL請(qǐng)求, Objective-C 截獲請(qǐng) 求以獲取相關(guān)請(qǐng)求的思路. 在Objective-C 中在實(shí)現(xiàn)UIWebViewDelegate 時(shí)截獲請(qǐng)求

我們來(lái)看demo的效果

2

JS 調(diào)用 Native 方法 ：在網(wǎng)頁(yè)里面的輸入框里面輸入文本偎窘，然后作為參數(shù)傳遞到 Native，Native接受參數(shù)后在界面進(jìn)行展示溜在。

3.png

4

我們首先來(lái)看看大家比較關(guān)心的HTML是怎么寫(xiě)的

5.png

6

其實(shí)移動(dòng)端在加載HTML的時(shí)候把篓，會(huì)在上下文中注入這個(gè)對(duì)象到咱們JS中纫溃。咱們就可以直接調(diào)用這個(gè)對(duì)象的方法

這個(gè)對(duì)象提供了一個(gè)HtmlcallJava方法，并接受2個(gè)參數(shù)韧掩，JS用
window.jsObj.HtmlcallJava(username, password);調(diào)用就行紊浩。類(lèi)似的還需要其他方法，跟移動(dòng)端約定好后往jsObj對(duì)象里面添加就行疗锐，然后可以直接調(diào)用了

提供給Native調(diào)用的方法就簡(jiǎn)單了坊谁，按照約定好方法名和參數(shù)，接受參數(shù)后實(shí)現(xiàn)我們的業(yè)務(wù)就行

還是相對(duì)比較簡(jiǎn)單滑臊，但在我們的業(yè)務(wù)里面是遠(yuǎn)遠(yuǎn)不夠的口芍，往往參數(shù)很多，傳參的時(shí)候可能要序列化成json格式雇卷，有必要的時(shí)候還要加密鬓椭，還有和移動(dòng)端交互的方法很多，還要便于管理关划。當(dāng)然在這里我們只是給大家提供一個(gè)思路小染，原理和實(shí)現(xiàn)，在我們實(shí)際開(kāi)發(fā)中會(huì)有一套嚴(yán)格的規(guī)范祭玉，在后續(xù)的直播課或者咱們兄弟連的全棧班里面會(huì)陸續(xù)給大家講解

HTML是可以放在服務(wù)器里面氧映，提供URL給客戶端調(diào)用，在這里我們?yōu)榱朔奖阏{(diào)用放在客戶端本地

7

很簡(jiǎn)單脱货，沒(méi)有做大的布置岛都。界面里面嵌套了一個(gè)web組件律姨，下面是iOS放置的一些控件提供輸入還有提交

8

9

10

當(dāng)JS調(diào)用的時(shí)候，也即URL觸發(fā)的時(shí)候烫堤，會(huì)在web組件的代理即回調(diào)里面相應(yīng)荣赶。截取該URL，然后根據(jù)截取URL后的信息鸽斟，解析出來(lái)方法名拔创，還有參數(shù)

11

iOS調(diào)用JS就比較簡(jiǎn)單了剩燥，用web組件提供的方法

(NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script

執(zhí)行JS代碼就行了

12.png