最近在做hybrid相关的工作，项目中用到了EasyJsWebView,代码量不大，一直想分析一下它的具体实现，抽空写了这篇文章。
1.前言
原生代码＋h5页面＋甚至React Native(或其他) 的方式开发移动客户端已经成为当前的主流趋势，因此老生常谈的一个问题就是原生代码与js的交互。原生代码中执行js代码，没什么可讲的直接webView执行js代码即可，本文主要由安卓的js调用原生的方式切入，分析iOS端是如何实现类似比较方便的调用的。
2.安卓端（js -> native interface）
对安卓的开发不是很熟，只是列举一个简单的例子讲述这样一种方式。
- native端
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
public void onCreate(Bundle savedInstanceState) { ... // 添加一个对象, 让JS可以访问该对象的方法, 该对象中可以调用JS中的方法 webView.addJavascriptInterface(new Contact(), "contact"); } private final class Contact { //Html调用此方法传递数据 public void showcontacts() { String json = "[{"name":"zxx", "amount":"9999999", "phone":"18600012345"}]"; // 调用JS中的方法 webView.loadUrl("javascript:show('" + json + "')"); } } |
- h5端
|
1 2 3 |
姓名 存款 电话 |
当h5页面加载时，onload方法执行，对应的native端中的Contact类中的showcontacts方法被执行。因此核心思想就是通过webView将native原生的类与自定义的js对象关联，js就可以直接通过这个js对象调用它的实例方法。
3.iOS端（js -> native interface）
上述安卓的js调用native的方式是如此简单明了，不禁想如果iOS端也有如此实现的话，这样同时即保证安卓，iOS，h5的统一性也能让开发者只用关心交互的接口即可。因此便引出了EasyJSWebView的第三方的框架（基于说明2设计），下面从该框架的使用出发，分析框架的具体实现。
说明：
- 1.iOS端虽然也可以通过
JSContext注入全局的方法但是达不到与安卓端统一- 2.iOS端可以通过拦截h5请求的url，通过url的格式区分类或方法，但是这样不够直观，也达不到与安卓端统一
4.EasyJsWebView
4.1 EasyJsWebView使用
本文直接列举EasyJsWebView Github README例子
- native端
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@interface MyJSInterface : NSObject - (void) test; - (void) testWithParam: (NSString*) param; - (void) testWithTwoParam: (NSString*) param AndParam2: (NSString*) param2; - (NSString*) testWithRet; @end // 注入 MyJSInterface* interface = [MyJSInterface new]; [self.myWebView addJavascriptInterfaces:interface WithName:@"MyJSTest"]; [interface release]; |
- js端
|
1 2 3 4 5 |
MyJSTest.test(); MyJSTest.testWithParam("ha:ha"); MyJSTest.testWithTwoParamAndParam2("haha1", "haha2"); var str = MyJSTest.testWithRet(); |
4.2 EasyJsWebView具体实现
4.2.1 EasyJsWebView初始化
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
- (id)init{ self = [super init]; if (self) { [self initEasyJS]; } return self; } - (void) initEasyJS{ self.proxyDelegate = [[EasyJSWebViewProxyDelegate alloc] init]; self.delegate = self.on-sy">]; self.delegate = self.原生代码中执行js代码，没什么可讲的直接webView执行js代码即可，本文主要由安卓的js调用原生的方式切入，分析iOS端是如何实现类似比较方便的调用的。
2.安卓端（js -> native interface）对安卓的开发不是很熟，只是列举一个简单的例子讲述这样一种方式。
当h5页面加载时， 3.iOS端（js -> native interface）上述安卓的js调用native的方式是如此简单明了，不禁想如果iOS端也有如此实现的话，这样同时即保证安卓，iOS，h5的统一性也能让开发者只用关心交互的接口即可。因此便引出了 说明：
4.EasyJsWebView4.1 EasyJsWebView使用本文直接列举EasyJsWebView Github README例子
4.2 EasyJsWebView具体实现4.2.1 EasyJsWebView初始化
|
