Hybrid App 探索之旅

08-09 00:54:50   来源:Why's Blog   评论: 点击:

Hybrid App 和网站有些相似,也是基于 HTML 、 CSS 、 JS 这类 Web 技术进行开发。唯一的区别在于 Hybrid App 是利用各个平台的 WebView 嵌入到原生应用中。
最近公司的项目想尝试在 Native App 中嵌入 Web 界面,以实现一些简单功能的多终端复用。刚好周末花点时间整理一下以前学习 Hybrid App 时的笔记。

背景介绍

Hybrid 的原意是混合的, Hybrid App 就是指 Web 和 Native 杂交的产物。愿景是能兼具 Native App 的良好交互体验和 Web App 的跨平台优势。

Hybrid App 和网站有些相似,也是基于 HTML 、 CSS 、 JS 这类 Web 技术进行开发。唯一的区别在于 Hybrid App 是利用各个平台的 WebView 嵌入到原生应用中。

HTML + JS + CSS

我们可以利用 HTML + JS + CSS 开发一个最简单的 Hybrid App ,直接在 Native App 里放个 WebView ,然后用 WebView 加载存储在本地的网页就可以了。先在项目中新建一个 index.html ,里面的代码如下:

<html>
    <body>
        <h1>Hello, WHY!</h1>
    </body>
</html>

然后在某个 UIViewController 中加载这个 html 文件:

class ViewController: UIViewController {

    @IBOutlet weak var webview: UIWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let path = NSBundle.mainBundle().pathForResource("index", ofType: "html")
        let url = NSURL(fileURLWithPath: path!)
        let req = NSURLRequest(URL: url!)
        webview.loadRequest(req)
    }
}

加载结果如下:

OK! 看起来很棒!一切都是 So Easy 啊!但是有种略无力的感觉,比如想做本地缓存,比如获取通讯录中的联系人,这些在 Native 里很常见的功能,在 Web 中并不是很好实现。

Cordova

Cordova 是一套设备 API 的集合,允许移动应用的开发者使用 JavaScript 来访问本地设备的功能,比如摄像头、加速计等等。如今大部分 Hybrid App 是利用 Cordova 进行开发的。Cordova 的前身是大名鼎鼎的 PhoneGap 。 PhoneGap 被 Adobe 收购了,但是剥离了核心代码贡献给 Apache , Apache 将这个项目命名为 Cordova 。

我们用 Cordova 搞个 Hello World 感受一下,具体的使用方法请参见官方文档

在这里推荐使用淘宝镜像 cnpm 安装:

sudo cnpm install -g cordova

安装完成之后创建一个 HelloWorld 项目:

cordova create hello com.example.hello HelloWorld

添加 iOS 平台:

cordova platform add ios

这时的项目目录是这样的:

我们可以用 iOS 模拟器跑一下这个项目。首先安装 ios-sim :

npm install -g ios-sim

然后在模拟器上运行:

cordova emulate ios

运行效果截图:

看起来还不错。开发的时候我们只需要开发 www 文件夹中的内容即可:

以上便是如何从零创建 Cordova 应用的步骤。如果想在现有项目中使用 Cordova 可以参见这篇 《Embedding CordovaLib in Your iOS App Project

不过至此我们并不能满足,虽然 Cordova 帮我们省了很多工作,比如创建项目、添加平台支持、各种原生接口的封装,但是当真正用于 Hybrid App 开发的时候还是比较乏力,比如导航栏、开关按钮、提示框,这些移动应用中很常见的 UI 控件,在 Web 中并不常见。

Ionic

Ionic 是一个基于 Cordova 和 HTML5 的 UI 框架,类似于前端的 Bootstrap 和 Foundation ,封装了移动应用中的一些常见控件,例如导航栏、侧滑菜单等等。得益于 HTML5 ,我们可以轻松的调用一些系统的接口。

有了 Ionic 我们可以快速实现一些在移动应用中十分常见的功能。

例如时间选择器:

例如简单的网格布局:

例如做一个选项卡菜单:

并且还提供了海量 icon ,可以说基本满足了一个移动应用的入门级需求。

小结

在我看来, Hybrid App 的优势是开发成本低,在团队人力资源有限又急着上线,或者确实对交互要求不高 (比如只是做个简单的论坛浏览) 的时候, Hybrid App 确实是个不错的选择。

然而 Web App 说到底还是 Web ,它可以用来开发移动应用,但它并不擅长开发移动应用。性能上的瓶颈始终是不可逾越的鸿沟。虽然有 Ionic 和 jQuery Mobile 这样的 UI 框架,省了很多重复的界面开发工作,但是如果仔细对比,在交互体验上和 Native 还是有着比较大的差距。

所以 iOS 和 Android 的程序员们不用紧张,饭碗暂时还没丢。


参考文献:


源自 :http://blog.callmewhy.com/2015/05/31/web-and-native/

相关热词搜索:cordova hybirdapp

上一篇:第一页 下一篇:Apache Cordova
分享到: 收藏