分享 Ionic 开发 Hybrid App 中遇到的问题以及后期发布 iOS/Android 的方方面面

 2. View 缓存的处理

Ionic默认对 View 添加了缓存的机制，不过在此 App 中，所有的 View 都需要进行即时的刷新以及用户添加新的网站后页面也需要进行刷新，那么就需要禁用掉 View 的缓存。

禁用缓存只需要在 View 中禁用即可。

.state('tab.websites', {
url: '/websites',
cache: false,
views: {
'tab-websites': {
templateUrl: 'templates/tab-websites.html',
controller: 'WebSitesCtrl'
}
}
})

全局禁用缓存的方法是：$ionicConfigProvider.views.maxCache(0);

 

3. 键盘的不同模式的支持

在不同的用户输入场景下，需要显示不同的键盘模式以方便用户输入，如在输入邮件时键盘则显示邮件模式等。

在 Ionic 中需要安装键盘插件控制键盘模式的显示。

安装后在$ionicPlatform.ready中调用即可。

1 if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
2     cordova.plugins.Keyboard.disableScroll(true);
3     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
4 }
5 if (window.StatusBar) {
6     // org.apache.cordova.statusbar required
7     StatusBar.styleLightContent();
8 }

对应的 input 只要添加相应的 type 进行控制即可，支持的所有 type 见这里。

<input type="email" placeholder="邮箱" ng-model="data.username">

使用效果如下。

4. 设备网络状况的检查

因为此 App 一直需要联网操作，那么在 App 启动的时候就要对网络情况进行检查，当网络不可用的时候对用户进行相应的提示。

安装网络检查插件后，在 App 启动的时候进行检测并提示即可。

 1 document.addEventListener("deviceready", function () {
 2     // listen for Online event
 3     $rootScope.$on('$cordovaNetwork:online', function (event, networkState) {
 4         var onlineState = networkState;
 5         console.log("device online...");
 6     })
 7     // listen for Offline event
 8     $rootScope.$on('$cordovaNetwork:offline', function (event, networkState) {
 9         var offlineState = networkState;
10         //提醒用户的网络异常
11         $ionicLoading.show({
12             template: '网络异常，不能连接到服务器！'
13         });
14     })
15 }, false);

5. iOS 设备和 Android 设备的图标以及启动画面图片的批量生成

iOS 设备和 Android 设备因为不同设备的屏幕尺寸适配问题，需要提供很多不同尺寸的图片资源，包括 icon 和 splash 的不同尺寸。

如果每一个尺寸都去使用 PS 导出，工作量巨大，还好有自动生成的工具，只需要提供最大的尺寸供生成即可。

iOS 的 icon 和 splash生成：http://ios.hvims.com/

Android 相关资源生成：https://romannurik.github.io/AndroidAssetStudio/index.html