摘要：與原生交互的原理現(xiàn)在移動(dòng)端應(yīng)用，很多時(shí)候都需要與原生進(jìn)行交互溝通運(yùn)行在中，比如微信的，通過對(duì)象調(diào)用一些原生的功能。所以，這次就來捋一捋與原生交互的原理。

現(xiàn)在移動(dòng)端 web 應(yīng)用，很多時(shí)候都需要與原生 app 進(jìn)行交互、溝通（運(yùn)行在 webview 中），比如微信的 jssdk，通過 window.wx 對(duì)象調(diào)用一些原生 app 的功能。所以，這次就來捋一捋 h5 與原生 app 交互的原理。

h5 與原生 app 的交互，本質(zhì)上說，就是兩種調(diào)用：

app 調(diào)用 h5 的代碼

h5 調(diào)用 app 的代碼

因?yàn)?app 是宿主，可以直接訪問 h5，所以這種調(diào)用比較簡(jiǎn)單，就是在 h5 中曝露一些全局對(duì)象（包括方法），然后在原生 app 中調(diào)用這些對(duì)象。

javascript

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

android

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

ios

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

因?yàn)?h5 不能直接訪問宿主 app，所以這種調(diào)用就相對(duì)復(fù)雜一點(diǎn)。

這種調(diào)用常用有兩種方式：

由 app 向 h5 注入一個(gè)全局 js 對(duì)象，然后在 h5 直接訪問這個(gè)對(duì)象

由 h5 發(fā)起一個(gè)自定義協(xié)議請(qǐng)求，app 攔截這個(gè)請(qǐng)求后，再由 app 調(diào)用 h5 中的回調(diào)函數(shù)

這種方式溝通機(jī)制簡(jiǎn)單，比較好理解，并且對(duì)于 h5 來說，沒有新的東西，所以是比較推薦的一種方式。但這種方式可能存在安全隱患，詳細(xì)查看 你不知道的 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

這種方式要稍復(fù)雜一點(diǎn)，因?yàn)樾枰远x協(xié)議，這對(duì)很多前端開發(fā)者來說是比較新的東西。所以一般不推薦這種方式，可以作為第一種方式的補(bǔ)充。

大致需要以下幾個(gè)步驟：

由 app 自定義協(xié)議，比如 sdk://action?params

在 h5 定義好回調(diào)函數(shù)，比如 window.bridge = {getDouble: value => {}, getTriple: value => {}}

由 h5 發(fā)起一個(gè)自定義協(xié)議請(qǐng)求，比如 location.href = "sdk://double?value=10"

app 攔截這個(gè)請(qǐng)求后，進(jìn)行相應(yīng)的操作，獲取返回值

由 app 調(diào)用 h5 中的回調(diào)函數(shù)，比如 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)

版權(quán)聲明：自由轉(zhuǎn)載-非商用-非衍生-保持署名（創(chuàng)意共享3.0許可證）