• Stars
    star
    734
  • Rank 61,748 (Top 2 %)
  • Language
    Objective-C
  • License
    MIT License
  • Created over 6 years ago
  • Updated almost 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

An component WebView for iOS base on WKWebView

如果你有好的想法,欢迎Issue或贡献代码!

如果你在使用该库的过程中遇到任何问题,可以通过我的邮箱或Issue联系到我。

使用CocoaPods安装

pod 'JXBWebKit', '~> 1.3.0'

手动安装

拖动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支持(进度条、进度条颜色、back&close按钮).

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 {
    //获取id
    NSString *ID = param[@"id"];
    //获取name
    NSString *name = param[@"name"];
    
    BOOL isOpen = NO;
    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使用,达到调用方式统一的目的。