JSBridge：聽其取名就是js和Native之前的橋梁,，而實(shí)際上JSBridge確實(shí)是JS和Native之前的一種通信方式,。簡(jiǎn)單的說(shuō),，JSBridge就是定義Native和JS的通信,Native只通過(guò)一個(gè)固定的橋?qū)ο笳{(diào)用JS,JS也只通過(guò)固定的橋?qū)ο笳{(diào)用Native。JSBridge另一個(gè)叫法及大家熟知的Hybrid app技術(shù),。
流程：H5->通過(guò)某種方式觸發(fā)一個(gè)url->Native捕獲到url,進(jìn)行分析->原生做處理->Native調(diào)用H5的JSBridge對(duì)象傳遞回調(diào),。
我們前面講過(guò)了原生的WebView/UIWebView控件已經(jīng)能夠和Js實(shí)現(xiàn)數(shù)據(jù)通信了，那為什么還要JSBridge呢,？
其實(shí)使用JSBridge有很多方面的考慮：
- Android4.2以下,addJavascriptInterface方式有安全漏掉
- iOS7以下,JS無(wú)法調(diào)用Native
- url scheme交互方式是一套現(xiàn)有的成熟方案,可以完美兼容各種版本,，對(duì)以前老版本技術(shù)的兼容。
url scheme
url scheme是一種類似于url的鏈接,是為了方便app直接互相調(diào)用設(shè)計(jì)的,。具體來(lái)講如果是系統(tǒng)的url scheme,則打開系統(tǒng)應(yīng)用,否則找看是否有app注冊(cè)這種scheme,打開對(duì)應(yīng)app,。
注：這種scheme必須原生app注冊(cè)后才會(huì)生效。
而在我們實(shí)際的開發(fā)中,，app不會(huì)注冊(cè)對(duì)應(yīng)的scheme,而是由前端頁(yè)面通過(guò)某種方式觸發(fā)scheme(如用iframe.src),然后Native用某種方法捕獲對(duì)應(yīng)的url觸發(fā)事件,然后拿到當(dāng)前的觸發(fā)url,根據(jù)定義好的協(xié)議,分析當(dāng)前觸發(fā)了那種方法,。
JSBridge技術(shù)實(shí)現(xiàn)
要實(shí)現(xiàn)JSBridge,我們需要按以下步驟分析：
- 第一步:設(shè)計(jì)出一個(gè)Native與JS交互的全局橋?qū)ο?/li>
- 第二步:JS如何調(diào)用Native
- 第三步:Native如何得知api被調(diào)用
- 第四步:分析url-參數(shù)和回調(diào)的格式
- 第五步:Native如何調(diào)用JS
- 第六步:H5中api方法的注冊(cè)以及格式
JSBridge的完整流程可總結(jié)為：
設(shè)計(jì)Native與JS交互的全局橋?qū)ο?/h2>
我們規(guī)定,JS和Native之間的通信必須通過(guò)一個(gè)H5全局對(duì)象JSbridge來(lái)實(shí)現(xiàn)。該對(duì)象有如下特點(diǎn)：
該對(duì)象名為”JSBridge”,，是H5頁(yè)面中全局對(duì)象window的一個(gè)屬性,，形如：
var JSBridge = window.JSBridge || (window.JSBridge = {});- 1
- 1
該對(duì)象有如下方法：
- registerHandler( String,Function )H5調(diào)用注冊(cè)本地JS方法,注冊(cè)后Native可通過(guò)JSBridge調(diào)用。調(diào)用后會(huì)將方法注冊(cè)到本地變量messageHandlers 中,。
- callHandler( String,JSON,Function )H5調(diào)用 調(diào)用原生開放的api,調(diào)用后實(shí)際上還是本地通過(guò)url scheme觸發(fā),。調(diào)用時(shí)會(huì)將回調(diào)id存放到本地變量responseCallbacks中
- _handleMessageFromNative( JSON )Native調(diào)用 原生調(diào)用H5頁(yè)面注冊(cè)的方法,或者通知H5頁(yè)面執(zhí)行回調(diào)方法
