【quickhybrid】H5和Native交互原理
前言
Hybrid
架构的核心就是JSBridge
交互,而实现这个交互的前提是弄清楚H5和Native端的交互
本文主要介绍Native端(Android/iOS)和H5端(泛指前端)的交互原理
(之前也整理过类似的文章,本系列重新梳理)
Native
与H5
交互的两种方式
原生和前端的交互有两种方式: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'
注意:
在Android
4.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<String>() {
@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 <JavaScriptCore/JavaScriptCore.h>
然后原生需要注册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时,需要获取顶层窗口的引用
返回根目录
源码
github
上这个框架的实现
【quickhybrid】H5和Native交互原理的更多相关文章
- Android中H5和Native交互的两种方式
Android中H5和Native交互的两种方式:http://www.jianshu.com/p/bcb5d8582d92 注意事项: 1.android给h5页面注入一个对象(WZApp),这个对 ...
- H5与Native交互之JSBridge技术
一.原理篇 下面分别介绍IOS和Android与Javascript的底层交互原理 IOS 在讲解原理之前,首先来了解下iOS的UIWebView组件,先来看一下苹果官方的介绍: You can us ...
- H5与Native交互的实现
PDF文件下载:将后缀png改成PDF.
- Hybrid APP之Native和H5页面交互原理
Hybrid APP之Native和H5页面交互原理 Hybrid APP的关键是原生页面与H5页面直接的交互,如下图,痛过JSBridge,H5页面可以调用Native的api,Native也可调用 ...
- Hybrid APP基础篇(三)->Hybrid APP之Native和H5页面交互原理
本文已经不维护,新地址: http://www.cnblogs.com/dailc/p/8097598.html 说明 Hybrid模式原生和H5交互原理 目录 前言 参考来源 前置技术要求 楔子 A ...
- 安卓Native和H5页面进行交互
安卓Native和H5页面进行交互 1.H5页面调用安卓Native界面 1)通过给webView添加JsInterface,安卓提供接口,让H5来进行调用 a)安卓写一个类,里面的方法需要用通 ...
- H5:加载原理,慢加载和卡顿原因分析,
前端H5工作原理: 请求和显示原理 H5页面卡顿原因分析: 1.动画太多:渲染重绘占用GPU 2.页面操作导致重绘频繁 3.页面元素复杂:资源类标签太多(图像/视频/dom树太长) 4.内置webvi ...
- 《React Native 精解与实战》书籍连载「React Native 底层原理」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- 与native交互时会出现的问题
1.jsbridge: 可以用jsbridge与native交互,这属于第三方库,前端后端都需要加jsbridge 2.可以直接调用原生的方法,ios: window.webkit.message ...
随机推荐
- Python_Python遍历列表的四种方法
方式一: app_list = [1234, 5677, 8899] <!-- lang: python --> for app_id in app_list: <!-- lang: ...
- 解决打开MATLAB时出现“Waring:could not read file classpath.txt”,等问题
估计刚安装好的matlab是不会出现这个问题的,出现问题肯定是在某一次用360或者电脑管家清理垃圾之后才会出现这个问题. 首先声明我的matlab版本是matlab R2014a,下载链接:(额,网盘 ...
- Sqoop的安装部署
在root的用户下 1):前提 安装JDK环境 2):前提 安装Hadoop和Hive客户端环境,如果需要导出到HBase则需要安装HBase客户端 3):下载sqoop : 命令: wget htt ...
- html2cavans
简介:http://www.jianshu.com/p/6a07e974a7e8 下载:https://github.com/niklasvh/html2canvas/releases C#代理git ...
- FTP配置的一些笔记
1.必须关闭防火墙 iptables -F iptables -X iptables -Z vi /etc/selinux/config SELINUX=disabled seten ...
- Windows 配置 allure report 环境
1:配置Java环境(运行allure 需要) 2:安装powershell 3:安装scoop方法 :运行 powershell 输入 : iex (new-object net.webclient ...
- [译]ASP.NET Core 2.0 区域
问题 如何将一个规模庞大的ASP.NET Core 2.0应用程序进行逻辑分组? 答案 新建一个ASP.NET Core 2.0空项目,修改Startup类,增加Mvc服务和中间件: public v ...
- curl模拟带验证码的登录
首先说明,不是用php自动识别验证码,而是有验证码的情况下,让你通过curl 带着cookies去请求远程资源,从而通过合法的身份验证.主要用来抓取需要登录后才能访问的资源. 思路就是获取到验证码之后 ...
- 关于史考特证券(scottrade Inc)资金转出的手续费问题
投资美股账户的朋友可能开始的时候并没有关心史考特账户转出的费用,其实,仔细算一下这个费用还是蛮贵的,根据官网的文档可以明确知道,转出史考特账户资金到国内银行的费用由以下几项组成: 1. 国际电汇资金费 ...
- netty 入门(一)
netty Netty提供异步的.事件驱动的网络应用程序框架和工具,用以快速开发高性能.高可靠性的网络服务器和客户端程序.更确切的讲是一个组件,没有那么复杂. 例子 一 Discard服务器端 我们 ...