转载: h5与原生交互的原理
转载: JsBridge的使用
h5与原生 app 交互的原理
现在移动端 web 应用，很多时候都需要与原生 app 进行交互、沟通（运行在 webview 中），比如微信的 jssdk，通过 window.wx 对象调用一些原生 app 的功能。所以，这次就来捋一捋 h5 与原生 app 交互的原理。
h5 与原生 app 的交互，本质上说，就是两种调用：
- app 调用 h5 的代码
- h5 调用 app 的代码
1. app 调用 h5 的代码
因为 app 是宿主，可以直接访问 h5，所以这种调用比较简单，就是在 h5 中曝露一些全局对象（包括方法），然后在原生 app 中调用这些对
javascript
window.sdk = {
double = value => value * 2,
triple = value => value * 3,
};
android：
webview.evaluateJavascript(``'window.sdk.double(10)'``, ``new ValueCallback<String>() {
@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 使用漏洞。
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
①首先在安卓项目的配置文件里引入资源文件：
这一步我遇到了一个问题，就是开始的时候我把资源写在了Project的配置文件中，导致项目rebuild报错，如下图：
然后去stackoverflow搜索了解了一下，应该是写在错误的配置文件了，于是将配置信息修改至Module:app的配置文件中，错误解决。
②接下来，就是编写java文件，修改xml文档，主要是要注册Handler，供JS调用，submitFromWe就是注册供JS调用的Handler的id，data是JS传过来的参数，CallBackFunction 函数中需要把JS需要的response返回给JS
④使用基本就是这样了，可以看出来JsBridge通过封装，JS和Java之间的通信只需要实现两个步骤，使用起来很方便。现在这个最简单的demo就可以跑起来了。Run it now!
