EasyIOS-Swift 版本发布， MVVM+HTML+LiveLoad 来开发 IOS

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

iOS 开发实用技术导航

NSHipster 中文版

› http://nshipster.cn/

cocos2d 开源 2D 游戏引擎

› http://www.cocos2d-iphone.org/

CocoaPods

› http://cocoapods.org/

Google Analytics for Mobile 统计解决方案

› http://code.google.com/mobile/analytics/

WWDC

› https://developer.apple.com/wwdc/

Design Guides and Resources

› https://developer.apple.com/design/

Transcripts of WWDC sessions

› http://asciiwwdc.com

Cocoa with Love

› http://cocoawithlove.com/

Cocoa Dev Central

› http://cocoadevcentral.com/

NSHipster

› http://nshipster.com/

Style Guides

› Google Objective-C Style Guide

› NYTimes Objective-C Style Guide

Useful Tools and Services

› Charles Web Debugging Proxy

› Smore

这是一个创建于 3256 天前的主题，其中的信息可能已经有所发展或是发生改变。

EasyIOS开源至今已经1周年，全新Swift版本今日发布，支持利用HTML来开发IOS应用，支持模拟器实时预览，基于MVVM思想，HTML数据绑定，反射所有CocoaTouch API。
EasyIOS 再一次加速IOS开发，优化IOS开发体验，拥抱Swift

DEMO Video

新版特性

MVVM : Model-View-ViewModel 实现代码分离，分离ViewController中的大量逻辑代码，解决ViewController承担了过多角色而造成的代码质量低下。增加视图与模型的绑定特性。
HTML To Native : 利用类似HTML的语言来对UI进行布局，简单易学，可重用
DataBinding : 采用了第三方库SwiftBond,可以实现数据绑定操作，同样HTML里也可以进行数据绑定操作，识别标签是双大括号比如{{title}}
Reflect Cocoa Touch : 可以反射所有Cocoa Touch中UIKit的所有属性，目前实现了一部分，后面大家一起来维护，增加更多API
AutoLayout : 在HTML进行Autolayout布局，真的很简单！
Live Load : 在模拟器中运行app，在修改HTML之后进行保存，模拟器中会自动更新UI布局，不需要重新编译APP
Cryptographic HTML : 为了保证HTML代码的安全，我们提供了AES Encryption对HTML进行加密
URLManager : 我们可以利用URL来push或者present一个视图
Elegant PullToRefresh : 可以利用HTML轻松的添加下拉刷新和上拉加载控件

HTML To Native

UITableView With PullReflash
- align,margin 来控制UIView的布局
- pull-to-refresh="handlePullRefresh.",infinite-scrolling="handleInfinite. PullFooter" 来添加下拉刷新和上拉加载
- handlePullRefresh. handle the event by func handlePullRefresh (tableView:UITableView) ,you can define it by yourself.
- PullFooter can load the custom PullReflashView

<body>
    <div id="tableview" align="64 0 0 0" content-inset="{0,0,0,0}" type="UITableView"  estimated-row-height="100"  separator-style="None" pull-to-refresh="handlePullRefresh." infinite-scrolling="handleInfinite. PullFooter">
        <div align="0 0 0 0" type="cell" id="cell" >
            <img id="avatar" align="10 10 -10 *" clips-to-bounds="YES" width="45" height="45" layer_corner-radius="5" src="{{srcUrl}}" />
            <span align="top:2 avatar;right:-10" margin="left:12 avatar"  font="15 system" id="title">{{title}}</span>
            <span align="bottom:0 avatar;right:-10" margin="left:12 avatar" font="13 system" text-color="#ACACAC" id="subTitle" style="color:#ACACAC;" link-style="color:green;" >{{subTitle}}</span>
        </div>
        <div type="section" id="bgView" background-color="#F2F1F6" >
            <span align="left:15;center-y:0" font="14 system">{{title}}</span>
        </div>
    </div>
</body>

UIScrollView With CSS
- Use the CSS by @ for example @contentAlign.

<style>
    .contentAlign{
    edge:0 0 0 0;left:0 root;right:0 root;
    }
    .inputStyle{
    font-size:15;color:#999999;
    }
</style>
<body>
    <div align="0 0 0 0" type="UIScrollView" background-color="#F3F3F3">
        <div align="@contentAlign">
            <img id="logo" image="login-logo" user-interaction-enabled="YES" present="demo://login" align="center-x:0;top:110;"/>
            <div id="username" layer_corner-radius="8" background-color="white" align="* 15 * -15" margin="top:30 logo" height="45">
                <input class="userTextField" id="userTextField" align="edge:10 10 -10 -10;" placeholder-style="@inputStyle" keyboard-type="EmailAddress" style="@inputStyle" placeholder="上面的logo可以被点击"/>
            </div>
            <div id="password" layer_corner-radius="8" background-color="white" align="* 15 * -15" margin="top:13 username" height="45">
                <input id="passwordTextField" secure-text-entry="YES" align="10 10 -10 -10" placeholder="密码" placeholder-style="@inputStyle" style="@inputStyle" />
            </div>
            <button id="submit" style="color:white;font-size:20;" background-color="#3FBCFB" align="* 15 -10 -15" margin="top:25 password" height="45" layer_corner-radius="8" onEvent="touch-up-inside:login">登陆</button>
        </div>
    </div>
</body>

HTML Label and reusable html
- @import(LabelHtml) to import the LabelHtml.xml
- When span set style="color:#ACACAC;font-size:18px;" node ,we can use the origin html inner the span tag.

<style>
    <!--支持css 样式设置，html中利用@的方式进行调用-->
    .contentAlign{
        edge:0 0 0 0;left:0 root;right:0 root;
    }
</style>

<body>
    <div align="0 0 0 0" type="UIScrollView" background-color="#F3F3F3">
        <div align="@contentAlign">
            <!--span标签设置了style属性则启用富文本模式，span内部可以支持原生HTML的所有属性，具体请看LabelHtml.xml文件-->
            <span align="64 0 0 0" style="color:#ACACAC;font-size:18px;" link-style="color:green;" number-of-lines="0">
                <!--import the xml -->
                    @import(LabelHtml)
            </span>
        </div>
    </div>
</body>

UICollectionView with FlowLayout

<body>
    <div id="collectionView" align="0 0 0 0" type="UICollectionView" flow-layout="scroll-direction:Vertical;item-size:{300,50};section-inset:{3,3,0,3};minimum-interitem-spacing:3;minimum-line-spacing:3" content-inset="{64,0,0,0}" background-color="white" pull-to-refresh="handlePullRefresh." infinite-scrolling="handleInfinite.">
        <div align="0 0 0 0" type="cell"  id="cell"  background-color="red">
            <span align="10 10 -10 -10" font="10 system">{{name}}</span>
        </div>
    </div>
</body>

align=

div

HTML

23 条回复 • 2015-06-04 09:54:22 +08:00

zpvip

2015-05-27 15:02:51 +08:00

我想知道还有什么语言不能开发 iOS 应用

zhuchaowe

2015-05-27 15:13:15 +08:00

@zpvip 这话说的。。开发IOS只有Swift OC 或者C++也算一个的话，其他都是做的封装

jetbillwin

2015-05-27 16:34:51 +08:00

@zhuchaowe 貌似随着React Native的出现，这类封装现在越来越多了。

zonghua

2015-05-27 17:13:45 +08:00 via iPhone

@zhuchaowe 用java呢？用java，我知道有用Csharp的，没听说可以有jre可以用

yanchao7511461

2015-05-27 17:19:14 +08:00

我觉得语言真的不是问题啊....

robertlyc

2015-05-27 17:20:02 +08:00

呵呵等你上过app store就知道语言是大问题

sobigfish

2015-05-27 17:20:22 +08:00

@jetbillwin 这一类的好像国内不少都比React Native早多了。

zhuchaowe

2015-05-27 17:21:00 +08:00

@jetbillwin 这类应该算对跨平台，或者对降低开发难度的一种探索吧

zhuchaowe

2015-05-27 17:22:02 +08:00

@zonghua java应该不能把，有java转OC的，google不是出了一个么j2oc?

tonyYo

2015-05-27 17:25:40 +08:00

强烈支持，正在学习。

sobigfish

2015-05-27 17:29:04 +08:00

一些特性全么？
比如调用相机，蓝牙，定位，扫条码（1D/2D,iOS8有内置的API）

zhuchaowe

2015-05-27 17:31:07 +08:00

@sobigfish 这个框架其实主要语言是Swift，应该算原生开发，所以不存在这些问题。这里的HTML知识UI布局里的一个辅助工具

sobigfish

2015-05-27 17:34:04 +08:00

我知道啊，我就是问直接用js API绑定这些系统的API 有没有这样的feature（用户不用再去写swift / Objective-C 来获取相应的功能）
（比如微信js sdk那样）

zhuchaowe

2015-05-27 17:35:14 +08:00

@sobigfish 目前还没有考虑这些特性

zhuchaowe

2015-05-27 17:36:17 +08:00

@sobigfish 既然开源了，大家脑洞有多大，就挖多大坑好了

jsq2627

2015-05-27 19:08:08 +08:00

大爱 MVVM

有时间可以了解下微软的 WPF / Silverlight / WinRT。WPF 是 MVVM 的鼻祖，有很多可以借鉴的东西。
尤其是 Win10 SDK 引入的 Trigger 和 Action 模型（在 Win8 里可以用 Behavior SDK 库来支持），可以把很多原先要在 ViewModel 里写代码处理的逻辑，直接通过声明式语句写在 View 里。目前没见到哪个微软系之外的 MVVM 框架有实现这个。

pheyer

2015-05-28 09:46:32 +08:00

用HTML布局，动画咋办呢？

zhuchaowe

2015-05-28 10:10:43 +08:00

@pheyer 简单动画可以把UIView用Swift取出来，再更新约束，做动画。其实HTML仅仅是一个辅助工具，如果动画很复杂，完全可以纯Swift实现。以后会考虑HTML里如何实现动画的方案

banxi1988

2015-05-28 13:04:51 +08:00

1. 从写布局上,我觉得没有怎么解放生产力呢?
将CocoaTouch 的属性转为 HTML的属性. 没有编译器的配合,没有自动补全会是一个问题

2. autoLayout的支持有限, 还有 sizeClass 的支持

不过, 加油!

zhuchaowe

2015-05-28 14:45:19 +08:00

@banxi1988 有兴趣，可以一起来维护哈

ciwonderful

2015-06-03 18:06:31 +08:00

不错，我原来也写过类似的框架。
不过我还加了lua脚本。
你可以尝试加入js。

ciwonderful

2015-06-03 18:13:02 +08:00

html可以搞一个GUI的代码生成器。唯一的工作只需要填写属性就行。

zhuchaowe

2015-06-04 09:54:22 +08:00

@ciwonderful 这个想法不错，可以搞搞