轉(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)站的在線情況囤热，檢測到宕機的第一時間進(jìn)行 App 推送，可以通知技術(shù)人員第一時間進(jìn)行響應(yīng)處理获三；* 可以對添加的網(wǎng)站進(jìn)行測速匯總旁蔼，在 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 都需要進(jìn)行即時的刷新以及用戶添加新的網(wǎng)站后頁面也需要進(jìn)行刷新槽奕，那么就需要禁用掉 View 的緩存几睛。禁用緩存只需要在 View 中禁用即可。全局禁用緩存的方法是：$ionicConfigProvider.views.maxCache(0);
3. 鍵盤的不同模式的支持
在不同的用戶輸入場景下粤攒，需要顯示不同的鍵盤模式以方便用戶輸入所森，如在輸入郵件時鍵盤則顯示郵件模式等。在 Ionic 中需要安裝鍵盤插件控制鍵盤模式的顯示夯接。安裝后在$ionicPlatform.ready中調(diào)用即可焕济。對應(yīng)的 input 只要添加相應(yīng)的 type 進(jìn)行控制即可，支持的所有 type 見這里盔几。使用效果如下晴弃。
4. 設(shè)備網(wǎng)絡(luò)狀況的檢查
因為此 App 一直需要聯(lián)網(wǎng)操作，那么在 App 啟動的時候就要對網(wǎng)絡(luò)情況進(jìn)行檢查逊拍，當(dāng)網(wǎng)絡(luò)不可用的時候?qū)τ脩暨M(jìn)行相應(yīng)的提示上鞠。安裝網(wǎng)絡(luò)檢查插件后，在 App 啟動的時候進(jìn)行檢測并提示即可芯丧。
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)對此功能進(jìn)行了集成，只需要在 View 中按照此方法使用即可驼唱，獲取的方法放在 on-refresh 中即可藻茂。
7. 反饋『意見及建議』
調(diào)用郵件客戶端的方法常需要在菜單中添加上『意見及建議』選項，當(dāng)用戶點擊后玫恳，調(diào)用郵件客戶端辨赐，自動填寫上收件人和郵件標(biāo)題，用戶只要書寫內(nèi)容點擊發(fā)送即可京办∠菩颍跨平臺的方案是安裝EmailComposer插件，在按鈕的事件中調(diào)用即可惭婿。
8. 給 App 評分
不同平臺的辦法為了引導(dǎo)用戶去給 App 評分不恭，常在菜單中添加選項或者彈窗的形式對用戶進(jìn)行評分引導(dǎo)，在 Ionic 只要判斷設(shè)備平臺后進(jìn)行相應(yīng)的跳轉(zhuǎn)到對于的商店即可财饥。
9. 集成極光推送
開發(fā) App 的主要用途就是在網(wǎng)站宕機后换吧，使用推送功能進(jìn)行第一時間通知，以便技術(shù)人員進(jìn)行快速響應(yīng)钥星，所以推送功能是必須集成進(jìn)去的沾瓦。國內(nèi)有很成熟的第三方推送平臺：極光推送。注冊后進(jìn)行插件的添加谦炒，也就是jpush-phonegap-plugin暴拄。在用戶登錄的時候?qū)τ脩舭凑談e名或分組進(jìn)行標(biāo)識。var arrayObj = new Array("Tags" + loginResult.UserId);window.plugins.jPushPlugin.setTags(arrayObj);個人推薦按照分組也就是 tags 進(jìn)行標(biāo)識编饺，因為一個用戶可能會使用不同的設(shè)備乖篷，那么推送的時候不同的設(shè)備就可以全部都收到通知，不至于漏掉推送消息透且。API 端在監(jiān)控 Server 端進(jìn)行操作即可撕蔼，也就是在檢測到宕機后，進(jìn)行極光 API 調(diào)用秽誊，發(fā)送宕機的提醒即可鲸沮。
10. 打包 iOS 、Android
?平臺的種種問題到這里就要顯示 Hybrid App 的威力了锅论，一次開發(fā)讼溺，全平臺打包發(fā)布。只要通過 Ionic 的 build 命令或者打開編譯環(huán)境進(jìn)行對應(yīng)的平臺打包即可最易，當(dāng)然打包之前最好使用模擬器進(jìn)行測試怒坯。有幾個問題是需要注意的：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)資源如下，歡迎提意見和需求舱污，我盡量保持改進(jì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
