android与h5交互原理,h5与原生 app 交互的原理

Posted weixin_39890543

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了android与h5交互原理,h5与原生 app 交互的原理相关的知识,希望对你有一定的参考价值。

h5与原生 app 交互的原理

现在移动端 web 应用,很多时候都需要与原生 app 进行交互、沟通(运行在 webview 中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能。所以,这次就来捋一捋 h5 与原生 app 交互的原理。

h5 与原生 app 的交互,本质上说,就是两种调用:

app 调用 h5 的代码

h5 调用 app 的代码

1. app 调用 h5 的代码

因为 app 是宿主,可以直接访问 h5,所以这种调用比较简单,就是在 h5 中曝露一些全局对象(包括方法),然后在原生 app 中调用这些对

de21c9072f9f

image

javascript

window.sdk = {

double = value => value * 2,

triple = value => value * 3,

};

android

webview.evaluateJavascript(``'window.sdk.double(10)'``, ``new ValueCallback() {

@Override

public void onReceiveValue(String s) {

// 20

}

});

ios

NSString *func = @``"window.sdk.double(10)"``;

NSString *str = [webview stringByEvaluatingJavaScriptFromString:func]; ``// 20

2. h5 调用 app 的代码

因为 h5 不能直接访问宿主 app,所以这种调用就相对复杂一点。

这种调用常用有两种方式:

由app向h5注入一个全局js对象,然后在h5直接访问这个对象

由h5发起一个自定义协议请求,app拦截这个请求后,再由app调用 h5 中的回调函数

2.1 由 app 向 h5 注入一个全局 js 对象

这种方式沟通机制简单,比较好理解,并且对于 h5 来说,没有新的东西,所以是比较推荐的一种方式。但这种方式可能存在安全隐患,详细查看 你不知道的 Android WebView 使用漏洞。

de21c9072f9f

image

android

webview.addJavascriptInterface(``new Object() {

@JavascriptInterface

public int double(value) {

return value * 2;

}

@JavascriptInterface

public int triple(value) {

return value * 3;

}

}, ``"appSdk"``);

****ios****

NSString *scripts = @``"window.appSdk = {double: value => value * 2, triple: value => value * 3}"``;

[webview stringByEvaluatingJavaScriptFromString:scripts];

javascript

window.appSdk.double(10); ``// 20

3. JsBridge 的使用

①首先在安卓项目的配置文件里引入资源文件:

de21c9072f9f

image

这一步我遇到了一个问题,就是开始的时候我把资源写在了Project的配置文件中,导致项目rebuild报错,如下图:

de21c9072f9f

image

然后去stackoverflow搜索了解了一下,应该是写在错误的配置文件了,于是将配置信息修改至Module:app的配置文件中,错误解决。

②接下来,就是编写java文件,修改xml文档,主要是要注册Handler,供JS调用,submitFromWe就是注册供JS调用的Handler的id,data是JS传过来的参数,CallBackFunction 函数中需要把JS需要的response返回给JS

de21c9072f9f

image

de21c9072f9f

image

③接下来在app/src/main目录下创建assets文件夹,编写一个简单的html文件。

de21c9072f9f

image

④使用基本就是这样了,可以看出来JsBridge通过封装,JS和Java之间的通信只需要实现两个步骤,使用起来很方便。现在这个最简单的demo就可以跑起来了。Run it now!

以上是关于android与h5交互原理,h5与原生 app 交互的原理的主要内容,如果未能解决你的问题,请参考以下文章

H5与原生APP交互方式 (IOS及安卓)

H5和Native交互原理

Android与H5交互 -- 点击H5跳转到 Android原生 页面

环法竞猜项目:H5与原生APP交互方式

Android WebView与H5交互汇总

Android WebView与H5交互汇总