分享 Ionic 開發 Hybrid App 中遇到的問題以及后期發布 iOS/Android 的方方面面

此篇文章主要整理了最近在使用 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 中禁用即可。

.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中調用即可。

if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
    cordova.plugins.Keyboard.disableScroll(true);
    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
    // org.apache.cordova.statusbar required
    StatusBar.styleLightContent();
}

對應的 input 只要添加相應的 type 進行控制即可，支持的所有 type 見這里。

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

使用效果如下。

4. 設備網絡狀況的檢查

因為此 App 一直需要聯網操作，那么在 App 啟動的時候就要對網絡情況進行檢查，當網絡不可用的時候對用戶進行相應的提示。

安裝網絡檢查插件后，在 App 啟動的時候進行檢測並提示即可。

document.addEventListener("deviceready", function () {
    // listen for Online event
    $rootScope.$on('$cordovaNetwork:online', function (event, networkState) {
        var onlineState = networkState;
        console.log("device online...");
    })
    // listen for Offline event
    $rootScope.$on('$cordovaNetwork:offline', function (event, networkState) {
        var offlineState = networkState;
        //提醒用戶的網絡異常
        $ionicLoading.show({
            template: '網絡異常，不能連接到服務器！'
        });
    })
}, 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
            ["[e-mail]"],    // To
            null,                    // CC
            null,                    // BCC
            false,                   // isHTML
            null,                    // Attachments
            null);                   // Attachment Data
    }
};

8. 給 App 評分不同平台的辦法

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

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

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