如果您有好的建议,欢迎 Issue
或贡献代码!
如果您在使用此库时遇到任何问题,可以通过我的邮箱或 Issue
联系到我。
使用 CocoaPods 安装
pod 'JXBWebKit', '~> 1.2.1'
手动安装
将 JXBWebKit
文件夹拖到你的项目中.
注意需要选择 Copy
选项并选择 "Copy items into destination group's folder" and select "Create groups for any folders".
示例
打开 JXBWebKitProject
直接执行项目。
使用方法
1.可以直接使用 JXBWebViewController
实例对象打开远程和本地的 HTML
.
2.可以从 JXBWebViewController
派生出一个子类,使用该子类实例打开远程和本地的 HTML
.
3.还可以从 JXBWKWebViewPool
获取一个可复用的 WebView
,使用该 WebView
打开远程和本地的 HTML
.
提供的功能
1.WebView
驱动适配不同机型。
2.UI
支持(进度条、进度条颜色、后退及关闭按钮)。
3.支持拦截URL。
4.通过JSBridge
和Web
进行交互,实测任何场景的交互操作都满足要求!例如:
- 打开
naive
的任意页面。 - 获取
native
的定位、推送、相册、相机等权限。 - 获取
native
数据。 - 调用
native
的任意API
。 - 其他
5.为子类提供WebView
父类的hook
操作。
6.支持WKWebView
的复用,通过复用优化启动性能以及内存占用。
7.支持各种自定义浏览器的UserAgent
。
8.支持拦截WebView
的网络请求。
9.支持操作Cookie
。
10.demo
中提供了让业务H5
页面瞬间加载的解决方案(HTML模板渲染 & 静态资源离线包)。
- 目前市面上大多数新闻类APP都使用的是HTML模板渲染方案。
- 除了资讯类页面外,其他业务场景的H5页面都可以使用离线包方案。
注意
关于上述第10条中提到的H5瞬间加载方案需要server
进行配合,因此在这里我使用了Go
语言进行后台开发,server
提供了两个API
:
1.一个普通的get
请求,client
通过获取响应数据中的html
渲染模板进行渲染。
2.一个下载服务器离线包资源的接口。
当然,要想查看这个功能的具体实现效果,需要在本地配置Go
的开发环境,以下是具体步骤:
1.使用brew install go
安装golang。
2.环境配置
(1)使用cd ~
切换到根目录。
(2)使用ls -all
查看所有文件,看是否含有.bash_profile
文件。
(3)如果没有,就创建一个touch .bash_profile
。
使用vim
打开.bash_profile
进行编辑,i
进行编辑,编辑完成后:wq
退出,编辑内容如下:
export GOPATH=/Users/<your name>/Documents/go
export GOBIN=$GOPATH/bin
export PATH=$PATH:$GOBIN
(4)切换到Documents
文件夹,创建go
文件夹,然后在go
文件夹下分别创建bin
、src
文件夹,src
就是以后存放项目的文件夹。
(5)在终端输入go env
命令查看配置是否正确,GOBIN
有值表示配置没问题。
(6)在本工程内搜索文件夹GoProject > src > OfflineServer
,将OfflineServer
文件夹拷贝至Documents > go > src
目录下。
(7)切换至Documents > go > src
。
(8)使用go build
编译项目。
(9)使用go run main.go
运行项目。
(10)不再需要开启server
服务可以control+c
退出。
整体架构
关于JSBridge的实现原理
图解
JS调用Native
示例代码大家可以通过两种方式获取,如下:
(1)找到当前工程目录,再找到GoProject -> src -> OfflineServer -> source
,在source
文件下有个压缩文件offline_pkg.zip
,将该文件复制到其他位置解压,找到resource
目录下的offline.js
文件,里面就有示例代码,比如:
获取native
的推送权限状态
function getPushAuthState() {
window.JXBJSBridge.call({
target : "push",
action : "getAuthorityState",
data : {
"id" : "123456789",
"name" : "zhangsan"
},
callback : {
success : function(result){document.getElementById('message').innerHTML = result;},
fail : function(result){document.getElementById('message').innerHTML = result;},
progress : function(result){document.getElementById('message').innerHTML = result;},
}
});
}
(2)在当前工程目录下有个JSResources.bundle
文件,显示包内容,里面有个index.html
,同样也有示例代码。
Object-C代码如何写?
与JS
约定好参数,target、action、data、callback
等。
target
:对应原生的目标类,格式为Service_target
。
action
:对应目标类的目标方法,格式为func_action:
。
data
:JS
传给Native
的数据。
callback
:Native
处理完业务后回调给JS
的结果。
示例:
//获取推送权限状态
- (void)func_getAuthorityState:(NSDictionary *)param {
BOOL isOpen = NO;
//获取id
NSString *ID = param[@"id"];
//获取name
NSString *name = param[@"name"];
//iOS8.0以上
UIUserNotificationSettings *setting = [[UIApplication sharedApplication] currentUserNotificationSettings];
if (setting.types != UIUserNotificationTypeNone) {
isOpen = YES;
}
void(^successCallback)(NSDictionary *result) = param[@"success"];
NSDictionary *resultDict = @{@"isOpen":@(isOpen)};
successCallback(resultDict);
}
如何与Android统一调用方式
当前库加载的注入脚本是JXBJSBridge.js
,当WebView
加载HTML
时会在window
上挂一个call
方法,此时call
方法相当于一个全局方法,供JS
调用,这个脚本文件同样可以提供给Android
使用,达到调用方式统一的目的。