资讯专栏INFORMATION COLUMN

【quickhybrid】H5和Native交互原理

littlelightss / 944人阅读

摘要:然后中即可调用原生中注册的函数调用方法一返回调用方法二返回注意在以上后暴露的要加上注解,否则会找不到方法。

前言

Hybrid架构的核心就是JSBridge交互,而实现这个交互的前提是弄清楚H5和Native端的交互

本文主要介绍Native端(Android/iOS)和H5端(泛指前端)的交互原理
(之前也整理过类似的文章,本系列重新梳理)

NativeH5交互的两种方式

原生和前端的交互有两种方式:url scheme以及JavaScriptCore(在Android中是addJavascriptInterface

url scheme适用于所有的系统设备(低版本Android和低版本iOS都适用)

但是url scheme毕竟是通过url拦截实现的,在大量数据传输,以及效率上都有影响

另一种方法则在低版本中会有这样或那样的问题

如JavaScriptCore不支持iOS7以下,addJavascriptInterface在4.2以前有风险漏洞

当然了,时至今日,这些低版本造成的影响已经慢慢不再

url scheme交互

这个是最广为流传的交互方式,起因是因为在hybrid刚出来时,很多低版本都需要兼容,因此几乎都用的这种

一些概念:

一般清空下,url scheme是一种类似于url的链接,是为了方便app直接互相调用设计的

具体为,可以用系统的OpenURI打开一个类似于url的链接(可拼入参数),

然后系统会进行判断,如果是系统的url scheme,则打开系统应用,
否则找看是否有app注册这种scheme,打开对应app

- 需要注意的是,这种scheme必须原生app注册后才会生效,如微信的scheme为(weixin://)

而本文中混合开发交互的url scheme则是仿照上述的形式的一种方式

具体为,由前端页面通过某种方式触发scheme(如用iframe.src),

然后Native用某种方法捕获对应的url触发事件,然后拿到当前的触发url,
根据定义好的协议,分析当前触发了那种方法,然后根据定义来执行等

- 协议类似于:`quickhybrid://xxx`

- 一般这种交互的url没有必要在原生app配置中注册

注意⚠️: ️iOS10以后,urlscheme必须符合url规范,否则会报错,

基本原理:

H5 -> 触发一个url(每一个功能代表的url都不同)-> Native端捕获到url

-> Native端分析属于哪一个功能并执行 -> Native端调用H5中的方法将执行结果回调给H5

如下图:

相比于其它方案的优点:

Android4.2以下,addJavascriptInterface方式有安全漏掉

iOS7以下,JavaScriptCore无法使用

所以如果需要兼容这类型低版本的机型,url scheme方案是不二选择

H5直接与Native交互

分别包括Android,iOS中H5和原生互相调用,总结如下:

H5调Android-原生通过addJavascriptInterface注册,然后H5直接调用

Android调H5-原生通过loadUrl来调用H5,4.4及以上还可以通过evaluateJavascript调用

H5调iOS-原生通过JavaScriptCore注册(需ios7以上),然后H5直接调用

iOS调H5-通过stringByEvaluatingJavaScriptFromString

H5调Android:

首先,原生webview需要先注册可供前端调用的JS函数

 WebSettings webSettings = mWebView.getSettings();  
 // Android容器允许JS脚本,必须要
webSettings.setJavaScriptEnabled(true);
// Android容器设置侨连对象
mWebView.addJavascriptInterface(getJSBridge(), "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;  
}

然后H5中即可调用原生中注册的函数

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

注意:

在Android4.2以上(api17后),暴露的api要加上注解@JavascriptInterface,否则会找不到方法。

在api17以前,addJavascriptInterface有风险,hacker可以通过反编译获取Native注册的Js对象,

然后在页面通过反射Java的内置静态类,获取一些敏感的信息和破坏

Android调H5:

4.4版本之前

// 即当前webview对象     
mWebView = new WebView(this);       
mWebView.loadUrl("javascript: 方法名("参数,需要转为字符串")"); 

// ui线程中运行
runOnUiThread(new Runnable() {  
        @Override  
        public void run() {  
            mWebView.loadUrl("javascript: 方法名("参数,需要转为字符串")");  
            Toast.makeText(Activity名.this, "调用方法...", Toast.LENGTH_SHORT).show();  
        }  
});

4.4及以后(包括)

// 异步执行JS代码,并获取返回值    
mWebView.evaluateJavascript("javascript: 方法名("参数,需要转为字符串")", new ValueCallback() {
        @Override
        public void onReceiveValue(String value) {
            // 这里的value即为对应JS方法的返回值
        }
});

注意:

4.4之前Native通过loadUrl来调用JS方法,只能让某个JS方法执行,但是无法获取该方法的返回值

4.4及之后,通过evaluateJavascript异步调用JS方法,并且能在onReceiveValue中拿到返回值

mWebView.loadUrl("javascript: 方法名("参数,需要转为字符串")");

函数需在UI线程运行,因为mWebView为UI控件(但是有一个坏处是会阻塞UI线程)

H5调iOS:

OC为例

首先,需要引入JavaScriptCore

#import 

然后原生需要注册API

//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];
    };
    
}

