將Web開發標準帶到原生平臺
將Web開發標準帶到原生平臺
samurai-native 可以讓您使用標準Web開發技術 (HTML+CSS) 構建基于私有瀏覽器內核的原生應用。現已支持 iOS，Android 敬請期待。
| 官方QQ群 79054681 |
代碼示例請參考samurai-examples/dribbble和samurai-examples/movie目錄。
快速預覽
原生控件
您可以使用如UICollectionView及UICollectionViewCell這樣的iOS原生控件， 讓您的產品用戶體驗如系統原生般流暢和高質。集成這些控件易如反掌，可以直接使用<UICollectionView/>和<UICollectionViewCell/>在您的代碼中。
<html> <body> <UICollectionView class="list" is-vertical> <UICollectionViewCell is-static is-row> ... </UICollectionViewCell> </UICollectionView> </body> </html>
HTML控件
您當然也可以在 iOS 上使用如<div>和<img>這樣的標準 HTML 標簽。多重選擇， 讓你更自由的來定制獨有的用戶界面。
<html> <body> <UICollectionViewCell is-static is-row> <div class="profile-wrapper"> <div class="profile-attribution"> <div class="profile-segment no-wrap"> <div class="segment-wrapper"> <span class="segment-count">10,875</span> <span class="segment-suffix">Followers</span> </div> </div> <div class="profile-segment no-wrap"> <div class="segment-wrapper"> <span class="segment-count">199</span> <span class="segment-suffix">Followers</span> </div> </div> </div> </div> </UICollectionViewCell> </body> </html>
流式CSS布局
samurai-native 為您帶來了流式 CSS 樣式及布局，通過層疊或嵌套盒模型及 margin 和 padding 等標準 CSS 樣式屬性來排版界面布局。samurai-native 同樣支持常見的樣式，例如：font-weight和border-radius等。 同時，你可以很容易的在SamuraiHtmlRenderStyle類中擴展你自己的樣式屬性。
(待完成: Flex-Box)
<html> <head> <link rel="stylesheet" type="text/css" href="../css/normalize.css"/> <link rel="stylesheet" type="text/css" href="../css/main.css"/> </head> </html>
<html> <body> <p style="color: red;"> Hello, world! </p> </body> </html>
<html>
<body>
<div class="tab-bar">
<div class="tab">Popular</div>
<div class="tab">Debuts</div>
<div class="tab">Everyone</div>
</div>
<style>
.tab-bar {
display: block;
width: 100%;
height: 34px;
background-color: #e5508c;
/* box-shadow: 0px 0.5px 0.5px black; */
z-index: 2;
}
.tab {
float: left;
display: block;
width: 33.33%;
height: 34px;
font-size: 14px;
line-height: 34px;
color: #fff 0.75;
text-align: center;
font-weight: normal;
}
...
</style>
</body>
</html>集成如此簡單
@implementation MyViewController
(void)viewDidLoad { [self loadViewTemplate:@"/www/html/dribbble-index.html"]; // [self loadViewTemplate:@"http://localhost:8000/html/dribbble-index.html"]; }
(void)dealloc { [self unloadViewTemplate]; }
(void)onTemplateLoading {}
- (void)onTemplateLoaded {}
- (void)onTemplateFailed {}
- (void)onTemplateCancelled {}
@end</pre>
事件處理
samurai-native 提供了一個叫做Signal的高階事件系統，你可以通過這個系統更容易的在原生代碼與HTML頁面代碼之間進行交互。
<div onclick="signal('hello')"> Click here </div> <div onswipe-left="signal('next')" onswipe-right="signal('prev')"> Swipe left or right </div>
@implementation MyViewController handleSignal( hello ) { [self something]; } handleSignal( prev ) { [self something]; } handleSignal( next ) { [self something]; } @end
數據綁定
samurai-native 提供了一種單向的高效的數據綁定方法，通過每個 DOM 節點的name屬性與數據對應關系來綁定原生對象數據。
<html> <body> ... <div name="author"> <img name="avatar"/> <div> <div name="title"/> <div>by <span name="name"/></div> </div> </div> ... </body> </html>
<span>@implementation</span> MyViewController ...
(void)reloadData { self[@"author"</span>] = @{ @"avatar"</span> : "xxx.jpg"</span>, @"title"</span> : @"Hello"</span>, @"name"</span> : @"World"</span> }; } <span>@end</span> </pre></div>
高度可擴展
samurai-native 的設計初衷是為了將自定義控件方便的擴展進來，這意味著你可以使用任何現有的原生界面組件，通過簡單的擴展或者直接使用它們。
samurai-native is designed to be easily extended with custom native components, that means you can reuse anything you've already built, and can import and use your favorite native components.
<span>@implementation</span> UILabel(Html)(void)html_applyDom:(SamuraiHtmlDomNode *)dom { [super html_applyDom:dom];
self.text = [dom computeInnerText]; }
(void)html_applyStyle:(SamuraiHtmlRenderStyle *)style { [super html_applyStyle:style];
self.font = [style computeFont:self.font]; self.textColor = [style computeColor:self.textColor]; self.textAlignment = [style computeTextAlignment:self.textAlignment]; self.baselineAdjustment = [style computeBaselineAdjustment:self.baselineAdjustment]; self.lineBreakMode = [style computeLineBreakMode:self.lineBreakMode]; self.numberOfLines = 0;
... } <span>@end</span></pre></div>
實時刷新
只需在main()函數中增加一行代碼，無需重新編譯并運行你的App，每當 HTML/CSS 有變化時，samurai-native 會自動在你的 iPhone 模擬器上實時更新您的用戶界面。
[[SamuraiWatcher sharedInstance] watch:@(__FILE__)];
運行例子
- 克隆https://github.com/hackers-painters/samurai.git
- 打開samurai-examples/dribbble/demo.xcodeproj
- 編譯并運行
開源許可
samurai-native 使用 MIT 開源協議
貢獻者
- Gavin.Kwoe: 主要開發者
- QFish: 主要開發者
相關項目
- gumbo: An HTML5 parsing library in pure C99
- katana: An CSS3 parsing library in pure C99
- fishhook: A library that enables dynamically rebinding symbols in Mach-O binaries running on iOS.
- AFNetworking: A delightful iOS and OS X networking framework
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！