什么是跨平台移动APP

2017-08-02 14:57:54
admin
1181
最后编辑:admin 于 2018-03-26 09:18:02

混合APP应用开发(Hybrid App)是指通过使用HTML5,CSS3和JavaScript来构建跨平台移动应用程序,多平台适配,效果与原生App相媲美,兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。由于混合APP开发,实现一套代码多设备运行,Android和IOS下公用一套代码,大大降低了开发成本和开发周期,混合APP应用开发已经成为了创业公司APP开发的首选。


移动端跨平台应用开发是个有趣的话题。纵观该领域目前各个开发商提供的多种方案,大致可以分为三大类:

  1. 基于HTML5的方案。该方案以PhoneGap/Cordova为代表。其基本思路是针对HTML5标准目前功能上的不足,补充定义了一套比较实用的API(比如硬件访问/系统交互等),然后基于平台上自带的Web引擎(比如iOS的UIWebview等),通过扩展机制实现了这些API,在此基础上再提供一套应用打包部署系统。Intel的XDK也属于此类方案。

  2. 将Native API映射封装成统一语言的API的方案。该方案以Titanium、Xamarin为代表,其中Titanium提供JavaScript API,Xamarin提供C# API。这样的好处是可以较容易达到和Native API类似的能力,编程模型/方式也和原生应用相似。

本文重点介绍基于HTML5的方案相比其他方案的优缺点,如何实现更好的效果,以及目前的一些进展。

HTML5方案的特点

原生API映射的方案,如Titanium、Xamarin,其优点在于功能和性能与原生系统比较接近。但是,由于不同系统原生API设计上还是会有不少差异,API的映射还是需要不少的权衡取舍。同时,由于这些API是这些厂商自定义的,谈不上什么标准,相应的开发资源(程序库/技术支持/社区等等)也相对有限。

而另一方面,标准化、开发资源的丰富则是HTML5方案最大的优点,同时第三方的HTML5框架工具比如PhoneGap/Cordova也极大促进了HTML5应用的发展,它们提供了方便的跨平台应用打包/发布服务、实用的API、灵活的扩展机制、以及积累下来的丰富的第三方API实现。而上游的W3C一旦开始支持一些新的API,PhoneGap/Cordova也可以很快沿用这些标准的API将相关能力开放出去。

HTML5方案的主要不足则在于功能和性能方面,这主要是因为HTML5应用的能力严重依赖于系统自带的Web引擎:iOS的UIWebview、Android的Webview等,此类组件的HTML5能力相比Safari for iOS、Chrome for Android都要差一截。另外在Android平台上,由于系统碎片化比较严重,不同Android版本的Webview的HTML5能力也有较大差异,导致相应的HTML5应用一致性难以保证。

好消息是,现在已经出现一些第三方的Web引擎以提供比系统默认的Webview更好的功能和性能,而PhoneGap/Cordova也正在改进架构以便引入这些更好的第三方Web引擎。另外对于Tizen、Firefox OS这样本身就是HTML5 Runtime加上扩展API的系统而言,HTML5应用是一等公民,在功能拓展方面相比iOS、Android上会增强不少。

而第三种方案,CocoonJS的优点是专注于2D/3D游戏开发,画图性能很好,比如同时画1000个精灵也能达到60FPS,这是绝大多数的浏览器/通用的HTML5引擎目前还做不到的。这个方案的缺点在于,由于它的画图操作简化了很多路经,它无法做到和HTML5 DOM元素的互操作,而且它的HTML5能力也只是一个子集,功能比较受限。目前CocoonJS针对Android也引入了另外一种模式Webview+作为补充,Webview+基于Chromium的内核加上Cordova API的支持以实现更通用的HTML5能力。

总的来说,HTML5应用的能力很大程度上依赖于Web引擎的能力。因此,无论是移动操作系统开发商还是开发工具的开发商,都持续在Web引擎的方向投入了更多的努力。

Web引擎

Web引擎目前大致可分为三种方式:

  1. 浏览器,比如Safari/Chrome/UC Browser等;
  2. 系统自带的Webview组件,比如上面提到的iOS UIWebview和Android Webview
  3. 专门的Web Engine,比如Intel的开源项目Crosswalk、Ludei的Webview+