之后前端就可以调用了

// 调用方法,用top是确保调用到最顶级,因为iframe要用top才能拿到顶级
window.top.foo("test"); // 返回:"foo:test"

注意:

引入官方提供的JavaScriptCore库(iOS7中出现的),然后可以将api绑定到JSContext上

(然后Html中JS默认通过window.top.*(iframe中时需加top)可调用)

iOS7之前,js无法直接调用Native,只能通过urlscheme方式间接调用

iOS调H5:

// 可以取得JS函数执行的返回值
// 方法必须是Html页面绑定在最顶层的window上对象的
// 如window.top.foo
// Swift
webview.stringByEvaluatingJavaScriptFromString("方法名(参数)")
// OC
[webView stringByEvaluatingJavaScriptFromString:@"方法名(参数);"];

注意:

Native调用JS方法时,能拿到JS方法的返回值

有iframe时,需要获取顶层窗口的引用

返回根目录

【quickhybrid】如何实现一个Hybrid框架

源码

github上这个框架的实现

quickhybrid/quickhybrid

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/14181.html

相关文章

  • quickhybrid】JSBridge的实现

    摘要:感觉直接看代码应该是最简单的,奈何每次写成文章时都得加一大堆的描述因此,先来看看最终完成后应该是什么样的。这里的对应中的,多数情况下我们认为它就是方法名。但是却包含了前端,,三个领域。 前言 本文介绍quick hybrid框架的核心JSBridge的实现 由于在最新版本中,已经没有考虑iOS7等低版本,因此在选用方案时没有采用url scheme方式,而是直接基于WKWebView实...

    Keagan 评论0 收藏0
  • quickhybrid】JSBridge的实现

    摘要:感觉直接看代码应该是最简单的,奈何每次写成文章时都得加一大堆的描述因此,先来看看最终完成后应该是什么样的。这里的对应中的,多数情况下我们认为它就是方法名。但是却包含了前端,,三个领域。 前言 本文介绍quick hybrid框架的核心JSBridge的实现 由于在最新版本中,已经没有考虑iOS7等低版本,因此在选用方案时没有采用url scheme方式,而是直接基于WKWebView实...

    Freeman 评论0 收藏0
  • quickhybrid】JS端的项目实现

    摘要:前言实现阶段之端的实现,重点描述这个项目的端都有些什么内容,是如何实现的。这个项目中,基于进行单元测试,而且并不是测试驱动,而是在确定好内容后,对核心部分的代码都进行单测。 前言 API实现阶段之JS端的实现,重点描述这个项目的JS端都有些什么内容,是如何实现的。 不同于一般混合框架的只包含JSBridge部分的前端实现,本框架的前端实现包括JSBridge部分、多平台支持,统一预处理...

    CHENGKANG 评论0 收藏0
  • quickhybrid】架构一个Hybrid框架

    摘要:前言虽然说本系列中架构篇是第一章,但实际过程中是在慢慢演化的第二版中才有这个概念,经过不断的迭代,演化才逐步稳定明确目标首先明确需要做成一个什么样的框架大致就是一套规范统一与,所有异步调用防止阻塞提供大部分原生功能的包括很多常用的功能给使用 前言 虽然说本系列中架构篇是第一章,但实际过程中是在慢慢演化的第二版中才有这个概念,经过不断的迭代,演化才逐步稳定 明确目标 首先明确需要做成一个...

    sutaking 评论0 收藏0
  • quickhybrid】架构一个Hybrid框架

    摘要:前言虽然说本系列中架构篇是第一章,但实际过程中是在慢慢演化的第二版中才有这个概念,经过不断的迭代,演化才逐步稳定明确目标首先明确需要做成一个什么样的框架大致就是一套规范统一与,所有异步调用防止阻塞提供大部分原生功能的包括很多常用的功能给使用 前言 虽然说本系列中架构篇是第一章,但实际过程中是在慢慢演化的第二版中才有这个概念,经过不断的迭代,演化才逐步稳定 明确目标 首先明确需要做成一个...

    bingchen 评论0 收藏0

发表评论

0条评论

littlelightss

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<