使ionic应用更加贴近原生

使ionic应用更加贴近原生

欢迎大家到我的博客查看相应内容，并关注我学习Ionic 1和Ionic 2的历程，共同学习，共同进步。

本文乃翻译而来，并加入个人理解，如有理解错误指出，请大家指出，大家也可移步原文。

近来，由于设备性能的提高以及混合开发技术的优化，原生开发和混合开发之间的界限越来越不明显了。

一些混合开发技术中甚至可以使用“原生切换动画”、“原生滚动”等效果，如ionic。很多情况下，已经分不清原生app和混合app的区别了，特别是很多原生app使用WebViews。

混合开发技术仍在飞速的发展中，现在是加入其中的极好时机。本文将讲述4中方法提升ionic应用的性能，使其更加贴近原生。

1.原生切换动画

这实在可以被作为一个变革。感谢Native Page Transitions Cordova插件，让我们能够在混合应用使用原生的切换动画。

当然，ionic内置的切换动画已经很优秀了，但是却不太稳定。而原生的切换动画在任何时刻都表现地相当不错，纵享丝滑。

为了在ionic应用中使用，可以使用Julien Renaux的功能库。可以根据其说明文档使用，这里提供基本使用方法：

$ npm install ionic-native-transitions --save
$ cordova plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions#0.5.4

下一步，添加ionic-native-transitions作为依赖模块：

angular.module('yourApp', ['ionic','ionic-native-transitions'])

然后，在触发切换的控件上添加directive：native-transitions，如：

<a class="button" native-transitions ui-sref="facts">Next</a>

可以使用native-transitions-options为动画设置属性，如需要点击返回按钮时添加向右的切换动画，则可以使用如下方式：

<ion-nav-back-button native-transitions native-transitions-options="{type: 'slide', direction:'right'}" class="button-icon">
  <i class="icon ion-arrow-left-c"></i>
</ion-nav-back-button>

可以用下面的方法为动画设置默认的属性，下面的参数值是我实验后认为对于ionic应用比较适合的设定：

.config(function($ionicNativeTransitionsProvider){
  $ionicNativeTransitionsProvider.setOptions({
    "duration"          : 300,
    "androiddelay"      : 100, // Longer delay better for older androids
    // "fixedPixelsTop"    : 64, // looks OK on iOS
  });
})

默认的duration为400，稍慢，这里我改为300以适应ionic内置动画。低版本android动画效果不是很理想，所以应该为其添加延时，所以我将androiddelay设置为100，大家可以自行测试，因为我手头只有有限的android设备，测试样本较小。如果不想让工具栏随着页面切换，可以使用fixedPixelsTop属性，我一般使用其默认值0。

除了上面的滑动效果，还包括很多其他动画效果，如“抽屉效果”、“翻转效果”等切换动画效果，具体可参照插件文档。我想随着不断地优化，ionic内置的动画都可以使用原生动画替代。

---

2.原生滚动

ionic1.2之前版本：

默认使用javascript的滚动效果，不是很理想，特别是对于android设备来说，如果还存在大量图片，情况将更加糟糕。

为了解决此问题，可以使用原生滚动，可以用下面的方式在全局启用原生滚动：

.config(function($ionicConfigProvider) {
  $ionicConfigProvider.scrolling.jsScrolling(false);

  // Or for only a single platform, use
  // if( ionic.Platform.isAndroid() ) {
    // $ionicConfigProvider.scrolling.jsScrolling(false);
  // }
}

如果仅是想在个别页面使用原生滚动，可以在页面的ion-content标签中添加overflow-scroll='true'。

ionic1.2及以后版本：

默认采用原生滚动，即不用像之前版本那样进行配置，如果想要使用javascript滚动，可以使用下面的方式在全局启用javascript滚动：

.config(function($ionicConfigProvider) {
  $ionicConfigProvider.scrolling.jsScrolling(true);

  // Or for only a single platform, use
  // if( ionic.Platform.isIOS() ) {
    // $ionicConfigProvider.scrolling.jsScrolling(true);
  // }
}

如果仅是想在个别页面使用javascript滚动，可以在页面的ion-content标签中添加overflow-scroll='false'。

---

3.缓存

ionic提供了默认的缓存机制，不过可能并不能满足需要。

考虑以下场景：用户使用app阅读一篇文章（文章内容通过网络请求而来），然会退出了此app，稍后可能想要再次阅读同一篇文章，这时没有理由再次进行HTTP请求获取文章内容（如果文章内容没有变化的话）。因此，我们可以将文章内容存储在本地，当用户再次观看时，文章就可以极快的呈现出来了。

可能大家第一想法是使用localStorage存储，但是localStorage不能处理大量的数据，因为其容量很有限。关于localStorage可以查看我另一篇译文。此时angular-cache便出场了,angular-cache使得存取大量数据变得很容易。

我们可以使用bower或者npm安装Angular-cache：

$ bower install --save angular-cache

或

$ npm install --save angular-cache

然后，添加angular-cache作为依赖模块：

angular.module('myApp', ['angular-cache'])

然后就可以使用如下的方式使用了：

.controller('Posts', function (CacheFactory) {

if (!CacheFactory.get('postCache')) {
  CacheFactory.createCache('postCache');
}
var postCache = CacheFactory.get('postCache');

// Cache a post
postCache.put(id, data);

// Delete from cache
postCache.remove(id);

// Get a post
$scope.post = postCache.get(id);

})

这里我们仅仅是当用户加载时检测本地是否已经缓存了post，如果是则不必进行额外的HTTP请求。

当然，我们可以通过类似“下拉刷新”的方法进行HTTP请求从而跳过缓存或者更新缓存。

更过可参照angular-cache文档。

---

4.Crosswalk WebView

Crosswalk WebView大家都很熟悉了，特别是在低版本android中，Crosswalk WebView提供了比原生WebView更好的性能。

而Crosswalk WebView目前来看唯一的缺点就是增大了app的体积（差不多20M），如果不用考虑app体积问题，则值得一用。

安装：

$ cordova plugin add cordova-plugin-crosswalk-webview

我在使用Crosswalk 1.3.1时还需要在config.xml中做如下设置：

<preference name="CrosswalkAnimatable" value="true" />

Phonegap中也可使用Crosswalk WebView，在config.xml中如下设置：

<gap:plugin name="org.crosswalk.engine" version="1.3.0" />

---

5.延伸阅读

使ionic应用效果更加贴近原生