Ionic開發Hybrid App問題總結

http://ionichina.com/topic/5641b891b903cba630e25f10

http://www.cnblogs.com/parry/p/issues_about_build_hybrid_app_with_ionic.html

做者：Parry 
出處：http://www.cnblogs.com/parry/ 
本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。

 

此篇文章主要整理了最近在使用 Ionic 開發 Hybrid App 過程當中遇到的一些疑難點以及後期發佈生成 iOS 和 Android 版本過程當中的種種問題。

文章目錄

1. Ionic 簡介和項目需求介紹
2. View 緩存的處理
3. 鍵盤的不一樣模式的支持
4. 設備網絡情況的檢查
5. iOS 設備和 Android 設備的圖標以及啓動畫面圖片的批量生成
6. 下拉刷新
7. 反饋『意見及建議』調用郵件客戶端的方法
8. 給 App 評分不一樣平臺的辦法
9. 集成極光推送
10. 打包 iOS 、Android 平臺的種種問題
11. 項目開源和下載

1. Ionic 簡介和項目需求介紹

目前 Hybrid App 有不少的完善的方案，如 Ionic 、React Native等，最近由於本身一個小的需求，須要寫一個小的 App 實如今手機端的實時查看，簡單學習了下 Ionic 寫了個小程序，索性就上架發佈出來了。

先說下項目的簡單的需求：

• 能夠準實時監控添加的網站的在線狀況，檢測到宕機的第一時間進行 App 推送，能夠通知技術人員第一時間進行響應處理；
• 能夠對添加的網站進行測速彙總，在 App 中隨時查看全部站點的測速狀況；
• 順便添加幾個主要的搜索引擎對添加的網站的收錄狀況，便於及時的掌握最基本的 SEO 狀況。

主要的需求也就是上面這個幾個，那麼在選用技術框架的時候，發現 Ionic 學習起來比較簡單，而且後期只要在不一樣的平臺下分別打包就能夠生成 iOS 和 Android 不一樣平臺的 App。

簡單來講，Ionic 就是使用 HTML5 建立相似於手機平臺原生應用的一個開發框架，裏面綁定了 AngularJS 和 Sass，核心的編譯平臺是 PhoneGap，同時已經集成了現有的一些 UI 框架，不須要爲界面設計花不少的心思。

陸陸續續也開發出來上架了，這篇文章就整理一些遇到的坑，供你們之後開發的過程當中參考。

來幾個截圖，順手作了一個官網：http://gugujiankong.com/

   

2. View 緩存的處理

Ionic默認對 View 添加了緩存的機制，不過在此 App 中，全部的 View 都須要進行即時的刷新以及用戶添加新的網站後頁面也須要進行刷新，那麼就須要禁用掉 View 的緩存。

禁用緩存只須要在 View 中禁用便可。

 1 .state('tab.websites', {
 2     url: '/websites',
 3     cache: false,
 4     views: {
 5         'tab-websites': {
 6             templateUrl: 'templates/tab-websites.html',
 7             controller: 'WebSitesCtrl'
 8         }
 9     }
10 })

全局禁用緩存的方法是：$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

6. 下拉刷新

用戶下拉刷新是一個通用的操做規範，Ionic 已經對此功能進行了集成，只須要在 View 中按照此方法使用便可，獲取的方法放在 on-refresh 中便可。

<ion-refresher refreshing-icon="ion-loading-c" refreshing-text="雲端獲取數據中..." pulling-text="下拉刷新數據..." on-refresh="doRefresh()"></ion-refresher>

7. 反饋『意見及建議』調用郵件客戶端的方法

常須要在菜單中添加上『意見及建議』選項，當用戶點擊後，調用郵件客戶端，自動填寫上收件人和郵件標題，用戶只要書寫內容點擊發送便可。

跨平臺的方案是安裝EmailComposer插件，在按鈕的事件中調用便可。

$scope.feedback = function () {
    if (window.plugins && window.plugins.emailComposer) {
        window.plugins.emailComposer.showEmailComposerWithCallback(function (result) {

            },
            "給咕咕監控的建議", // Subject
            "",                      // Body
            ["feedback@gugujiankong.com"],    // To
            null,                    // CC
            null,                    // BCC
            false,                   // isHTML
            null,                    // Attachments
            null);                   // Attachment Data
    }
};

8. 給 App 評分不一樣平臺的辦法

爲了引導用戶去給 App 評分，常在菜單中添加選項或者彈窗的形式對用戶進行評分引導，在 Ionic 只要判斷設備平臺後進行相應的跳轉到對於的商店便可。

1 $scope.rateus = function () {
2     if ($ionicPlatform.isIOS) {
3         window.open('itms-apps://itunes.apple.com/us/app/domainsicle-domain-name-search/id511364723?ls=1&mt=8'); // or itms://
4     } else if ($ionicPlatform.isAndroid) {
5         window.open('market://details?id=<package_name>');
6     }
7 };

9. 集成極光推送

開發 App 的主要用途就是在網站宕機後，使用推送功能進行第一時間通知，以便技術人員進行快速響應，因此推送功能是必須集成進去的。

國內有很成熟的第三方推送平臺：極光推送。

註冊後進行插件的添加，也就是jpush-phonegap-plugin。

在用戶登陸的時候對用戶按照別名或分組進行標識。

var arrayObj = new Array("Tags" + loginResult.UserId);
window.plugins.jPushPlugin.setTags(arrayObj);

我的推薦按照分組也就是 tags 進行標識，由於一個用戶可能會使用不一樣的設備，那麼推送的時候不一樣的設備就能夠所有都收到通知，不至於漏掉推送消息。

API 端在監控 Server 端進行操做便可，也就是在檢測到宕機後，進行極光 API 調用，發送宕機的提醒便可。

10. 打包 iOS 、Android 平臺的種種問題

到這裏就要顯示 Hybrid App 的威力了，一次開發，全平臺打包發佈。

只要經過 Ionic 的 build 命令或者打開編譯環境進行對應的平臺打包便可，固然打包以前最好使用模擬器進行測試。

有幾個問題是須要注意的：

• iOS 打包須要注意極光推送是分開發證書環境和生產證書環境的，須要特別的注意，極光推送的設置須要和本地打包的證書以及 plist 配置的保持完整的一致，注意下圖APS_FOR_PRODUCTION值的設置。

• Android 的打包發佈則須要注意構件工具 Gradle 的版本問題。
• iOS 提交後通常審覈一週左右，之後每次更新基本都保持在一次等待一週的頻率，因此必定要測試好省得線上版本出現致命 bug 的狀況。

11. 項目開源和下載

此項目我也開源在了 GitHub 上，相關優化還要抽閒暇時間去作，相關資源以下，歡迎提意見和需求，我儘可能保持改進。

官網：http://gugujiankong.com/

iOS 版本：https://itunes.apple.com/cn/app/gu-gu-jian-kong-zhuan-zhu/id1042192962?l=en&mt=8

Android 版本：http://www.wandoujia.com/apps/com.gugujiankong.iosapp

GitHub開源：https://github.com/ParryQiu/GuGuJianKong