h5與App原生互動方案

阿新 • • 發佈：2019-01-16

方便測試階段，H5嵌入到App當中，開發人員方便除錯與Debug。

目前主流的技術方案：

1.在iOS7以前，在UIWebView中實現一些代理方法攔截帶有約定好的protocol的Url，從Url上獲取get方式的引數傳遞，對映成本地原生方法，如下：

-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
  NSString *urlString = request.URL 
.absoluteString;
  if ([urlString rangeOfString:@"js-call://"].location != NSNotFound) {
      NSString * host = [self sliceHost:urlString];
      NSDictionary * params = [self sliceParams:urlString];
      if ([host isEqualToString:@"openOrderDetail"]) {
          [self openOrderDetail:params];
      }
      return 
 NO;
  }
  return YES;
}

這僅僅解決了js呼叫原生方法的問題，至於呼叫的結果與呼叫完之後要進行一些頁面的回撥，在這個攔截的過程中根本沒有辦法進行，不過有一些蹩腳的補償措施，如下：

-(void)webViewDidFinishLoad:(UIWebView *)webView
{
  self.orderDetailCallBackFuncName = [webView stringByEvaluatingJavaScriptFromString:@"orderCallbackfuncName()"];
}

會在頁面載入完畢後主動去取頁面上設定的回撥方法的名稱，然後在原生方法中處理完邏輯再進行回撥。

-(void 
)OpenOrderDetail:(NSDictionary *)params{
  //do someting
  [self.webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"%@()",self.orderDetailCallBackFuncName ]];
}

2.iOS7以後，大家都使用JavaScriptCore這個官方的WebKit 的 JavaScript 引擎，實現oc與JavaScript的語言穿梭。

-(void)configJsCallBack{
  WeakSelf;
  self.jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
  self.jsContext.exceptionHandler = ^(JSContext * con,JSValue * exception){
      NSLog(@"JS Error:%@",exception);
  };
  Coordinator * coordinator = [[Coordinator alloc]init];
  self.jsContext[@"mobileCoordinator"] = coordinator;
  self.jsContext[@"console"] = coordinator;
}

不太瞭解JavaScriptCore的同學可以自己查閱一下官方文件或者學習資料。這裡我們使用一些技巧，將所有的App開放給js的方法都由一個叫Coordinator的排程器來排程，而這個排程器實現了JSExport協議：

#import <Foundation/Foundation.h>
#import <JavaScriptCore/JavaScriptCore.h>
@protocol CoordinatorExport <JSExport>
-(void)log:(NSString *)msg;
-(BOOL)callNativeModule:(NSString *)url;
/*
  js呼叫原生分享
  shareOpinion為json物件
  {
      "type":"share",
      "title":"share title",
      "content":"share content",
      "imgUrl":"",
      "clickUrl":""
  }
  其中型別type有以下幾種:
  share(只有朋友圈和微信好友),doubleShare(包含所有分享渠道),allShare(分享全部渠道)
*/
JSExportAs(showShareMenu, -(BOOL)showShareMenu:(NSString *)url opinion:(NSString *)opinion);
@end
@interface Coordinator : NSObject< CoordinatorExport >
@property(nonatomic,copy)BOOL (^openShareCallBack)(NSDictionary * opinion);
@end

上面的做法就是我們會在合適的實際向JavaScript的執行的環境中注入一個叫做mobileCoordinator的物件，這個物件會注入到JavaScript環境中的window物件上，全域性可用。為什麼要封裝到一個物件上，是因為js沒有名稱空間的概念並且有變數提升向上查詢，會引起命名衝突，所以我們把對外暴露的方法都進行一個物件封裝。還有一個好處就是JavaScript的開發者與app的開發者都會像編寫各自語言的程式碼一樣書寫程式碼，沒有語法損失，js同步呼叫原生方法，原生實現的時候具備返回值，js的呼叫者就可以獲取返回值，如果是非同步回撥，那可以對外暴露方法的時候提供一個callback的入參，在非同步完成後進行回撥。
3.其他方案例如JavaScriptBridge等與第二種方案類似。

方案比較：

