Skip to content

Latest commit

 

History

History
172 lines (129 loc) · 5.64 KB

README-CN.md

File metadata and controls

172 lines (129 loc) · 5.64 KB
Raw

HybridPageKit

英文 | 扩展阅读 | Extended Reading

HybridPageKit是一个针对新闻类App高性能、易扩展、组件化的通用内容页实现框架。

基于ReusableNestingScrollview、WKWebViewExtension、以及扩展阅读中关于内容页架构和性能的探索。


配置 & 安装

iOS 8.0 or later

特性

强烈建议阅读iOS新闻类App内容页技术探索

  • 集成简单，几十行代码完成新闻类App的内容展示页框架，满足绝大多数使用场景
  • 易于扩展，组件化管理高内聚低耦合，功能模块高度独立
  • 使用并扩展WKWebView，在提高系统稳定性的同时，进行更加友好和全面的扩展
  • 自动实现WKWebView全局复用、Native组件滚动复用、全局复用
  • WebView中元素Native化实现，数据驱动，极大减少开发和维护成本，提升首屏速度
  • 统一页面内滚动复用管理逻辑，简单易于集成和扩展，线程安全

子项目

快速使用

1.基于后台下发模板-数据分离的数据结构

{
//内容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>",

//内容HTML中的非文字组件数据
"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"
	},
},  

//扩展区域中的组件数据
"articleRelateNews": {
    "index":"1",
    "newsArray" : [
        "扩展阅读区 - RelateNews - 1",
        "扩展阅读区 - RelateNews - 2",
        "扩展阅读区 - RelateNews - 3",
        "扩展阅读区 - RelateNews - 4",
    ],
}, 

//扩展区域中的组件数据
"articleComment": {
    "index":"2",
    "commentArray" : [
        "相关评论区 - Comment - 1",
        "相关评论区 - Comment - 2",
        "相关评论区 - Comment - 3",
        "相关评论区 - Comment - 4",
    ],
},  
}

2.生成对应UI组件的Model、View、Controller

//Model实现RNSModelProtocol协议
@interface ImageModel :  NSObject<RNSModelProtocol>
//解析index
@property(nonatomic,copy,readwrite)NSString *index;
//保存当前组件的size
@property(nonatomic,assign,readwrite)CGRect frame;
@end

@implementation ImageModel
//实现RNSModelProtocol协议，对应传入Index，Frame，组件对应View，组件对应Controller，自定义context
RNSProtocolImp(_index,_frame, ImageView, ImageController, nil);
//解析数据
- (instancetype)initWithDictionary:(NSDictionary *)dic{}
@end

//自定义组件view
@interface ImageView : UIImageView
@end

3.生成UI组件对应的Controller，处理控制逻辑

//组件管理逻辑，实现HPKComponentControllerDelegate协议
@interface ImageController : NSObject<HPKComponentControllerDelegate>
@end

@implementation ImageController
//选择性实现HPKComponentControllerDelegate中的方法，进行自定义业务逻辑处理
- (BOOL)shouldResponseWithComponentView:(__kindof UIView *)componentView
                         componentModel:(RNSModel *)componentModel{}
- (void)scrollViewWillDisplayComponentView:(__kindof UIView *)componentView
    componentModel:(RNSModel *)componentModel{}

@end

4.内容页继承HPKViewController,返回支持组件Controller

@interface HybridViewController : HPKViewController
@end

@implementation HybridViewController
// 返回支持的UI组件类型
- (NSArray<NSObject<HPKComponentControllerDelegate> *> *)getValidComponentControllers{
    return @[
             [[ImageController alloc]init],
             ];
}
@end

5.填充数据渲染页面

- (void)setArticleDetailModel:(NSObject *)model                              //内容页数据，透传
                 htmlTemplate:(NSString *)htmlTemplate                       //内容页mustache格式HTML模板
      webviewExternalDelegate:(id<WKNavigationDelegate>)externalDelegate     //WebView external delegate，设置为self
            webViewComponents:(NSArray<NSObject<RNSModelProtocol> *> *)webViewComponents        //webview上的UI组件数据Model
          extensionComponents:(NSArray<NSObject<RNSModelProtocol> *> *)extensionComponents;     //extension区域上的UI组件数据Model

证书

All source code is licensed under the MIT License.

联系方式