{"id":13696952,"url":"https://github.com/xiubojin/JXBWKWebView","last_synced_at":"2025-05-03T17:32:45.243Z","repository":{"id":54323348,"uuid":"142286428","full_name":"xiubojin/JXBWKWebView","owner":"xiubojin","description":"An component WebView for iOS base on WKWebView","archived":false,"fork":false,"pushed_at":"2021-02-24T04:44:08.000Z","size":905,"stargazers_count":735,"open_issues_count":13,"forks_count":115,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-11-09T23:03:33.569Z","etag":null,"topics":["ios","js-bridge","webview","wkwebview","wkwebview-bridge","wkwebview-javascript-bridge","wkwebview-sample"],"latest_commit_sha":null,"homepage":"","language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xiubojin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-25T10:43:45.000Z","updated_at":"2024-09-26T10:51:54.000Z","dependencies_parsed_at":"2022-08-13T12:00:53.135Z","dependency_job_id":null,"html_url":"https://github.com/xiubojin/JXBWKWebView","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiubojin%2FJXBWKWebView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiubojin%2FJXBWKWebView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiubojin%2FJXBWKWebView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiubojin%2FJXBWKWebView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xiubojin","download_url":"https://codeload.github.com/xiubojin/JXBWKWebView/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224369822,"owners_count":17299961,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ios","js-bridge","webview","wkwebview","wkwebview-bridge","wkwebview-javascript-bridge","wkwebview-sample"],"created_at":"2024-08-02T18:00:50.486Z","updated_at":"2024-11-13T00:31:14.853Z","avatar_url":"https://github.com/xiubojin.png","language":"Objective-C","funding_links":[],"categories":["UI Components"],"sub_categories":[],"readme":"如果你有好的想法，欢迎`Issue`或贡献代码！\n\n如果你在使用该库的过程中遇到任何问题，可以通过我的邮箱或`Issue`联系到我。\n\n\n## 使用CocoaPods安装\n\n```\npod 'JXBWebKit', '~\u003e 1.3.0'\n```\n\n\n\n## 手动安装\n\n拖动`JXBWebKit`文件夹到你的项目.\n\n注意`Copy`选项需要选择`\"Copy items into destination group's folder\" and select \"Create groups for any folders\".`\n\n\n\n## 示例\n\n打开`JXBWebKitProject`直接执行项目。\n\n\n\n## 使用方法\n\n1.可以直接使用`JXBWebViewController`实例对象打开远程和本地的`HTML`.\n\n2.可以从`JXBWebViewController`派生出一个子类，使用该子类实例打开远程和本地的`HTML`.\n\n3.还可以从`JXBWKWebViewPool`获取一个可复用的`WebView`，使用该`WebView`打开远程和本地的`HTML`.\n\n\n\n## 提供的功能\n\n1.`WebView`适配不通机型.\n\n2.`UI`支持（进度条、进度条颜色、back\u0026close按钮）.\n\n3.支持拦截URL.\n\n4.通过`JSBridge`和`Web`进行交互,实测任何场景的交互操作都可满足!比如\n\n- 打开`naive`任意页面.\n- 获取`native`定位、推送、相册、相机等权限.\n- 获取`native`数据。\n- 调用`native`的任意`API`。\n- 其他\n\n5.对子类提供`WebView`父类的`hook`操作.\n\n6.支持`WKWebView`的复用，通过复用优化启动性能以及内存占用.\n\n7.支持各种自定义浏览器的`UserAgent`.\n\n8.支持拦截`WebView`的网络请求.\n\n9.支持操作`Cookie`.\n\n10.`demo`中提供了让业务`H5`页面秒开的方案（`HTML`模板渲染 \u0026 静态资源离线包）.\n\n- 现在市面上绝大部分新闻类APP使用的都是HTML模板渲染方案.\n- 除了资讯类页面外其他业务场景的H5都可使用离线包方案.\n\n\n\n## 注意\n\n关于上述第10条中提到的H5秒开方案需要`server`进行配合，因此在这里我使用`Go`语言进行后台开发，`server`提供了两个`API`：\n\n1.一个普通的`get`请求，`client`通过获取响应数据中的`html`渲染模板进行渲染。\n\n2.一个下载服务器离线包资源的接口。\n\n当然，要想看这个功能的具体实现效果，需要在本地配置`Go`的开发环境，详见如下步骤：\n\n1.使用`brew install go`安装golang.\n\n2.环境配置\n\n（1）使用`cd ~`切换到根目录.\n\n（2）使用`ls -all`查看所有文件，看有没有`.bash_profile`文件.\n\n（3）没有就创建一个`touch .bash_profile`\n\n使用`vim`打开`.bash_profile`进行编辑，`i`进行编辑，编辑完成后`:wq`退出，编辑内容如下：\n\n````\nexport GOPATH=/Users/\u003cyour name\u003e/Documents/go\nexport GOBIN=$GOPATH/bin\nexport PATH=$PATH:$GOBIN\n````\n\n（4）切换到`Documents`文件夹，创建`go`文件夹，再在`go`文件夹下分别创建`bin`、`src`文件夹，`src`就是以后存放项目的文件夹.\n\n（5）在终端输入`go env`命令查看配置是否正确，`GOBIN`有值表示配置没问题.\n\n（6）在本工程内搜索文件夹`GoProject \u003e src \u003e OfflineServer`，将`OfflineServer`文件夹拷贝至`Documents \u003e go \u003e src`目录下.\n\n（7）切换至`Documents \u003e go \u003e src`\n\n（8）`go build`编译项目.\n\n（9）`go run main.go`运行项目.\n\n（10）不再需要开启`server`服务可以`control+c`退出.\n\n\n\n## 整体架构\n\n![image](https://github.com/xiubojin/JXBWebKit/blob/master/doc_imgs/share01.png)\n\n\n\n## 关于JSBridge的实现原理\n\n### 图解\n\n![image](https://github.com/xiubojin/JXBWebKit/blob/master/doc_imgs/share02.png)\n\n\n\n### JS调用Native\n\n示例代码大家可以通过两种方式获取到，如下：\n\n（1）找到当前工程目录，再找到`GoProject -\u003e src -\u003e OfflineServer -\u003e source`，在`source`文件下有个压缩文件`offline_pkg.zip`，将该文件拷贝至别处解压，找到`resource`目录下的`offline.js`文件，里面就有示例代码，比如：\n\n获取`native`的推送权限状态\n\n```objective-c\nfunction getPushAuthState() {\n    window.JXBJSBridge.call({\n           target : \"push\",\n           action : \"getAuthorityState\",\n           data : { \n             \"id\" : \"123456789\",\n             \"name\" : \"zhangsan\"\n           },\n           callback : {\n              success : function(result){document.getElementById('message').innerHTML = result;},\n              fail : function(result){document.getElementById('message').innerHTML = result;},\n              progress : function(result){document.getElementById('message').innerHTML = result;},\n           }\n\t});\n}\n```\n\n（2）在当前工程目录下有个`JSResources.bundle`文件，显示包内容，里面有个`index.html`，同样也有示例代码。\n\n\n\n### Object-C代码如何写？\n\n与`JS`约定好参数，`target、action、data、callback`等。\n\n`target`：对应原生的目标类，格式为`Service_target`。\n\n`action`：对应目标类的目标方法，格式为`func_action:`。\n\n`data`：`JS`传给`Native`的数据。\n\n`callback`：`Native`处理完业务后回调给`JS`的结果。\n\n示例：\n\n```objective-c\n//获取推送权限状态\n- (void)func_getAuthorityState:(NSDictionary *)param {\n    //获取id\n    NSString *ID = param[@\"id\"];\n    //获取name\n    NSString *name = param[@\"name\"];\n    \n    BOOL isOpen = NO;\n    UIUserNotificationSettings *setting = [[UIApplication sharedApplication] currentUserNotificationSettings];\n    if (setting.types != UIUserNotificationTypeNone) {\n        isOpen = YES;\n    }\n    void(^successCallback)(NSDictionary *result) = param[@\"success\"];\n    NSDictionary *resultDict = @{@\"isOpen\":@(isOpen)};\n    successCallback(resultDict);\n}\n```\n\n### 如何与Android统一调用方式\n\n当前库加载的注入脚本是`JXBJSBridge.js`，当`WebView`加载`HTML`时会在`window`上挂一个`call`方法，此时`call`方法相当于一个全局方法，供`JS`调用，这个脚本文件同样可以提供给`Android`使用，达到调用方式统一的目的。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiubojin%2FJXBWKWebView","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxiubojin%2FJXBWKWebView","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiubojin%2FJXBWKWebView/lists"}