Hybrid APP基礎篇(三)->Hybrid APP之Native和H5頁面交互原理

来源:http://www.cnblogs.com/dailc/archive/2016/10/04/5931322.html
-Advertisement-
Play Games

說明 Hybrid模式原生和H5交互原理 目錄 前言 參考來源 前置技術要求 楔子 Android、iOS原生和H5的基本通信機制 Android端 iOS端 原生和H5的另一種通訊方式:JSBridge 什麼是JSBridge 為什麼要用JSBridge JSBridge原理以及實現 前言 參考來 ...


說明

Hybrid模式原生和H5交互原理

目錄

前言

參考來源

前人栽樹,後臺乘涼,本文參考了以下來源

前置技術要求

閱讀本文前，建議先閱讀以下文章

楔子

Hybrid APP的關鍵是原生頁面與H5頁面直接的交互,本文做簡單介紹

Android、iOS原生和H5的基本通信機制

在Hybrid APP中,原生與H5的交互方式在Android和iOS上的實現是有異同的,原因是Android、iOS的通信機制有所區別,下麵介紹原生和H5相互調用的方法

Android端

Native調JS

4.4版本之前

// mWebView = new WebView(this); //即當前webview對象			
mWebView.loadUrl("javascript: 方法名('參數,需要轉為字元串')"); 

//ui線程中運行
 runOnUiThread(new Runnable() {  
        @Override  
        public void run() {  
            mWebView.loadUrl("javascript: 方法名('參數,需要轉為字元串')");  
            Toast.makeText(Activity名.this, "調用方法...", Toast.LENGTH_SHORT).show();  
        }  
});

4.4以後(包括4.4)

//非同步執行JS代碼,並獲取返回值	
mWebView.evaluateJavascript("javascript: 方法名('參數,需要轉為字元串')", new ValueCallback() {
        @Override
        public void onReceiveValue(String value) {
    		//這裡的value即為對應JS方法的返回值
        }
});

如上所示,Native用H5頁面中的JS方法,有如下特點

  • 4.4之前Native通過loadUrl來調用JS方法,只能讓某個JS方法執行,但是無法獲取該方法的返回值
  • 4.4之後,通過evaluateJavascript非同步調用JS方法,並且能在onReceiveValue中拿到返回值
  • 不適合傳輸大量數據(大量數據建議用介面方式獲取)
  • mWebView.loadUrl("javascript: 方法名('參數,需要轉為字元串')");函數需在UI線程運行，因為mWebView為UI控制項(但是有一個壞處是會阻塞UI線程)

JS調Native

 WebSettings webSettings = mWebView.getSettings();  
 //Android容器允許JS腳本，必須要
webSettings.setJavaScriptEnabled(true);
//Android容器設置僑連對象
mWebView.addJavascriptInterface(getJSBridge(), "JSBridge");

Android中JSBridge的代碼

//Android4.2版本以上，本地方法要加上註解@JavascriptInterface，否則會找不到方法。
private Object getJSBridge(){  
    Object insertObj = new Object(){  
    	@JavascriptInterface
        public String foo(){  
            return "foo";  
        }  
        
        @JavascriptInterface
        public String foo2(final String param){  
            return "foo2:" + param;  
        }  
          
    };  
    return insertObj;  
}

Html中JS調用原生的代碼

//調用方法一
window.JSBridge.foo(); //返回:'foo'
//調用方法二
window.JSBridge.foo2('test');//返回:'foo2:test'

如上所示,Native中通過addJavascriptInterface添加暴露出來的JS橋對象,然後再該對象內部聲明對應的API方法,有如下特點:

  • 在Android4.2以上(api17後),暴露的api要加上註解@JavascriptInterface，否則會找不到方法。
  • 在api17以前,addJavascriptInterface有風險,hacker可以通過反編譯獲取Native註冊的Js對象，然後在頁面通過反射Java的內置 靜態類，獲取一些敏感的信息和破壞

    所以,也就是為什麼Android中也會使用JSBridge來進行交互,而不是addJavascriptInterface直接暴露api

  • JS能調用到已經暴露的api,並且能得到相應返回值

iOS端

Native調JS

//可以取得JS函數執行的返回值
//方法必須是Html頁面綁定在最頂層的window上對象的
//如window.top.foo
//Swift
webview.stringByEvaluatingJavaScriptFromString("方法名(參數)")
//OC
[webView stringByEvaluatingJavaScriptFromString:@"方法名(參數);"];

如上所示,Native通過stringByEvaluatingJavaScriptFromString調用Html綁定在window上的函數,有如下特點

  • Native調用JS方法時,能拿到JS方法的返回值
  • 不適合傳輸大量數據(大量數據建議用介面方式獲取)

JS調Native

引入官方的庫文件

#import <JavaScriptCore/JavaScriptCore.h>

Native註冊api函數(OC)

//webview載入完畢後設置一些js介面
-(void)webViewDidFinishLoad:(UIWebView *)webView{
    [self hideProgress];
    [self setJSInterface];
}

