有没人用 ionic + AngularJS + PhoneGap开发过HybridApp？
程序员文章站
2022-03-21 10:15:12
...
本人现在想用 ionic + AngularJS + PhoneGap开发一个HybirdApp项目，不知道有没用同样方式的开发朋友一起探讨下？
有试过zepto +iscroll自HTML5+PhoneGap效果还不错。
也试过jqm这个体验差了，但现在新版好像不错，但不管是jqm，st，都是UI层。其实跟HybirdApp体验好不好没什么关系。HybirdApp如果有好的团队，完全可以自己用纯JS，html5,css3，UI层，我想体验应该不会差。当然如果有客户需求也无所谓。
但对于流畅度的测试，我这边有不同的结果。当时使用了 HTC 2011年的一款机器（CPU 1GHZ，RAM 768MB），流畅度不能说特别快，但使用起来的感受和其他应用也差不了多少（这种机器现在运行一般的应用，例如支付宝都会卡成狗）。除此之外我还测试了 红米 NOTE，魅族 MX 2 之类的中端机型，发现居然更加卡了，实在是很令人费解，当时查了很多资料之后发现，在安卓机上卡的一个原因是因为 CSS 3 中的 translate3d 属性会导致 GPU 强制开启加速反而导致 整个 webview 变得卡顿，但 iOS 上却不存在此问题，所以后来在打包的时候将安卓的 GPU 加速强制关闭，这样在红米 NOTE 和魅族 MX 2 上都能较为流畅地运行了，但和安卓的原生应用相比，依然会有一种“反应稍慢”的感觉。
上一次的开发经历并非很顺畅，但不得不说 ionic 为第一次做移动端的我填了太多的坑，也是因为这么一个框架我才能和同事在没有做过移动端的前提下在半个月的时间里将点餐应用给开发出来，可也是因为这样一个处于 beta 状态的框架，导致我们开发的 APP 在上线的时候居然得使用它的 nightly（频繁更新的不稳定版本，不在 release 之中）版本，原因是它的 release 版本出现了一个大 bug。在那之后，我对 Hybrid APP 的期望就再也没有升高过，并且以我狭窄的视野看来，ionic 已经是把 Hybird APP 做到极致的一个框架了，社区、文档、贡献团队以及UI层、逻辑层、丰富的图标、多平台的打包工具等等，整一个流程都可以完全用 ionic 搞定，但做出来的东西体验还是很差，其实那时候 ionic 身上的很多问题 @姜鑫 回答中已经提到了，没办法，Hybrid APP 一出生就有一个强大的竞争对手—— Native APP，导致只要它有比不上 Native APP 的情况下，都会让开发者或者社区觉得它还太嫩了。
------------------------------------------------------------------------------------------------
以上的陈述都有一个前提，那就是“那时候的 ionic”。年后我在逛 ionic 社区的时候发现，这个社区不但没有沉默反而更加火爆了，好奇心驱使我又去它的官网溜达了一圈，发现第一个 1.0 版本已经出来了（去年使用的版本没记错应该才 0.8 beta，之前的两位答主使用的估计也差不多是这个版本），再粗略地看了一下文档，发现了让人眼前一亮的东西：
我还是非常推荐使用 ionic 来进行 Hybrid APP 的开发的，理由嘛大致有这些：
缺点嘛：
大致想到这么多，想到再更，如果描述有误还请指正。
未避免有广告嫌疑，所以删除了之前做的应用的下载链接，如果需要体验一下应用以此来判断是否能够使用 ionic 做移动应用开发的话可以私信我。 不久前，Ionic 2 beta 出来了。
安装：npm install -g ionic@beta
文档：Ionic 2 Documentation
整个框架用Angular 2重写了，ionic 2组件就是angular2组件，ionic 2开发就是angular 2开发。
性能大幅改善是可期的，这是一个benchmark：More Benchmarks: Virtual DOM vs Angular 1 & 2 vs Mithril.js vs cito.js vs The Rest
项目迭代还是很快的，今天看的时候，NATIVE的一些API已经加进来了。
如果性能要求很高，我应该还是会选React Native。
但我喜欢ionic 2的快速原型能力。 页面元素过多的app会比较卡顿。
动画问题比较大，另外移动设备是webview处理click是默认有延迟的，可以加上fastclick之类的lib。
实用的话一定要设计好http请求的时机和本地cache，这个很关键。 我用 ionic 做了一个 App，说实话在 Android 上的流畅度简直不忍直视。。
首先吐槽楼主的题目啊，ionic 本来就是包括 Angular 和 Cordova 的。。
其次通过自身的经历，说下怎么优化在旧安卓设备的体验。
我通过以下方式：
1. 整合 Crosswalk 至 Cordova（一个Web运行环境），替换自带的 Webview。
具体做法，可以参考 ionic 上的链接： Crosswalk Build
（偷偷说一下，我就在那个帖子下面 ^^）
2. 关闭页面切换动画，即 animation="no-animation"
3. 读取模板的时候，显示“加载中”圈圈，避免出现无响应的错觉
4. 使用 Pasvaz/bindonce，避免 Angular.js 对静态内容绑定所带来的性能消耗
优化后，在旧的 Android 设备上 ( MOTO XT928 ) 表现有明显改善，滚屏不会那么卡顿，个人认为可用。 补充一下排名关于 crosswalk
1、ionic 在大概一月份的时候已经支持将 crosswalk 替换掉默认的 webview 了。具体的文章看这里：
Crosswalk comes to Ionic
刚使用了下，第一感觉是 css 的支持很好，整体的动画流畅度和反映速度，有明显的提升。我用的是小米2A。另外有 crosswalk 的支持，能够在开发的时候不用太担心不可预知的 bug 问题，非常省心。
---------------------
2015-23-31 更新
关于 crosswalk ，在 ionic 下的几个坑。
1、在设备上使用 liveReload 的时候，插件提供的能力都不能使用
2、crosswalk 确实对 html5 和 css3 有更好的支持，不过今天我无意中将 crosswalk 去掉之后，发现转场的动画更加流畅的，不太明白为何会这样。ps：在安卓下，使用 ios 的转场效果。 我用的 appframework + arttemplate + cordova ios非常不错，做原生的都觉得效果快赶上他们了。Android 完全只能说捉急了。。。。滚动性能太差了。还有各种奇怪的bug 用Ionic开发的了iTunes 的 App Store 中的“Hipo-专注支出预算的记账应用”，也顺便写了篇帮助文章用ionic开发hybrid APP。
－－－更新－－－
第二个用ionic开发的免费软件：Xmoney-A simple and relatively intuitive Currency Converter App on the App Store on iTunes 我们已经用ionic做了2个app，都是面向行业用户的，用户体验在ipad上很好，在android中高端设备上也挺好，老的低端设备不行 ionic + AngularJS + PhoneGap这个组合没有用过，sencha touch 2 + cordova倒是可以说一下。
从我的经验来看，JS本身的性能没有什么问题，sencha touch 2这么重的框架也跑的不错，但是DOM渲染依然是瓶颈。
如果分平台来讲，IOS平台没有任何问题，包括渲染都是刚刚的。
但是Android平台的渲染实在是太让人头疼了，几乎所有的性能优化都是不得不面向安卓平台。 已经用ionic做过三个app其中一个已经上架，总体评价ios完美，android卡顿，通过crosswalk可以改善卡顿体验但随之带来的是20m+的应用包大小，如果对包大小不是特别在意可以尝试。ionic的应用场景：不复杂快速上线用户体验不是特别高，实话说ionic开发效率真的比native快的太多了！
有试过zepto +iscroll自HTML5+PhoneGap效果还不错。
也试过jqm这个体验差了，但现在新版好像不错，但不管是jqm，st，都是UI层。其实跟HybirdApp体验好不好没什么关系。HybirdApp如果有好的团队，完全可以自己用纯JS，html5,css3，UI层，我想体验应该不会差。当然如果有客户需求也无所谓。
回复内容：
去年用 ionic 为别人开发过一个 O2O 的本地化点餐应用，看了 @Edward Chu 的回答才发现当时有这么多问题是没有去深入研究的，比如 webview 的性能之类的，实在是惭愧。但对于流畅度的测试，我这边有不同的结果。当时使用了 HTC 2011年的一款机器（CPU 1GHZ，RAM 768MB），流畅度不能说特别快，但使用起来的感受和其他应用也差不了多少（这种机器现在运行一般的应用，例如支付宝都会卡成狗）。除此之外我还测试了 红米 NOTE，魅族 MX 2 之类的中端机型，发现居然更加卡了，实在是很令人费解，当时查了很多资料之后发现，在安卓机上卡的一个原因是因为 CSS 3 中的 translate3d 属性会导致 GPU 强制开启加速反而导致 整个 webview 变得卡顿，但 iOS 上却不存在此问题，所以后来在打包的时候将安卓的 GPU 加速强制关闭，这样在红米 NOTE 和魅族 MX 2 上都能较为流畅地运行了，但和安卓的原生应用相比，依然会有一种“反应稍慢”的感觉。
上一次的开发经历并非很顺畅，但不得不说 ionic 为第一次做移动端的我填了太多的坑，也是因为这么一个框架我才能和同事在没有做过移动端的前提下在半个月的时间里将点餐应用给开发出来，可也是因为这样一个处于 beta 状态的框架，导致我们开发的 APP 在上线的时候居然得使用它的 nightly（频繁更新的不稳定版本，不在 release 之中）版本，原因是它的 release 版本出现了一个大 bug。在那之后，我对 Hybrid APP 的期望就再也没有升高过，并且以我狭窄的视野看来，ionic 已经是把 Hybird APP 做到极致的一个框架了，社区、文档、贡献团队以及UI层、逻辑层、丰富的图标、多平台的打包工具等等，整一个流程都可以完全用 ionic 搞定，但做出来的东西体验还是很差，其实那时候 ionic 身上的很多问题 @姜鑫 回答中已经提到了，没办法，Hybrid APP 一出生就有一个强大的竞争对手—— Native APP，导致只要它有比不上 Native APP 的情况下，都会让开发者或者社区觉得它还太嫩了。
------------------------------------------------------------------------------------------------
以上的陈述都有一个前提，那就是“那时候的 ionic”。年后我在逛 ionic 社区的时候发现，这个社区不但没有沉默反而更加火爆了，好奇心驱使我又去它的官网溜达了一圈，发现第一个 1.0 版本已经出来了（去年使用的版本没记错应该才 0.8 beta，之前的两位答主使用的估计也差不多是这个版本），再粗略地看了一下文档，发现了让人眼前一亮的东西：
CachingBy default, views are cached to improve performance. When a view is navigated away from, its element is left in the DOM, and its scope is disconnected from the $watch cycle. When navigating to a view that is already cached, its scope is then reconnected, and the existing element that was left in the DOM becomes the active view. This also allows for the scroll position of previous views to be maintained.
当时在做 APP 的时候遇到的难题之一就是缓存，对于 @姜鑫 所提到的 list 的缓存也是一直没有想到比较优雅的解决方案，从 list 到 detail 之后再回去总得重新加载一遍，实在是尴尬。所以那时候只用了 localStorage 加上本地空间把数据和图片的缓存问题给解决掉了。但看见文档中的这样一段话，就意味着缓存的问题在 ionic 上只会是历史了。
为了验证它还究竟是不是还那么地不靠谱，我花了几天时间把公司另一个 Web 端产品（基于AngularJS构建的）给 Hybrid APP 化了，发现对于 list 的缓存问题确实得到了解决，而且整个框架明显更加稳定了，之前存在的一些尴尬的问题也慢慢地修复了，所以现在在我看来，ionic 整个社区和贡献团队，都是非常用心用力地在铺平 Hybrid APP 开发的道路，而且是致力于将 Hybrid APP 的体验无限向 Native APP 靠齐。
所以如果开发的团队及 APP 符合下面的情况：
- 不属于游戏之类的APP类型；
- 想低成本、快速迭代地开发 Android、iOS 平台上的应用；
- 目标终端的设备性能不算低；
- 对 AngularJS 和 ui router 有充分认识。
我还是非常推荐使用 ionic 来进行 Hybrid APP 的开发的，理由嘛大致有这些：
- 有一套还算挺好看的 UI，这真的蛮重要的；
- 一套很完整的图标集 Ionicons: The premium icon font for Ionic Framework；
- PhoneGap 成熟地应用打包体系及基于 cordova.js 开放的系统级API；
- 一个热度持续上升的社区，不用担心问题得不到解决了；
- 自身实现了很多原生的组件，包括：下拉刷新、滚动加载、iOS 下的 list 滑动删除或其他操作 之类的功能，如果要自己造*的话，依然还是一个不小的工程；
- 图形化 ionic APP 构建工具 Ionic Creator，只需要拖拽就能创建基于 ionic 的 APP了（虽然现在还稍微有点鸡肋）；
- 用 AngularJS 进行再次封装的 ngCordova 模块，终于不用再引入个蛋疼的全局 cordova.js 后还要自己写服务了 ngCordova - Simple extensions for common Cordova Plugins；
- 命令行工具 Crosswalk Integration Beta in Ionic CLI (v1.3.2) （感谢 @Edward Chu 提醒，加入了以上三条）；
- 甚至有了自己的推送服务 Push Notifications，将 Android 和 iOS 的推送问题一并解决了；
- =========== 2015.04.10 补充===========
- 命令行工具新增了 live reload 功能，保存代码即实时刷新浏览器，之前还需要自己用 gulp 或者 grunt 写，现在直接就能用了；
- =========== 2015.05.12 补充===========
- v1.0.0-rc4 开始，ion-view 指令支持一个功能叫做“can-swipe-back”，也就是 iOS 下的侧滑返回；
- =========== 2015.10.28 补充===========
- Ionic Lab，也就是一个 CLI 工具的图形化加强版本，并可以直接通过图形化操作创建、构建、测试、部署应用；
- Ionic 也开始做生态了，一个属于开发者的市场 http://market.ionic.io/，目前可以在里面 购买（是的，部分内容需要付费）到 ionic 的 初始模板、主题以及插件。
缺点嘛：
- 低端机表现并不算流畅；
- 在实现一些原生效果的时候，例如边缘滑动返回（返回能做，但像原生一样能拉来拉去就坑了，不过现在已经官方实现了）、底部 tab 隐藏之类的，需要多费一些事儿；
- 大多的 UI 层效果都是 for iOS 的，对 Android 的照顾比较少；
- =========== 2015.05.12 补充===========
- ionic 提供的推送服务在 Android 端是使用的 Google 云，也就是说国内的用户恐怕就得呵呵了。
大致想到这么多，想到再更，如果描述有误还请指正。
未避免有广告嫌疑，所以删除了之前做的应用的下载链接，如果需要体验一下应用以此来判断是否能够使用 ionic 做移动应用开发的话可以私信我。 不久前，Ionic 2 beta 出来了。
安装：npm install -g ionic@beta
文档：Ionic 2 Documentation
整个框架用Angular 2重写了，ionic 2组件就是angular2组件，ionic 2开发就是angular 2开发。
性能大幅改善是可期的，这是一个benchmark：More Benchmarks: Virtual DOM vs Angular 1 & 2 vs Mithril.js vs cito.js vs The Rest
项目迭代还是很快的，今天看的时候，NATIVE的一些API已经加进来了。
如果性能要求很高，我应该还是会选React Native。
但我喜欢ionic 2的快速原型能力。 页面元素过多的app会比较卡顿。
动画问题比较大，另外移动设备是webview处理click是默认有延迟的，可以加上fastclick之类的lib。
实用的话一定要设计好http请求的时机和本地cache，这个很关键。 我用 ionic 做了一个 App，说实话在 Android 上的流畅度简直不忍直视。。
首先吐槽楼主的题目啊，ionic 本来就是包括 Angular 和 Cordova 的。。
其次通过自身的经历，说下怎么优化在旧安卓设备的体验。
我通过以下方式：
1. 整合 Crosswalk 至 Cordova（一个Web运行环境），替换自带的 Webview。
具体做法，可以参考 ionic 上的链接： Crosswalk Build
（偷偷说一下，我就在那个帖子下面 ^^）
2. 关闭页面切换动画，即 animation="no-animation"
3. 读取模板的时候，显示“加载中”圈圈，避免出现无响应的错觉
4. 使用 Pasvaz/bindonce，避免 Angular.js 对静态内容绑定所带来的性能消耗
优化后，在旧的 Android 设备上 ( MOTO XT928 ) 表现有明显改善，滚屏不会那么卡顿，个人认为可用。 补充一下排名关于 crosswalk
1、ionic 在大概一月份的时候已经支持将 crosswalk 替换掉默认的 webview 了。具体的文章看这里：
Crosswalk comes to Ionic
刚使用了下，第一感觉是 css 的支持很好，整体的动画流畅度和反映速度，有明显的提升。我用的是小米2A。另外有 crosswalk 的支持，能够在开发的时候不用太担心不可预知的 bug 问题，非常省心。
---------------------
2015-23-31 更新
关于 crosswalk ，在 ionic 下的几个坑。
1、在设备上使用 liveReload 的时候，插件提供的能力都不能使用
2、crosswalk 确实对 html5 和 css3 有更好的支持，不过今天我无意中将 crosswalk 去掉之后，发现转场的动画更加流畅的，不太明白为何会这样。ps：在安卓下，使用 ios 的转场效果。 我用的 appframework + arttemplate + cordova ios非常不错，做原生的都觉得效果快赶上他们了。Android 完全只能说捉急了。。。。滚动性能太差了。还有各种奇怪的bug 用Ionic开发的了iTunes 的 App Store 中的“Hipo-专注支出预算的记账应用”，也顺便写了篇帮助文章用ionic开发hybrid APP。
－－－更新－－－
第二个用ionic开发的免费软件：Xmoney-A simple and relatively intuitive Currency Converter App on the App Store on iTunes 我们已经用ionic做了2个app，都是面向行业用户的，用户体验在ipad上很好，在android中高端设备上也挺好，老的低端设备不行 ionic + AngularJS + PhoneGap这个组合没有用过，sencha touch 2 + cordova倒是可以说一下。
从我的经验来看，JS本身的性能没有什么问题，sencha touch 2这么重的框架也跑的不错，但是DOM渲染依然是瓶颈。
如果分平台来讲，IOS平台没有任何问题，包括渲染都是刚刚的。
但是Android平台的渲染实在是太让人头疼了，几乎所有的性能优化都是不得不面向安卓平台。 已经用ionic做过三个app其中一个已经上架，总体评价ios完美，android卡顿，通过crosswalk可以改善卡顿体验但随之带来的是20m+的应用包大小，如果对包大小不是特别在意可以尝试。ionic的应用场景：不复杂快速上线用户体验不是特别高，实话说ionic开发效率真的比native快的太多了！
上一篇： php页面静态化实现的几种分享
下一篇： php 防盗链的常用方法