Fei Blog

Native-H5-Communication

html Native
2018/03/15
阅读量:

在上篇博客提到，在H5开发的app中，希望调用手机自带浏览器显示附件,
在实际开发过程中，经常会用到原生app和H5互相调用的问题，
之前没有具体了解调用的机制，包括Native和H5如何互相通讯的实现机制。
近期参考了一些资料，整理成这篇博客。
方便之后继续完善。

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

url scheme交互

url scheme适用于所有的系统设备（低版本Android和低版本iOS都适用）
但是url scheme是通过url拦截实现的，在大量数据传输，以及效率上都有影响。
基本原理为

1
2
H5 -> 触发一个url（每一个功能代表的url都不同）-> Native端捕获到url->
Native端分析属于哪一个功能并执行 ->Native端调用H5中的方法将执行结果回调给H5

H5直接与Native交互

H5调Android

原生通过addJavascriptInterface注册，然后H5直接调用

Android调H5

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

H5调iOS

原生通过JavaScriptCore注册（需ios7以上），然后H5直接调用

iOS调H5

通过stringByEvaluatingJavaScriptFromString

参考链接

CATALOG
  1. 1. url scheme交互
  2. 2. H5直接与Native交互
    1. 2.1. H5调Android
    2. 2.2. Android调H5
    3. 2.3. H5调iOS
    4. 2.4. iOS调H5
  3. 3. 参考链接
Archive Tag
Total : 7
2018
2017
vue.js ios css html 移动端 js sort hexo Native