浏览器方式很容易理解,一个HTML5应用就是一个Web页面,用户通过浏览器打开一个URL,然后进入浏览器的全屏模式/App模式进行操作,或者是通过点击一个事先创建好的快捷方式打开应用。这种方式的性能取决于浏览器本身对HTML5的支持情况,一般来说要优于Webview组件的方式,但是问题在于不同的浏览器有差异,而且通过浏览器运行HTML5较难做到类似原生应用的体验(应用切换/权限管理/系统资源访问/整合等)以及丰富的API支持。

Webview组件方式的一般用法是以Hybrid的方式发布HTML5应用,即上述提到的PhoneGap/Cordova方案所采用的方式。其问题已经在上面提到过,主要是Webview组件本身对HTML5的支持能力不足。

专门的Web引擎可以有较好的HTML5功能和性能支持,同时有较好一致性,类似原生应用的系统整合也可以做得较好。这种方式的缺点则在于开发者需要将Web引擎与应用程序一起打包,生成的应用大小会更大,因此有的Web引擎(如Crosswalk)也提供了一种“共享模式”,让多个应用可以共享一个Web引擎,仅当应用第一次启动并且发现系统还没有相应Web引擎时才提示用户下载安装。

目前的发展趋势是:通过PhoneGap/Cordova方式得到丰富的API支持,通过专门开发的Web引擎去提升HTML5的能力。

Crosswalk和Ludei的Webview+在概念上比较类似。Webview+是闭源的,目前还不好评估;Crosswalk由我所在的团队开发,是开源的(BSD许可协议),基于Chromium内核,着重于对HTML5功能和性能的支持,发布周期为六周一次,支持Cordova API。

目前Crosswalk正式支持的移动操作系统包括Android和Tizen,在Android 4.0及以上的系统中使用Crosswalk的Web应用程序体验和原生应用没有区别。该引擎现在已经成为众多知名HTML5平台和应用的推荐引擎,包括Google Mobile Chrome App、Intel XDK、Famo.us和Construct2等等,未来的Cordova 4.0也计划集成该Web引擎。不过比较遗憾的是,由于iOS的限制(iOS不允许应用使用使用除iOS UIWebView之外第三方的JIT--即时编译引擎),目前Crosswalk也没有办法提供直接的支持,但这也许会随着HTML5更广泛的进入移动市场而发生改变。

总结

现在的HTML5 App(加上API扩展)已经可以胜任很多事了,比如教育类应用,休闲游戏等等。不过对于那些实时性要求比较高的、计算量大的(比如涉及大量的元素绘制,或并行计算等)、复杂的3D游戏,多人在线游戏/应用等还有不少差距。另外,工具方面,如何能够更高效的调试/开发/性能内存调优 HTML5应用也是另外一个需要提高的地方。不过,这些方面也在不断的演进。相信不久的将来,HTML5终会成为主流移动开发平台。



整理目前流行的跨平台WebApp开发技术的特点,仅供参考。

每个框架几乎都包含以下特性:

  • 使用 HTML5 + CSS + JavaScript 开发
  • 跨平台重用代码
  • 丰富的UI库
  • 提供访问设备原生API的 JavaScript API 包装器
  • 解决原生开发中机型适配的难题
  • 提供打包、部署的工具或服务
  • 都需要学习自身封装的 JavaScript API

筛选框架的要求:

  • 性能:运行速度快
  • UI:提供接近原生的UI体验
  • 插件多,文档丰富,开发效率高,容易扩展和维护
  • 满足业务需求

Cordova

Cordova 和 PhoneGap 的区别?
PhoneGap 是 Apache Cordova 的一个分发版,就像 Ubuntu 是 基于 Linux 的一个发行版,其代码库也基于 Cordova,只是 PhoneGap 关联了 Adobe 的一些额外的商业工具或服务,例如 PhoneGap Build 和 Adobe Shadow,来帮助开发者简化开发。
此外,两者提供的CLI工具、项目结构有差异,如:
Cordova 把 config.html 放在项目目录下,而 PhoneGap 把它放在www 目录下。

