【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(){ @JavascriptInterfacepublic String foo(){ return "foo"; } @JavascriptInterfacepublic 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>() {@Overridepublic 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:'+titlereturn [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
【quickhybrid】H5和Native交互原理相关推荐
- h5 和native 交互那些事儿
前端菜菜一枚,写下关于h5 和native 交互那些事情.偏前端,各种理论知识,不在赘述.之前有各位大牛已经写过.我只写代码,有问题,下面留言 /* 关于h5 和native 之间的交互 JSBrid ...
- Android内部h5和native交互实现方式
Android具体实现方式 一.实现方式 a.h5调用native: Android实现h5到native的方式为截获h5调用的特定url,一般url都是http://**这种,为了能够捕获h5调用的 ...
- H5与Native交互之JSBridge技术
一.原理篇 下面分别介绍IOS和Android与Javascript的底层交互原理 IOS 在讲解原理之前,首先来了解下iOS的UIWebView组件,先来看一下苹果官方的介绍: You can us ...
- H5与Native交互之JSBridge技术 1
做过混合开发的很多人都知道Ionic和PhoneGap之类的框架,这些框架在web基础上包了一层Native,然后通过Bridge技术使得js可以调用视频.位置.音频等功能.本文就是介绍这层Bridg ...
- android与h5交互设计,H5与native交互之JSBridge
JSBridge 1. Why do we need JSBridge? 2. Why is "JS"Bridge? 3. What is JSBridge? Why do ...
- 【前端基础】Web与Native交互之The JSBridge FAQ
今天我们来简单聊一下JSBridge 为什么要聊JSBridge? 不为什么 好吧,JSBridge虽然也算比较古老了,但关于JSBridge的原理也是一个目前作为一名前端开发人员需要了解掌握的知识. ...
- native html5 区别,H5与Native优劣对比
即将启动爱奇艺商城(mall.iqiyi.com)移动端的native化. 项目开始之前当然要梳理下为什么做native,究竟H5跟native比有什么劣势,而H5又为什么占比那么高并且有" ...
- 移动端 h5和原生交互的方式
一.h5传递给原生WebView的数据协议 传递的是个json字符串: {"id": "random_value","action": &q ...
- Android 和H5之间的交互-框架篇
就目前而言,app的开发主要分三个方向:native app.hybrid app以及web app.个人感觉三种app的体验感是逐渐递减的. hybrid app和web app的开发的不同之处就是 ...
最新文章
- 聚合Aggregation与合成Composition
- Linux6.x修改出eth0网卡的解决方法
- Mysql错误1045解决方法
- 关于在Webservice里使用LinqToSQL遇到一对多关系的父子表中子表需要ToList输出泛型而产生循环引用错误的解决办法!(转)...
- 完美的代价 c语言,蓝桥杯基础练习 完美的代价
- numpy报错:ValueError: numpy.ufunc size changed, may indicate binary incompatibility.
- python3(十一)内置模块和类型转换
- Spring Integration Java DSL示例
- linux内核死锁检测机制 | oenhan,Linux内核CPU负载均衡机制 | OenHan
- 【clickhouse】Code: 135. DB::Exception: Received from xxx:9000. DB::Exception: Indices in strings are
- 手机移动端浏览器或PC端浏览器莫名出现计算错误或莫名返回到登录界面等问题的解决.
- springboot开发者工具包,自动监听内容改变,自动更新重启
- C/C++创建服务器和客户端的demo
- 牛客网sql练习题解(43-51)
- 徐有高:为你详细解读我国40省市新能源汽车补贴政策(转载)
- 乐吾乐le5le-Topology为智慧水务可视化赋能(一)
- php 屏蔽deprecated,解决php deprecated 的问题
- Python的学习之旅第一站:基本语法
- php 时间加法函数_PHP 日期时间函数的高级应用技巧
- 对勾函数的性质及其应用
热门文章
- python 爬虫源代码-python 爬虫-1:下载网页源代码
- 自学python方法-十二种学习Python的方法【Programming】
- 关于ECS设计以及MVC分层设计和组件化设计的思考和总结(这个标题就问你长不长)
- UVa 941 Permutations
- Revising Aggregations - Averages(集合函数-avg)
- this.getClass()和super.getClass()得到的是同一个类
- 开源企业IM免费企业即时通讯ENTBOOST V2014.177版本号正式公布
- java设计模式-建造者模式
- 面试7 GC机制中如何判断一个对象是否任在使用
- 八、word-space与letter-space