分享 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