将Web开发标准带到原生平台

jopen 9年前

samurai-native-logo

将Web开发标准带到原生平台

samurai-native 可以让您使用标准Web开发技术 (HTML+CSS) 构建基于私有浏览器内核的原生应用。现已支持 iOS，Android 敬请期待。

| 官方QQ群 79054681 |

代码示例请参考samurai-examples/dribbble和samurai-examples/movie目录。

快速预览

gif

原生控件

您可以使用如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

事件处理

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>
@implementation MyViewController ...    - (void)reloadData {      self[@"author"] = @{ @"avatar" : "xxx.jpg", @"title" : @"Hello", @"name" : @"World" };  } @end

高度可扩展

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. 

@implementation 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;        ...  } @end

实时刷新

只需在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 开源协议

贡献者

相关项目

  • 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
</div> 来自：

相关经验