以下内容若有问题烦请即时告知我予以修改,以免误导更多人。
- 以调用Native上传图片组件为例
- Hybrid通信原理
- JS Bridge
以调用Native上传图片组件为例
1 | <script> |
- format传入参数实现
“//webapp/js/base.js”,1
2
3
4
5
6
7
8<script>
String.prototype.format = function () {
for (var temS = this, i = 0; i < arguments.length; ++i) {
temS = temS.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);
}
return temS;
}
</script>
+new Date()
1 | <script> |
Array.prototype.slice.call(arguments, 0)
剖析
将具有length属性的对象转成数组
1 | <script> |
1 | <script> |
- JS Bridge建立Native与H5间通信
1 | <script> |
Hybrid通信原理
背景:原生APP开发中有一个webview的组件(Android中是webview,iOS7以下有UIWebview,7以上有WKWebview),这个组件可以加载Html文件。
IOS
- Object-C可直接调用js,只需调用stringByEvaluatingJavaScriptFromString即可,可直接获取js返回值。
- js不可直接调用Object-C,利用 shouldStartLoadWithRequest,需拦截每个url,对指定的schema进行拦截做相应的本地方法。
Android
- Java可直接调用js,但不可直接获取js返回值。
- Java注册addJavascriptInterface 后,js可直接调用Native的接口,并获取Native的返回值。让Java跟Javascript更加亲密
- 通过 shouldOverrideUrlLoading,也还是拦截Web的所有URL请求来达到通信的目的。
基础通信存在以下问题
Android4.2以下,addJavascriptInterface方式有安全漏洞
iOS7以下,js无法调用Native
JS Bridge
- url scheme交互方式是一套现有的成熟方案,可以完美兼容各种版本,不存在上述问题。
通过JSBridge(JS和Native通信机制),H5页面可以调用Native的api,Native也可调用H5页面的方法或者通知H5页面回调。
原理:
(1)初始化创建的一个style.display=none 的iframe,并将iframe.src设置为自有协议,每次js需要与Native通信时,js端主动调用iframe.src即可,Native收到请求通知后,反向调用fetchQueue(可见源码)获取消息内容;若Native需要与js通信,直接调用js,并获取返回值
(2)
IOS
js->Native:js将要发送的消息存放在js端->调用iframe.src,触发通知Native->Native拦截请求,调用js bridge里面的fetchQueue并获取返回的消息内容,处理消息->将需要返回的数据通过直接调用js的方式,让js处理Android
js->Native: 通过 shouldOverrideUrlLoading 携带Js的返回值
(3)Native->js: Native可直接调用Js并获取返回的内容
更多内容可以订阅本人微信公众号,一起开启前端小白进阶的世界!