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