优点

  • 开源免费,社区生态成熟,插件丰富
  • 支持离线场景应用
  • 开发工具选择空间大

缺点:

  • 只提供基础访问设备的接口,需要自己搭配其他UI框架和JavaScript框架来搭配

UI框架

  • Framework7
  • MSUI | Github
  • Famous
    为任意屏幕创建流畅、复杂的UI。
    免费和开源的JavaScript渲染引擎。着名引擎的独特之处在于其JavaScript渲染引擎和3D物理引擎。
    官网 | Github | Hello World
    使用 Famo.us 创建高性能移动 UI

参考资料

Cordova中文文档
创建第一个App(英文)
利用 Cordova+Famous 创建高性能跨平台APP
使用 Cordova 和 Vue.js 创建移动应用

Ionic

官网地址:http://www.ionic.wang/ (有案例)
Ionic = Cordova + AngularJS + 一套样式库。

技术要求

  • HTML + CSS + AngularJS

优点

  • 基于 Cordova
  • 漂亮的界面,追求性能,专注原生,免费开源
  • Angular JS MVVM 开发理念,数据双向绑定
  • 继承自 Cordova,可以使用 Cordova 的插件

缺点

  • Angular JS 学习路线陡峭
  • Ionic 框架相比于原生的 Cordova 有所差异,Cordova 某些官方插件可能不适用于Ionic

AppCan

通过AppCan IDE集成开发系统、云端打包器等,快速开发出Android、iOS、WP平台上的移动应用。

有两种方式创建项目:IDE 和云端,并且IDE可以同步到云端。
免费用户有100M空间、50个应用的限制。

优点

  • 提供一体化解决方案,方便环境搭建、开发、调试、发布
  • 框架自带UI包,包含常用控件样式
  • 框架对UI、动画渲染进行过优化,反应速度快
  • 支持本地打包、云端打包
  • 基于密钥的代码加密

缺点

  • 不开源,无法修改、优化底层代码
  • 分大众版和企业版,大众版免费,但功能有缺失,详细见附录
  • 暂不支持自行开发控件/,无法调取android原生功能
  • 框架自带功能过多,导致应用安装包偏大。
  • 文档偏少
  • 部分系统无法使用IDE进行调试
  • 只能在服务器端发布,无法在本地发布
  • IOS发布,需要将证书上传至服务器

参考:
Phonegap VS AppCan

使用案例
我爱我家App 等

附录
企业版和大众版主要有以下几点区别:

  • 开发环境:
    企业版走独立的开发环境与打包环境,企业版配备macmini打包服务器,可以实现本地环境下创建项目,调试,打包;
    大众版不管是创建项目还是打包都需要依托于官方的服务器,需要在联网的情况下进行,打包需要将源码上传到官方服务器进行打包;
  • 版本控制:企业版独立控制引擎插件的版本;
    大众版官方统一维护,官方换哪个版本开发者就需要使用哪个版本,没有选择;
  • 协同开发:企业版可通过macmini后台分配开发者或者应用管理员帐号,可实现协同开发。
    大众版不能满足协同开发
  • 企业版有推送API接口
    大众版没有
  • 售后服务:企业版有独立的售后团队
    大众版的入口是论坛

Dcloud

Dcloud组件

Dcloud和原生开发对比

特点:
云编译必须联网获取AppId

优点:

  • 国内厂商,中文文档
  • 对HTML5的性能、工具、能力都做了深入扩展,提供 IDE 、云服务等帮助节省时间
  • MUI 更贴近国内App使用习惯,提供模块的详细例子,如登录,个人中心

缺点:

  • 部分操作需要具备原生开发经验,如离线打包App
  • 新产品仍然有bug,还需改进

学习路线:

DCloud学习路线

APICloud

优点:

  • 不懂原生开发,不懂后台语言就可完成APP

缺点:

  • 更新速度快,版本不够稳定
  • 面向不懂App开发人群,不适合程序员和科技公司,过度依赖会降低技术水平
  • 涉嫌抄袭DCloud大量代码

React Native

能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP。
仅需学习一次,编写任何平台。(Learn once, write anywhere)

缺点:

  • 初次学习成本高
  • 必须在不同平台下写两套代码,依赖暴露的接口


  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227