Skip to content

Commit bf461fd

Browse files
illusionspacesillusionspaces
authored
Update README.md
1 parent 41f13ac commit bf461fd

File tree

1 file changed

+97
-30
lines changed

1 file changed

+97
-30
lines changed

‎README.md‎

Lines changed: 97 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@
88
![ARC](https://img.shields.io/badge/ARC-orange.svg)
99

1010
## 版本说明：
11-
### 1.release 0.0.6：由于苹果近期给开发者邮件说明，要求尽快删除UIWebView等相关API，因此新增release 0.0.6版本，删除UIWebView的支持。
12-
### 2.release 0.1.0：增加WKJSBridge.js，对JS侧接口做了完善，统一入口，提供参数传递，成功、失败回调。
11+
### 1.`release 0.0.6`：由于苹果近期给开发者邮件说明，要求尽快删除UIWebView等相关API，因此新增release 0.0.6版本，删除UIWebView的支持。
12+
### 2.`release 0.1.0`：增加`WKJSBridge.js`，对JS侧接口做了完善，统一入口，提供参数传递，成功、失败回调。
13+
### 3.`release 0.1.3`：将`WKJSBridge.js`拆分为`wk_bridge_ interface.js`和`wk_bridge_channel.js`，分别负责对h5暴漏接口和js-native通信使用。`wk_bridge_ interface.js`属于业务层，不包含在pod内，属于业务方自定义扩展使用，具体可以参考demo。
1314

1415

1516
## Link
@@ -26,9 +27,9 @@
2627

2728
## 介绍
2829

29-
**iOS 基于WKWebView的JS-Native交互框架，功能强大，轻松集成，一行代码即可，业务框架分离，易于拓展。**
30+
**iOS 基于WKWebView的JS-Native交互框架，功能强大，轻松集成，一行代码即可，业务框架分离，易于拓展，致力于让h5调用native像调用一个接口那样简单。**
3031
**关于通信方案说明：**
31-
* WKWebView使用addScritMessageHandler构建通信，苹果提供的bridge，可以理解为亲儿子，好处自然不用多说。
32+
* WKWebView使用`addScritMessageHandler`构建通信，苹果提供的bridge，可以理解为亲儿子，好处自然不用多说。
3233

3334
**架构图**
3435

@@ -41,14 +42,14 @@
4142

4243
## 特性
4344
- 一行代码即可让WebView能力无限。
45+
- 支持h5扩展自定义插件。
46+
- 插件化JS-Native业务逻辑，业务完全分离，最大化解耦。
47+
- 支持在不影响原业务的情况下，集成超简单。（相当于在不影响原bridge的情况下新搭建了个bridge供h5使用）
48+
- 支持业务模块异步回调。
49+
- 基于__attribute( )函数进行插件注册，业务模块的注册只需要在自己内部注册即可，摆脱plist等传统注册方式。目前已知[阿里BeeHive](https://github.com/alibaba/BeeHive)/[美团Kylin组件](https://juejin.im/post/5c0a17d6e51d4570cf60d102)皆使用此方式进行注册。目前注册功能为插件是否提前预加载提供。
4450
- 针对WKWebView进行了Cookie丢失处理。
4551
- 针对WKWebView白框架屏问题进行了处理。
4652
- 针对WKWebView所带来的一些Crash问题进行了容错处理。
47-
- 插件化JS-Native业务逻辑，业务完全分离，解耦。
48-
- 不提供WebView&Controller，支持在不影响原业务的情况下，插件化集成。
49-
- 基于__attribute( )函数进行插件注册，业务模块的注册只需要在自己内部注册即可，摆脱plist等传统注册方式。目前已知[阿里BeeHive](https://github.com/alibaba/BeeHive)/[美团Kylin组件](https://juejin.im/post/5c0a17d6e51d4570cf60d102)皆使用此方式进行注册。目前注册功能为插件是否提前预加载提供。
50-
- 业务模块回调参框架数给JS侧进行了统一回调处理。
51-
5253

5354

5455
## 安装
@@ -58,9 +59,10 @@
5859
下载WKJavaScriptBridge文件夹，将WKJavaScriptBridge文件夹拖入到你的工程中。
5960

6061
### 2.CocoaPods
61-
1. 在 Podfile 中添加 `pod 'WKJavaScriptBridge', '~> 0.1.0'`。
62+
1. 在 Podfile 中添加 `pod 'WKJavaScriptBridge', '~> 0.1.3'`。
6263
2. 执行 `pod install` 或 `pod update`。
63-
3. 导入 `<WKWebViewEngine.h>`。
64+
3. native侧导入 `<WKWebViewEngine.h>`。
65+
4. js侧引入`wk_bridge_channel.js`，如果使用了类似于demo的`wk_bridge_ interface.js`，只需引入`wk_bridge_ interface.js`即可。
6466

6567

6668
## 用法
@@ -166,44 +168,109 @@ configuration.processPool = self.processPool;
166168
[self.commandDelegate sendPluginResult:result callbackId:command.callbackId];
167169
}
168170
171+
@end
172+
```
173+
4.构建配置native端插件：用于给js调用，（iOS & android）两端需要相同的serviceId和actionId，才能启动相同的事件。
174+
```objc
175+
@interface WKJSBridgeConfig : WKBasePlugin
176+
- (void)fetchConfig:(WKMsgCommand *)command;
177+
@end
178+
```
179+
180+
```objc
181+
@WKRegisterWebPlugin(WKJSBridgeConfig)
182+
183+
@implementation WKJSBridgeConfig
184+
185+
- (void)fetchConfig:(WKMsgCommand *)command {
186+
NSDictionary *dict = @{
187+
@"fetch_id":@{//服务ID
188+
@"service":@"WKFetchPlugin",
189+
@"action":@{//具体事件
190+
@"action_get":@"nativeGet",
191+
@"action_post":@"nativePost"
192+
}
193+
}
194+
};
195+
WKPluginResult *result = [WKPluginResult resultWithStatus:WKCommandStatus_OK messageAsDictionary:dict];
196+
[self.commandDelegate sendPluginResult:result callbackId:command.callbackId];
197+
}
169198
@end
170199
```
171200

172201
这样一个插件就定义完毕了：插件的意思就是独立的，与其他功能模块无耦合的业务模块，用来处理一类JS-Native的交互。例如JS想要获取地图信息、wifi信息、文件处理等都可以定义为一个插件。插件的好处就是无耦合！！！拖入项目可以直接使用，删除后项目也不需要做任何修改，直接build！以后再有新的交互需求你只需要按照上面的步骤创建插件完成功能并把结果返回给JS就可以了！不需要动框架！！
173202

174203
### 4.自定义业务插件（JS侧）
175204

176-
JS侧目前还没有开放插件化功能，但是完成了公共接口封装，提供了成功失败回调函数，便于JS侧处理Native返回的结果：
205+
1.以下为demo中自定义js插件代码，详情可参照demo：
206+
```js
207+
/**
208+
* 调用 Natvie Post 网络请求 方法
209+
* @param actionArgs 数据
210+
* @param callback 调用回调
211+
*/
212+
wk_bridge.prototype.nativePost = function (actionArgs, successCallback, failCallback) {
213+
var fetchConfig = bridgeConfig.fetch_id;
214+
var service = fetchConfig.service;
215+
var action = fetchConfig.action.action_post;
216+
window.WKJSBridge.callNative(service, action, actionArgs, successCallback, failCallback);
217+
};
218+
219+
/**
220+
* 调用 Natvie Get 网络请求 方法
221+
* @param actionArgs 数据
222+
* @param callback 调用回调
223+
*/
224+
wk_bridge.prototype.nativeGet = function (actionArgs, successCallback, failCallback) {
225+
var fetchConfig = bridgeConfig.fetch_id;
226+
var service = fetchConfig.service;
227+
var action = fetchConfig.action.action_get;
228+
window.WKJSBridge.callNative(service, action, actionArgs, successCallback, failCallback);
229+
};
230+
```
177231

178-
1. JS调用Native
232+
2. JS调用Native
179233
index.html中引用<script type="text/javascript" src="WKJSBridge.js" ></script>
180234

181235
```js
182-
//功能模块
183-
var service = 'WKFetchPlugin';
184-
//具体功能
185-
var action = 'nativeFentch';
186-
//业务参数
187-
var command = {
188-
'method':'post',
189-
'url':'https:www.baidu.com'
236+
// 模拟h5使用native来发送post请求
237+
function pokePost() {
238+
//业务参数
239+
var command = {
240+
'method':'post',
241+
'url':'https:www.baidu.com'
242+
}
243+
window.wk_bridge.nativePost(command, function success(res) {
244+
document.getElementById("returnValue").value = res.result;
245+
}, function fail(res) {
246+
document.getElementById("returnValue").value = res.result;
247+
});
248+
}
249+
250+
// 模拟h5使用native来发送get请求
251+
function pokeGet() {
252+
//业务参数
253+
var command = {
254+
'method':'get',
255+
'url':'https:www.baidu.com'
256+
}
257+
window.wk_bridge.nativeGet(command, function success(res) {
258+
document.getElementById("returnValue").value = res.result;
259+
}, function fail(res) {
260+
document.getElementById("returnValue").value = res.result;
261+
});
190262
}
191-
window.WKJSBridge.callNative(service, action, command, function success(res) {
192-
193-
}, function fail(res) {
194-
195-
});
196263
```
197264

198265
`command`为想要传递的参数。
199-
`service`为Native侧插件类名。
200-
`action`为插件方法名。
266+
`nativePost`为第一步自定义的js插件。
267+
`pokeGet`为第一步自定义的另一个插件，
201268

202-
2. 详细使用参照Demo。
269+
3. 详细使用参照Demo。
203270

204271
## 后续功能延伸：
205272

206-
1. JS侧插件化。
273+
1. JS侧插件化。（complete）
207274
2. 基于此引入离线包。
208275
3. 引入flutter。
209276
4. 构建小程序。

0 commit comments

Comments
 (0)