這篇文章給大家分享的是有關(guān)Hybrid App技術(shù)的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

從事成都服務(wù)器托管，服務(wù)器租用，云主機(jī)，虛擬空間，域名與空間，CDN，網(wǎng)絡(luò)代維等服務(wù)。

背景

隨著Web技術(shù)的發(fā)展和移動(dòng)互聯(lián)網(wǎng)的發(fā)展，Hybrid技術(shù)已經(jīng)成為一種前端開(kāi)發(fā)的主流技術(shù)方案。那什么是Hybrid App呢？

Hybrid App（混合模式移動(dòng)應(yīng)用）是指介于web-app、native-app這兩者之間的app，兼具" Native App良好用戶(hù)交互體驗(yàn)的優(yōu)勢(shì) "和" Web App跨平臺(tái)開(kāi)發(fā)的優(yōu)勢(shì) "。

總的來(lái)說(shuō)，就是既具有APP的體驗(yàn)和性能，又具有Web靈活的開(kāi)發(fā)模式和跨平臺(tái)開(kāi)發(fā)能力。

現(xiàn)有的技術(shù)方案

1、H5 + JSBridge，通過(guò)JSBridge完成H5和Native的通信，賦予H5一定的端能力。是一種基于WebView UI的解決方案。

2、React-Native，進(jìn)一步通過(guò)JSbridge將js解析為虛擬DOM傳遞到Native，并使用原生進(jìn)行渲染。

3、小程序解決方案，采用雙線程的渲染機(jī)制，將渲染層WebView和邏輯層JavaScriptCore形成獨(dú)立的模塊，通過(guò)Native進(jìn)行通信（setData），邏輯層的網(wǎng)絡(luò)請(qǐng)求也會(huì)由Native進(jìn)行轉(zhuǎn)發(fā)。在UI方面，采用的是WebView和原生相結(jié)合的方式。

技術(shù)原理

本文將從jsbridge的原理、實(shí)現(xiàn)、雙向通信、接入方式和H5的嵌入方式進(jìn)行詳細(xì)闡述。

jsbridge的原理

客戶(hù)端能對(duì)WebView中請(qǐng)求進(jìn)行攔截，都有相應(yīng)的API：

Android:

// Android: shouldoverrideurlloading 
public boolean shouldOverrideUrlLoading(WebView view, String url){
  //讀取到url后自行進(jìn)行分析處理
  
  //如果返回false，則WebView處理鏈接url，如果返回true，代表WebView根據(jù)程序來(lái)執(zhí)行url
  return true;
}

IOS:

// IOS: shouldStartLoadWithRequest 
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
  NSURL *url = [request URL];
   
  NSString *requestString = [[request URL] absoluteString];
  //獲取url scheme后自行進(jìn)行處理

因此，在頁(yè)面中可以通過(guò)iframe加載src的方式觸發(fā)相應(yīng)的捕獲函數(shù)，在捕獲函數(shù)中可以對(duì)url中的參數(shù)進(jìn)行解析；此外，Android還可以通過(guò)重寫(xiě)OnJSPrompt方法，對(duì)調(diào)用Prompt進(jìn)行攔截，同樣能實(shí)現(xiàn)通信的目的。

示例：

調(diào)起ios端：

function iosInvoke(scheme) {
  var elem = document.createElement('iframe');
  var body = document.body || document.getElementsByTagName('body')[0];
  elem.style.display = 'none';
  elem.src = scheme;
  body.appendChild(elem);
  setTimeout(function () {
    body.removeChild(elem);
    elem = null;
  }, 0);
}

調(diào)起android端：

function androidInvoke(scheme) {
  var androidJsBridge = window.Bdbox_android_jsbridge;
  if (androidJsBridge && androidJsBridge.dispatch) {
    androidJsBridge.dispatch(scheme);
  } else {
    var re = window.prompt('BdboxApp:' + JSON.stringify({
      obj: 'Bdbox_android_jsbridge',
      func: 'dispatch',
      args: [scheme]
    }));
    return re;
  }
}

協(xié)議制定URL Scheme

URL Scheme是什么

由于蘋(píng)果的app都是在沙盒中，相互是不能訪問(wèn)數(shù)據(jù)的。但是蘋(píng)果還是給出了一個(gè)可以在app之間跳轉(zhuǎn)的方法：URL Scheme。簡(jiǎn)單的說(shuō)，URL Scheme就是一個(gè)可以讓app相互之間可以跳轉(zhuǎn)的協(xié)議。

每個(gè)app的URL Scheme都是不一樣的，如果存在一樣的URL Scheme，那么系統(tǒng)就會(huì)響應(yīng)先安裝那個(gè)app的URL Scheme，因?yàn)楹蟀惭b的app的URL Scheme被覆蓋掉了，是不能被調(diào)用的。

設(shè)置URL Scheme

xxxapp://communication?args=xx

如何進(jìn)行雙向通信

雙向通信主要是H5和Native的雙向通信過(guò)程以及參數(shù)傳遞、回調(diào)執(zhí)行。

H5通知Native：

H5通知Native的方式主要有：

• 調(diào)用prompt/console/alert，調(diào)用時(shí)進(jìn)行參數(shù)傳遞，端進(jìn)行攔截重寫(xiě)

• URL Scheme跳轉(zhuǎn)攔截，將參數(shù)放在請(qǐng)求URL上

• API掛載，通過(guò)Navtive獲取js執(zhí)行環(huán)境，將相應(yīng)的api掛載在js上，供h6調(diào)用

Native通知H5：

回調(diào)機(jī)制，在向Native傳遞信息時(shí)，將回調(diào)函數(shù)也傳遞，Native在調(diào)用完成后，使用js執(zhí)行環(huán)境執(zhí)行回調(diào)函數(shù)

接入方式

jsbridge的接入，端方面的jsbridge和h6方面的jsbridge

嵌入方式

h6的嵌入方式:

• 直接代碼，直接將H5代碼css、html、js放入端目錄下，以file協(xié)議的方式訪問(wèn)，優(yōu)點(diǎn)是訪問(wèn)快速，缺點(diǎn)是迭代不方便。

• 線上地址，以http協(xié)議訪問(wèn)，使用webview打開(kāi)url形式，相較于代碼嵌入的方式來(lái)說(shuō)，速度比較慢，依賴(lài)網(wǎng)絡(luò)傳輸速度；優(yōu)點(diǎn)是迭代快速

感謝各位的閱讀！關(guān)于“Hybrid App技術(shù)的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！