-(void)setJSInterface{
    
    JSContext *context =[_wv valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    
    // 註冊名為foo的api方法
    context[@"foo"] = ^() {
    	
    	//獲取參數
        NSArray *args = [JSContext currentArguments];
        NSString *title = [NSString stringWithFormat:@"%@",[args objectAtIndex:0]];
        //做一些自己的邏輯
        //返回一個值  'foo:'+title
        return [NSString stringWithFormat:@"foo:%@", title];
    };
    

    
}

Html中JS調用原生的代碼

//調用方法,用top是確保調用到最頂級,因為iframe要用top才能拿到頂級
window.top.foo('test'); //返回:'foo:test'

如上所示,Native中通過引入官方提供的JavaScriptCore庫(iOS7中出現的),然後可以將api綁定到JSContext上(然後Html中JS預設通過window.top.***可調用)。有如下特點

  • iOS7才出現這種方式,在這之前,js無法直接調用Native,只能通過JSBridge方式簡介調用
  • JS能調用到已經暴露的api,並且能得到相應返回值
  • iOS原生本身是無法被JS調用的,但是通過引入官方提供的第三方"JavaScriptCore",即可開放api給JS調用

原生和H5的另一種通訊方式:JSBridge

實際上,Native與H5通信,除了前面提到的用基本方法外,還有一種廣為流行的方法:JSBridge

什麼是JSBridge

JSBridge是廣為流行的Hybrid開發中JS和Native一種通信方式,各大公司的應用中都有用到這種方法

簡單的說,JSBridge就是定義Native和JS的通信,Native只通過一個固定的橋對象調用JS,JS也只通過固定的橋對象調用Native,基本原理是:

H5->通過某種方式觸發一個url->Native捕獲到url,進行分析->原生做處理->Native調用H5的JSBridge對象傳遞迴調。如下圖

上圖簡單的介紹了下JSBridge的核心原理,具體詳細實現請參考後面詳解。

為什麼要用JSBridge

在上文中我們有提到Native和原生之間的基本通信,既然Native和原生已經能夠實現通信了,那為什麼還要這種通過url scheme的JSBridge方式呢,原因大致如下

  • Android4.2以下,addJavascriptInterface方式有安全漏掉
  • iOS7以下,JS無法調用Native
  • url scheme交互方式是一套現有的成熟方案,可以完美相容各種版本,不存在上述問題

另外,請註意,可以理解為JSBridge是一種交互理念,而上述的url scheme則是其中的一種實現,所以也就是說,就算後面實現變為了addJavascriptInterface,JavaScriptCore,也一樣是JSBridge交互

JSBridge交互的一個很大特點就是便於拓展,而且沒有重大的安全性問題,所以也就是為什麼它廣為流行

JSBridge原理以及實現

JSBridge的原理和實現請參考 JSBridge實現原理


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • ViewPager的刷新、限制預載入、緩存所有
    【框架】： 公共部分：左側菜單、TitleBar、RadioGroup(3個RadioButton:X、Y、Z) 選擇X頁面：指示器+ViewPager 【要達成的效果】： （1）左側選擇A，進入X頁面，X1聯網刷新頁面，此時禁止X2預載入—>滑動到X2頁面，X2才聯網刷新—>X3—>X4； （2） ...
  • Activty四種啟動模式
    Activty啟動提供了四種啟動模式。launchMode: standard:每次啟動新的活動視窗(new操作) singleTop:如果在棧頂是目標活動,則直接打開.否則開啟新的活動視窗(new). singleTask和singleInstance基本上相同.差別在於若根活動設置為single ...
  • onSaveInstanceState的執行時機
    當某個activity變得“容易”被系統銷毀時，該activity的onSaveInstanceState就會被執行，除非該activity是被用戶主動銷毀的，例如當用戶按BACK鍵的時候。 註意上面的雙引號，何為“容易”？言下之意就是該activity還沒有被銷毀，而僅僅是一種可能性。這種可能性有 ...
  • iOS 相機
    本章節主要為之前項目 JXHomepwner 添加照片功能（項目地址）。具體任務就是顯示一個 UIImagePickerController 對象，使用戶能夠為 JXItem 對象拍照並保存。拍攝的照片會和相應的 JXItem 對象建立關聯，當用戶進入某個 JXItem 對象的詳細視圖的時候，可以看 ...
  • Hybrid APP基礎篇(五)->JSBridge實現示例
    說明 JSBridge實現示例 目錄 前言 參考來源 楔子 JS實現部分 說明 實現 Android實現部分 說明 JSBridge類 實現 Callback類 實現 Webview容器關鍵代碼 實現 API 類實現 iOS實現部分 說明 WebViewJavascriptBridgeBase 實現 ...
  • 事件分發時候的onTouchEvent，onInterceptTouchEvent，dispatchTouchEvent調用順序
    一直想弄清楚onTouchEvent，onInterceptTouchEvent，dispatchTouchEvent的執行順序，以及內部使用switch (event.getAction())中的執行順序。趁這次機會趕緊弄清楚。 重寫上面幾個方法後。我們在LogCat中看看列印的結果。 一.isO ...
  • Hybrid APP基礎篇(四)->JSBridge的原理
    說明 JSBridge實現原理 目錄 前言 參考來源 前置技術要求 楔子 原理概述 簡介 url scheme介紹 實現流程 實現思路 第一步:設計出一個Native與JS交互的全局橋對象 第二步:JS如何調用Native 第三步:Native如何得知api被調用 第四步:分析url-參數和回調的格 ...
  • 基於OpenSLL的RSA加密應用(非演算法)
    基於OpenSLL的RSA加密應用(非演算法) === iOS開發中的小伙伴應該是經常用der和p12進行加密解密，而且在通常加密不止一種加密演算法，還可以加點兒鹽吧~本文章主要闡述的是在iOS中基於openSLL的RSA加密。一共有兩種方式，一種是基於p12加密解密的，還有一種是博客園官方提供的公鑰字 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類