HTML5和原生app進(jìn)行交互的方法？這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容，讓我們一起來(lái)看看吧！

站在用戶(hù)的角度思考問(wèn)題，與客戶(hù)深入溝通，找到梅縣網(wǎng)站設(shè)計(jì)與梅縣網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶(hù)體驗(yàn)好的作品，建站類(lèi)型包括：成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、成都外貿(mào)網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名與空間、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋梅縣地區(qū)。

h6與原生 app 交互的原理

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

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

1. app 調(diào)用 h6 的代碼

2. h6 調(diào)用 app 的代碼

1. app 調(diào)用 h6 的代碼

因?yàn)?app 是宿主，可以直接訪(fǎng)問(wèn) h6，所以這種調(diào)用比較簡(jiǎn)單，就是在 h6 中曝露一些全局對(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<String>() {
  @Override
  public void onReceiveValue(String s) {
    // 20
  }
});

ios

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

2. h6 調(diào)用 app 的代碼

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

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

1. 由app向h6注入一個(gè)全局js對(duì)象，然后在h6直接訪(fǎng)問(wèn)這個(gè)對(duì)象

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

2.1 由 app 向 h6 注入一個(gè)全局 js 對(duì)象

這種方式溝通機(jī)制簡(jiǎn)單，比較好理解，并且對(duì)于 h6 來(lái)說(shuō)，沒(méi)有新的東西，所以是比較推薦的一種方式。但這種方式可能存在安全隱患，詳細(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

NSString *scripts = @"window.appSdk = {double: value => value * 2, triple: value => value * 3}";
[webview stringByEvaluatingJavaScriptFromString:scripts];

javascript

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

2.2 由 h6 發(fā)起一個(gè)自定義協(xié)議請(qǐng)求

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

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

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

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

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

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

5. 由 app 調(diào)用 h6 中的回調(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;
}

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)HTML5和原生app進(jìn)行交互的方法大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章名稱(chēng)：HTML5和原生app進(jìn)行交互的方法
分享鏈接：http://www.chinadenli.net/article42/ihoehc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、關(guān)鍵詞優(yōu)化、軟件開(kāi)發(fā)、企業(yè)建站、企業(yè)網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)