方案1的流程如下：
互動方式為單向
H5呼叫Native:

H5頁面 —>發起Url Redirect(Url上攜帶帶有動作語義的引數)->Native App->攔截Url Redirect->解析動作語義引數->呼叫相關Native程式碼

Native呼叫H5頁面:

Native App—>獲取頁面上預留引數和解析動作語義引數->呼叫相關JavaScript程式碼

這樣使得一個簡單的方法呼叫變得非常割裂，而且雙端維護成本非常高，不易debug。
方案2的流程如下：
互動為雙向：

H5頁面(Native App)<->呼叫Native程式碼(呼叫JavaScript程式碼)<->Native App執行被呼叫Native程式碼返回呼叫結果(H5頁面執行被呼叫JavaScript程式碼並返回呼叫結果)

方案2優勢比較明顯，一般會採用第二種。

實現細節

細節上有一些需要注意的東西：
1.oc方法是帶有引數標籤的，js的方法並沒有，注意使用JSExportAs這個巨集來將oc原生語言轉換為js語法風格的程式碼。
2.注意獲取jscontext上下文並注入方法與物件的時機，這取決於H5頁面上的js引用時機，如果H5頁面上使用require來進行順序引用，就不會出現問題，如果與原生互動的js的程式碼載入與原生注入的注入順序混亂，則呼叫不到原生暴露的方法會引起js執行異常。建議結合攔截url的方式讓H5決定何時注入，或者是前端工程師梳理規範，在H5引用js的時候做順序控制。

防止注入與釣魚

其實這個不太算是技術方案，不過可以提一下。有時候手機在危險的網路環境中比方說連結在不安全的路由器中，DNS進行惡意中轉到釣魚網站上，如果頁面呼叫已知的原生暴露出來的方法，同步資料或者是呼叫關鍵業務，就會有注入攻擊的風險。一般需要做的是，H5在呼叫app原生關鍵業務的時候，需要在呼叫原生方法的時候傳入票據，原生通過服務端的認證中心驗證票據，通過才可以處理頁面呼叫請求，在同步資料與狀態的時候，比方說將app中的使用者登入狀態同步到H5頁面上，一般app會同步cookie，不過這種方式維護成本較高。對於同步狀態與資料，app應該使用業務票據來傳遞給H5，H5通過票據中心置換出真正的使用者狀態或者是關鍵業務資料。更高級別的方案還有H5與App臨時握手等。

H5在WebView中的Debug

這個是一個比較噁心的事情，不過我們可以替換js的window物件上的console物件，將log函式轉接到原生，再通過一些其他方式進行輸出，JavaScriptCore中提供了exceptionHandler

context.exceptionHandler = ^(JSContext *context, JSValue *exception) { NSLog(@"JS Error: %@", exception);};

下一篇文章將會介紹一下用websocket協議，將app中的WebView的除錯資訊輸出到指定IP的電腦上，方便開發除錯，這樣就能減少溝通與配合聯調，提高開發效率。

h5與App原生互動方案

目前主流的技術方案：

方案比較：

實現細節

防止注入與釣魚

H5在WebView中的Debug

h5與App原生互動方案

記一次利用vue.js完成的h5與app的互動

H5與App的互動（WebViewJavascriptBridge）

H5與android原生的JS互動

H5頁面與APP的互動

與app的互動

通過頁面呼叫APP【H5與APP互通】

JS與Android原生互動

h5和iOS原生互動,h5和iOS互相傳值

BLE 藍芽與APP 得互動內設外設

h5 與原生 app 互動的原理

Hybrid開發-----H5與原生App互動

環法競猜項目：H5與原生APP交互方式

H5與原生Android互動

shiro與app利用token進行互動的解決方案

h5頁面與Android原生頁面互動

微信中通過頁面(H5)直接打開本地app的解決方案

Flutter的需要與原生互動的一些常用庫

h5與mui開發app標題的滑動實現和樣式追蹤

小程式與 App 與 H5 之間的區別

h5與App原生互動方案

目前主流的技術方案：

方案比較：

實現細節

防止注入與釣魚

H5在WebView中的Debug

相關推薦