轉(zhuǎn)自ionichina作者ParryQiu。如有侵權(quán)，聯(lián)系立刪。

文章目錄

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

2. View 緩存的處理

3. 鍵盤的不同模式的支持

4. 設(shè)備網(wǎng)絡(luò)狀況的檢查

5. iOS 設(shè)備和 Android 設(shè)備的圖標(biāo)以及啟動畫面圖片的批量生成

6. 下拉刷新

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

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

9. 集成極光推送

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

11. 項目開源和下載

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

目前 Hybrid App 有很多的完善的方案，如 Ionic 、React Native等，最近因為自己一個小的需求，需要寫一個小的 App 實現(xiàn)在手機端的實時查看，簡單學(xué)習(xí)了下 Ionic 寫了個小程序，索性就上架發(fā)布出來了。先說下項目的簡單的需求：* 可以準(zhǔn)實時監(jiān)控添加的網(wǎng)站的在線情況，檢測到宕機的第一時間進行 App 推送，可以通知技術(shù)人員第一時間進行響應(yīng)處理；* 可以對添加的網(wǎng)站進行測速匯總，在 App 中隨時查看所有站點的測速情況；* 順便添加幾個主要的搜索引擎對添加的網(wǎng)站的收錄情況，便于及時的掌握最基本的 SEO 情況。 主要的需求也就是上面這個幾個，那么在選用技術(shù)框架的時候，發(fā)現(xiàn) Ionic 學(xué)習(xí)起來比較簡單，并且后期只要在不同的平臺下分別打包就可以生成 iOS 和 Android 不同平臺的 App。 簡單來說，Ionic 就是使用 HTML5 創(chuàng)建類似于手機平臺原生應(yīng)用的一個開發(fā)框架，里面綁定了 AngularJS 和 Sass，核心的編譯平臺是 PhoneGap，同時已經(jīng)集成了現(xiàn)有的一些 UI 框架，不需要為界面設(shè)計花很多的心思。 陸陸續(xù)續(xù)也開發(fā)出來上架了，這篇文章就整理一些遇到的坑，供大家以后開發(fā)的過程中參考。 來幾個截圖，順手做了一個官網(wǎng)：http://gugujiankong.com/

2. View 緩存的處理

Ionic默認(rèn)對 View 添加了緩存的機制，不過在此 App 中，所有的 View 都需要進行即時的刷新以及用戶添加新的網(wǎng)站后頁面也需要進行刷新，那么就需要禁用掉 View 的緩存。禁用緩存只需要在 View 中禁用即可。全局禁用緩存的方法是：$ionicConfigProvider.views.maxCache(0);

3. 鍵盤的不同模式的支持

在不同的用戶輸入場景下，需要顯示不同的鍵盤模式以方便用戶輸入，如在輸入郵件時鍵盤則顯示郵件模式等。在 Ionic 中需要安裝鍵盤插件控制鍵盤模式的顯示。安裝后在$ionicPlatform.ready中調(diào)用即可。對應(yīng)的 input 只要添加相應(yīng)的 type 進行控制即可，支持的所有 type 見這里。使用效果如下。

4. 設(shè)備網(wǎng)絡(luò)狀況的檢查

因為此 App 一直需要聯(lián)網(wǎng)操作，那么在 App 啟動的時候就要對網(wǎng)絡(luò)情況進行檢查，當(dāng)網(wǎng)絡(luò)不可用的時候?qū)τ脩暨M行相應(yīng)的提示。安裝網(wǎng)絡(luò)檢查插件后，在 App 啟動的時候進行檢測并提示即可。

5. iOS 設(shè)備和 Android 設(shè)備的圖標(biāo)以及啟動畫面圖片的批量生成

