Extended Reading | 中文 | 扩展阅读
HybridPageKit is a easy integration framework for Content pages of News App
Base on ReusableNestingScrollview、WKWebViewExtension、and the details metioned in Extended Reading.
iOS 8.0 or later
Strongly Recommended to read iOS News App Content Page Technology Overview
- Easy integration，dozens of lines of code can be completed hybrid content page of News App.
- High-extensibility, component-based and POP content page architecture.
- Use and Extend WKWebView, stable、few bugs、 support more features.
- Reuse of WKWebView, reuse of component Views.
- Convert all non-Text components of WebView into Native.
- High-performance and thread safety.
- WKWebViewExtension : An extension for WKWebView. Providing menuItems delete 、support protocol 、clear cache of iOS8 and so on.
- ReusableNestingScrollview : An scrollView handler for UIScrollView & WKWebView and other scrollViews. Providing scrollview`s subViews reusable.
- iOS News App Content Page Technology Overview
1.Base on data-template separation data.
{
//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",
],
},
}2.create Model & View & Controller of component
//component model implement RNSModelProtocol
@interface ImageModel : NSObject<RNSModelProtocol>
@end
@implementation ImageModel
RNSProtocolImp(_index,_frame, ImageView, ImageController, nil);
@end
//component view
@interface ImageView : UIImageView
@end
//component controller implement HPKComponentControllerDelegate
@interface ImageController : NSObject<HPKComponentControllerDelegate>
@end
@implementation ImageController
//optional implement method of delegate
@end3.conteng page inherit HPKViewController、simple config and registe component controller
@interface HybridViewController : HPKViewController
@end
@implementation HybridViewController
//return component controller
- (NSArray<NSObject<HPKComponentControllerDelegate> *> *)getValidComponentControllers{
return @[
[[ImageController alloc]init],
];
}
@end5.render page
- (void)setArticleDetailModel:(NSObject *)model //data
htmlTemplate:(NSString *)htmlTemplate //html template
webviewExternalDelegate:(id<WKNavigationDelegate>)externalDelegate //WebView external delegate，maybe self
webViewComponents:(NSArray<NSObject<RNSModelProtocol> *> *)webViewComponents //component models in webView
extensionComponents:(NSArray<NSObject<RNSModelProtocol> *> *)extensionComponents; //component models in native extension area
All source code is licensed under the MIT License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent