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
zhuchaowe
V2EX  ›  iDev

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

  •  
  •   zhuchaowe · 2015-05-27 14:43:49 +08:00 · 3384 次点击
    这是一个创建于 3479 天前的主题,其中的信息可能已经有所发展或是发生改变。

    image

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

    Version
    License
    Platform
    qq

    DEMO Video

    ScreenShot

    新版特性

    • 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>
    
    23 条回复    2015-06-04 09:54:22 +08:00
    zpvip
        1
    zpvip  
       2015-05-27 15:02:51 +08:00
    我想知道还有什么语言不能开发 iOS 应用
    zhuchaowe
        2
    zhuchaowe  
    OP
       2015-05-27 15:13:15 +08:00
    @zpvip 这话说的。。开发IOS只有Swift OC 或者C++也算一个的话,其他都是做的封装
    jetbillwin
        3
    jetbillwin  
       2015-05-27 16:34:51 +08:00
    @zhuchaowe 貌似随着React Native的出现,这类封装现在越来越多了。
    zonghua
        4
    zonghua  
       2015-05-27 17:13:45 +08:00 via iPhone
    @zhuchaowe 用java呢?用java,我知道有用Csharp的,没听说可以有jre可以用
    yanchao7511461
        5
    yanchao7511461  
       2015-05-27 17:19:14 +08:00
    我觉得语言真的不是问题啊....
    robertlyc
        6
    robertlyc  
       2015-05-27 17:20:02 +08:00
    呵呵 等你上过app store就知道语言是大问题
    sobigfish
        7
    sobigfish  
       2015-05-27 17:20:22 +08:00
    @jetbillwin 这一类的好像国内不少都比React Native早多了。
    zhuchaowe
        8
    zhuchaowe  
    OP
       2015-05-27 17:21:00 +08:00
    @jetbillwin 这类应该算对跨平台,或者对降低开发难度的一种探索吧
    zhuchaowe
        9
    zhuchaowe  
    OP
       2015-05-27 17:22:02 +08:00
    @zonghua java应该不能把,有java转OC的,google不是出了一个么j2oc?
    tonyYo
        10
    tonyYo  
       2015-05-27 17:25:40 +08:00
    强烈支持,正在学习。
    sobigfish
        11
    sobigfish  
       2015-05-27 17:29:04 +08:00
    一些特性全么?
    比如调用相机,蓝牙,定位,扫条码(1D/2D,iOS8有内置的API)
    zhuchaowe
        12
    zhuchaowe  
    OP
       2015-05-27 17:31:07 +08:00
    @sobigfish 这个框架其实主要语言是Swift,应该算原生开发,所以不存在这些问题。这里的HTML知识UI布局里的一个辅助工具
    sobigfish
        13
    sobigfish  
       2015-05-27 17:34:04 +08:00
    我知道啊,我就是问直接用js API绑定这些系统的API 有没有这样的feature(用户不用再去写swift / Objective-C 来获取相应的功能)
    (比如微信js sdk那样)
    zhuchaowe
        14
    zhuchaowe  
    OP
       2015-05-27 17:35:14 +08:00
    @sobigfish 目前还没有考虑这些特性
    zhuchaowe
        15
    zhuchaowe  
    OP
       2015-05-27 17:36:17 +08:00   ❤️ 1
    @sobigfish 既然开源了,大家脑洞有多大,就挖多大坑好了
    jsq2627
        16
    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
        17
    pheyer  
       2015-05-28 09:46:32 +08:00
    用HTML布局,动画咋办呢?
    zhuchaowe
        18
    zhuchaowe  
    OP
       2015-05-28 10:10:43 +08:00
    @pheyer 简单动画可以把UIView用Swift取出来,再更新约束,做动画。其实HTML仅仅是一个辅助工具,如果动画很复杂,完全可以纯Swift实现。以后会考虑HTML里如何实现动画的方案
    banxi1988
        19
    banxi1988  
       2015-05-28 13:04:51 +08:00
    1. 从写布局上,我觉得没有怎么解放生产力呢?
    将CocoaTouch 的 属性转为 HTML的属性. 没有编译器的配合,没有自动补全会是一个问题

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

    不过, 加油!
    zhuchaowe
        20
    zhuchaowe  
    OP
       2015-05-28 14:45:19 +08:00
    @banxi1988 有兴趣,可以一起来维护哈
    ciwonderful
        21
    ciwonderful  
       2015-06-03 18:06:31 +08:00
    不错,我原来也写过类似的框架。
    不过我还加了lua脚本。
    你可以尝试加入js。
    ciwonderful
        22
    ciwonderful  
       2015-06-03 18:13:02 +08:00
    html可以搞一个GUI的代码生成器。唯一的工作只需要填写属性就行。
    zhuchaowe
        23
    zhuchaowe  
    OP
       2015-06-04 09:54:22 +08:00
    @ciwonderful 这个想法不错,可以搞搞
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5745 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 03:28 · PVG 11:28 · LAX 19:28 · JFK 22:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.