iOS 設(shè)備和 Android 設(shè)備因為不同設(shè)備的屏幕尺寸適配問題，需要提供很多不同尺寸的圖片資源，包括 icon 和 splash 的不同尺寸。如果每一個尺寸都去使用 PS 導(dǎo)出，工作量巨大，還好有自動生成的工具，只需要提供最大的尺寸供生成即可。iOS 的 icon 和 splash生成：http://ios.hvims.com/Android 相關(guān)資源生成：https://romannurik.github.io/AndroidAssetStudio/index.html

6. 下拉刷新

用戶下拉刷新是一個通用的操作規(guī)范，Ionic 已經(jīng)對此功能進行了集成，只需要在 View 中按照此方法使用即可，獲取的方法放在 on-refresh 中即可。

7. 反饋『意見及建議』

調(diào)用郵件客戶端的方法常需要在菜單中添加上『意見及建議』選項，當(dāng)用戶點擊后，調(diào)用郵件客戶端，自動填寫上收件人和郵件標(biāo)題，用戶只要書寫內(nèi)容點擊發(fā)送即可?？缙脚_的方案是安裝EmailComposer插件，在按鈕的事件中調(diào)用即可。

8. 給 App 評分

不同平臺的辦法為了引導(dǎo)用戶去給 App 評分，常在菜單中添加選項或者彈窗的形式對用戶進行評分引導(dǎo)，在 Ionic 只要判斷設(shè)備平臺后進行相應(yīng)的跳轉(zhuǎn)到對于的商店即可。

9. 集成極光推送

開發(fā) App 的主要用途就是在網(wǎng)站宕機后，使用推送功能進行第一時間通知，以便技術(shù)人員進行快速響應(yīng)，所以推送功能是必須集成進去的。國內(nèi)有很成熟的第三方推送平臺：極光推送。注冊后進行插件的添加，也就是jpush-phonegap-plugin。在用戶登錄的時候?qū)τ脩舭凑談e名或分組進行標(biāo)識。var arrayObj = new Array("Tags" + loginResult.UserId);window.plugins.jPushPlugin.setTags(arrayObj);個人推薦按照分組也就是 tags 進行標(biāo)識，因為一個用戶可能會使用不同的設(shè)備，那么推送的時候不同的設(shè)備就可以全部都收到通知，不至于漏掉推送消息。API 端在監(jiān)控 Server 端進行操作即可，也就是在檢測到宕機后，進行極光 API 調(diào)用，發(fā)送宕機的提醒即可。

10. 打包 iOS 、Android

?平臺的種種問題到這里就要顯示 Hybrid App 的威力了，一次開發(fā)，全平臺打包發(fā)布。只要通過 Ionic 的 build 命令或者打開編譯環(huán)境進行對應(yīng)的平臺打包即可，當(dāng)然打包之前最好使用模擬器進行測試。有幾個問題是需要注意的：iOS 打包需要注意極光推送是分開發(fā)證書環(huán)境和生產(chǎn)證書環(huán)境的，需要特別的注意，極光推送的設(shè)置需要和本地打包的證書以及 plist 配置的保持完整的一致，注意下圖APS_FOR_PRODUCTION值的設(shè)置。Android 的打包發(fā)布則需要注意構(gòu)件工具 Gradle 的版本問題。iOS 提交后一般審核一周左右，以后每次更新基本都保持在一次等待一周的頻率，所以一定要測試好免得線上版本出現(xiàn)致命 bug 的情況。

11. 項目開源和下載

此項目我也開源在了 GitHub 上，相關(guān)優(yōu)化還要抽閑暇時間去做，相關(guān)資源如下，歡迎提意見和需求，我盡量保持改進。官網(wǎng)：http://gugujiankong.com/iOS 版本：https://itunes.apple.com/cn/app/gu-gu-jian-kong-zhuan-zhu/id1042192962?l=en&mt=8Android 版本：http://www.wandoujia.com/apps/com.gugujiankong.iosappGitHub開源：https://github.com/ParryQiu/GuGuJianKongJiaThis Button BEGIN