h5 與原生 app 交互的原理

h5 與原生 app 交互的原理

如今移動端 web 應用，不少時候都須要與原生 app 進行交互、溝通（運行在 webview 中），好比微信的 jssdk，經過 window.wx 對象調用一些原生 app 的功能。因此，此次就來捋一捋 h5 與原生 app 交互的原理。

h5 與原生 app 的交互，本質上說，就是兩種調用：

1. app 調用 h5 的代碼
2. h5 調用 app 的代碼

1. app 調用 h5 的代碼

由於 app 是宿主，能夠直接訪問 h5，因此這種調用比較簡單，就是在 h5 中曝露一些全局對象（包括方法），而後在原生 app 中調用這些對象。

javascript

window.sdk = {
  double = value => value * 2,
  triple = value => value * 3,
};

android

webview.evaluateJavascript('window.sdk.double(10)', new ValueCallback<String>() {
  @Override
  public void onReceiveValue(String s) {
    // 20
  }
});

ios

NSString *func = @"window.sdk.double(10)";
NSString *str = [webview stringByEvaluatingJavaScriptFromString:func]; // 20

2. h5 調用 app 的代碼

由於 h5 不能直接訪問宿主 app，因此這種調用就相對複雜一點。

這種調用經常使用有兩種方式：

1. 由 app 向 h5 注入一個全局 js 對象，而後在 h5 直接訪問這個對象
2. 由 h5 發起一個自定義協議請求，app 攔截這個請求後，再由 app 調用 h5 中的回調函數

2.1 由 app 向 h5 注入一個全局 js 對象

這種方式溝通機制簡單，比較好理解，而且對於 h5 來講，沒有新的東西，因此是比較推薦的一種方式。但這種方式可能存在安全隱患，詳細查看 你不知道的 Android WebView 使用漏洞。

android

webview.addJavascriptInterface(new Object() {
  @JavascriptInterface
  public int double(value) {
    return value * 2;
  }
  
  @JavascriptInterface
  public int triple(value) {
    return value * 3;
  }
}, "appSdk");

ios

@interface AppSdk : NSObject
{}
- (int) double:(int)value;
- (int) triple:(int)value;
@end

@implementation AppSdk
- (int) double:(int)value {
  return value * 2;
}
- (int) triple:(int)value {
  return value * 3;
}
@end

JSContext *context=[webview valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
   
AppSdk *appSdk = [AppSdk new];

context[@"appSdk"] = appSdk;

javascript

window.appSdk.double(10); // 20

2.2 由 h5 發起一個自定義協議請求

這種方式要稍複雜一點，由於須要自定義協議，這對不少前端開發者來講是比較新的東西。因此通常不推薦這種方式，能夠做爲第一種方式的補充。

大體須要如下幾個步驟：

1. 由 app 自定義協議，好比 sdk://action?params
2. 在 h5 定義好回調函數，好比 window.bridge = {getDouble: value => {}, getTriple: value => {}}
3. 由 h5 發起一個自定義協議請求，好比 location.href = 'sdk://double?value=10'
4. app 攔截這個請求後，進行相應的操做，獲取返回值
5. 由 app 調用 h5 中的回調函數，好比 window.bridge.getDouble(20);

javascript

window.bridge = {
  getDouble: value => {
    // 20
  }, 
  getTriple: value => {
    // more  
  }
};

location.href = 'sdk://double?value=10';

android

webview.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        // 判斷若是 url 是 sdk:// 打頭的就攔截掉
        // 而後從 url sdk://action?params 中取出 action 與params 
        
        Uri uri = Uri.parse(url);                                 
        if ( uri.getScheme().equals("sdk")) {

            // 好比 action = double, params = value=10
            webview.evaluateJavascript('window.bridge.getDouble(20)');

            return true;
        }
        return super.shouldOverrideUrlLoading(view, url);
    }
});

ios

- (BOOL)webview:(UIWebView *)webview shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
  // 判斷若是 url 是 sdk:// 打頭的就攔截掉
  // 而後從 url sdk://action?params 中取出 action 與params

  NSString *urlStr = request.URL.absoluteString;
  
  if ([urlStr hasPrefix:@"sdk://"]) {
    
    // 好比 action = double, params = value=10
    NSString *func = @"window.bridge.getDouble(20)";
    [webview stringByEvaluatingJavaScriptFromString:func];

    return NO;
  }

  return YES;
}

後續

更多博客，查看 https://github.com/senntyou/blogs

做者：深予之 (@senntyou)

版權聲明：自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證）