h5与原生 app 交互的原理

转载: h5与原生交互的原理
转载: JsBridge的使用

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

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

1. app 调用 h5 的代码
2. h5 调用 app 的代码

1. app 调用 h5 的代码

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

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，所以这种调用就相对复杂一点。

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

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

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

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

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

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 的使用

参考资料：https://github.com/lzyzsd/JsBridge

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

image

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

image

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

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

image

image

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

image

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