JXBWebKit 1.3.0

JXBWebKit 1.3.0

xiubojin 维护。



JXBWebKit 1.3.0

  • jinxiubo

如果您有好的建议,欢迎 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.通过JSBridgeWeb进行交互,实测任何场景的交互操作都满足要求!例如:

  • 打开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文件夹下分别创建binsrc文件夹,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退出。

整体架构

image

关于JSBridge的实现原理

图解

image

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:

dataJS传给Native的数据。

callbackNative处理完业务后回调给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使用,达到调用方式统一的目的。