Giter Site home page Giter Site logo

astudyer / jxbwkwebview Goto Github PK

View Code? Open in Web Editor NEW

This project forked from xiubojin/jxbwkwebview

0.0 1.0 0.0 495 KB

iOS基于WKWebView的二次封装,功能丰富

License: MIT License

Go 0.56% HTML 3.93% Ruby 4.94% JavaScript 1.50% Objective-C 89.07%

jxbwkwebview's Introduction

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

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

版本更新

  • 1.0.2 解决自JXBWebViewController派生出的子类init方法操作父类属性无效的问题
  • 1.0.3 可复用的WebView支持侧滑手势返回到上一页面
  • 1.0.4 App启动时会在复用池中初始化一个可复用的WebView(开发者可控)
  • 1.0.5 删除无用的类文件 & 优化页面loading时的title显示问题
  • 1.0.6 混淆无法描述的api & 修改WebView复用协议名称
  • 1.1.0
    • 更换导航栏返回、关闭按钮图片
    • 与H5的交互方式只保留桥接一种
    • 修改WebView布局方式
    • 修改Cookie同步方式
    • 修改H5传给native参数的数据格式

使用CocoaPods安装

pod 'JXBWebKit', '~> 1.1.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支持(进度条、进度条颜色、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 {
    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使用,达到调用方式统一的目的。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.