HybridPageKit 1.4

HybridPageKit 1.4

×

由 dequanzhu 维护。

HybridPageKit 1.4

  • GitHub 仓库
  • 在 CocoaPods.org 的页面

dequanzhu

GitHub Cocoapods platforms GitHub closed issues GitHub code size in bytes

GitHub 仓库

HybridPageKit

先进阅读 | 中文 | 扩展阅读


HybridPageKit 是新闻应用内容页面易于集成的框架

  1. 基于在 扩展阅读 中提到的详细信息。
//In your Podfile
pod "HybridPageKit", :testspecs => ["HybridPageKitTests"]
...
  1. 安装
//In your Cartfile
git "https://github.com/dequan1331/HybridPageKit.git" "master"
  1. CocoaPods

克隆仓库

功能

  • 强烈建议阅读 iOS 新闻应用内容页面技术概述
  • 基于协议，用几十行代码即可完成新闻应用的混合内容页面。
  • 具有高度可扩展性，基于组件和 POP 内容页面架构。
  • 使用和扩展 WKWebView，稳定、少bug、支持更多功能。
  • 复用 WKWebView，复用组件视图。
  • 将 WebView 中所有非文本组件转换为本地。

高性能且线程安全。

用法

  1. 基于数据模板分离的数据。
{
//Content HTML
"articleContent": "<!DOCTYPE html><html><head></head><body><P>TEXTTEXTTEXTTEXTTEXTTEXT</P><P>{{IMG_0}}</P><P>TEXTTEXTTEXTTEXTTEXTTEXT</P><P>{{IMG_1}}</P><P>TEXTTEXTTEXTTEXTTEXTTEXT</P><P>{{IMG_2}}</P><P>The End</P></body></html>",

//non-Text component data of webView
"articleAttributes": {
	"IMG_0": {
	    "url": "http://127.0.0.1:8080?type=3",
	    "width": "340",
	    "height": "200"
	},
	"IMG_1": {
	    "url": "http://127.0.0.1:8080?type=3",
	    "width": "340",
	    "height": "200"
	},
	"IMG_2": {
	    "url": "http://127.0.0.1:8080?type=3",
	    "width": "340",
	    "height": "200"
	},
},  

//component data of Native Extension area
"articleRelateNews": {
    "index":"1",
    "newsArray" : [
        "Extension Reading area - RelateNews - 1",
        "Extension Reading area - RelateNews - 2",
        "Extension Reading area - RelateNews - 3",
        "Extension Reading area - RelateNews - 4",
    ],
}, 

//component data of Native Extension area
"articleComment": {
    "index":"2",
    "commentArray" : [
        "Comment area - Comment - 1",
        "Comment area - Comment - 2",
        "Comment area - Comment - 3",
        "Comment area - Comment - 4",
    ],
},  
}
  1. 创建模型和视图
//Model 
@interface VideoModel : NSObject<HPKModelProtocol>
...
IMP_HPKModelProtocol(@"");

//View 
@interface VideoView : UIImageView<HPKViewProtocol>
...
IMP_HPKViewProtocol()
  1. 创建组件控制器
@interface VideoController : NSObject<HPKControllerProtocol>
...
- (nullable NSArray<Class> *)supportComponentModelClass {
	return @[[VideoModel class]];
}
...
- (nullable Class)reusableComponentViewClassWithModel:(HPKModel *)componentModel {
	return [VideoView class];
}
...
- (void)scrollViewWillDisplayComponentView:(HPKView *)componentView
                    componentModel:(HPKModel *)componentModel {
...
}

- (void)controllerViewDidDisappear {
...
}
  1. 实现简单的页面内容
...
_componentHandler = [[HPKPageHandler alloc] initWithViewController:self componentsControllers:@[VideoController ...];
...
[_componentHandler handleSingleScrollView:[[UIScrollView alloc] initWithFrame:self.view.bounds]];
...
[_componentHandler layoutWithComponentModels:@[VideoModel ...]];
...
  1. 实现混合页面内容
// in page viewController
...
_componentHandler = [[HPKPageHandler alloc] initWithViewController:self componentsControllers:@[VideoController ...];
...
[_componentHandler handleHybridPageWithContainerScrollView:[[UIScrollView alloc] initWithFrame:self.view.bounds] defaultWebViewClass:[HPKWebViewSubClass class] defaultWebViewIndex:1 webComponentDomClass:@"domClass" webComponentIndexKey:@"domAttrIndex"];
...
[_componentHandler layoutWithWebComponentModels:@[WebVideoModel ...]];
...
[_componentHandler layoutWithComponentModels:@[VideoModel ...];
...

许可

所有源代码均受 MIT 许可证 的许可。