美文网首页技术文章ionic开发技术类
Ionic 常见问题及解决方案

Ionic 常见问题及解决方案

作者: 兼续 | 来源:发表于2016-01-16 23:28 被阅读23382次

    在Ionic开发过程中会遇到很多常见的开发问题,分享一下笔者在开发过程中总结到的对这些问题的解决方案。也是接触ionic没多久,大家一起努力,有问题欢迎评论指出 :)
    ps: 附上博客的原文地址


    一些常识与技巧

    • list 有延迟,可以在ion-content处使用 overflow-scroll="true"尝试
    • <i>上用ng-click上是没效果的
    • <label>标签内的事件会在整个label内被触发,点哪都触发
    • 快捷修改背景色style="background-color: #212326;"
    • 能用ng-if就用ng-if,ng-if的效率比ng-showng-hide
    • 直接在ion-list中的ion-item中并不能触发ng-click事件,可以在item中的元素上再套一层div
    • 可以用ng-class="{'important': post.important}"配合css 根据列表元素显示不同的效果
    • 获取日期用$filtervar postdate = $filter('date')(date, 'yyyy-MM-dd HH:mm:ss');
    • 列表中的元素不能写成 id : 4,应写成 id : "4",注意在创建id变量的时候也需要转成string,如var id = InfoListService.getListLength()+1+"";
    • 使用$log进行log输出,为什么用$log而不是console.log呢?可以看看这个
    • 在安卓上的体验比较差,动画有延迟?可以试试ionic集成的crosswalk
    • controllersservices 的文件名可能会重合,但是他们意义差不多,可以将controllers中的文件名小写,对应的services中的文件名大写进行区分,或者加后缀xxxControler,xxxService

    问题列表

    1. [如何在某个界面中去掉导航栏?]
    2. [如何在ionic中加载本地图片?]
    3. [如何在ionic中嵌入网页代码?]
    4. [如何将template加载到某个tab或某个sidemenu项目下?]
    5. [用docker跑ionic的时候,不能把地址绑定到0.0.0.0怎么处理?]
    6. [加载页面的时候会看到双括号一闪而过?]
    7. [更新了数据,如何让界面更新呢?]
    8. [如何实现IonicView中card上面有一列分割线的效果?]
    9. [controller.js和service.js文件越来越大怎么办?]
    10. [如何寻找优秀的范例代码?]
    11. [如何显示相对时间?]
    12. [发布应用的时候如果遇到翻译错误即MissingTranslation怎么办?]
    13. [如何在列表右下方添加时间等信息?]
    14. [如何回到上一页面?]
    15. [如何关闭应用?]
    16. [在安卓设备上如何让title居中?]
    17. [如何让在sidemenu中的headerbar能够显示头像等其他信息?]
    18. [ionic的subheader挡住了内容区域怎么办?]
    19. [对于需要添加数据的list,在添加数据后页面不能及时刷新造成卡顿怎么办?]
    20. [ionic如何处理回退按钮?例如询问用户是否真的要退出应用]
    21. [ionic如何实现对每个请求都添加认证信息或认证失败自动重新登录?]
    22. [ionic如何实现搜索框内的全部清除按钮?]

    如何在某个界面中去掉导航栏?

    如果某个界面上不想要导航栏,可以简单地在最顶端的标签中添加hide-nav-bar="true"


    如何在ionic中加载本地图片?

    对于css文件夹中的样式文件中如果要调用本地的图片的话,从该css文件所在的文件夹开始算,例如www/css/style.css要加../,否则在浏览器中可以正常显示,在设备上不行,结构如下所示:

        .login-page {
          background:url(../img/signup_bg.png);
          background-size: cover;
          background-repeat: no-repeat;
        }
    

    但是对于在页面中定义的图片路径,从www路径开始算,否则浏览器中可显示,但设备上不行,img文件夹和index.html在一级,如:

            <img src="img/commander.jpg">
    

    如何在ionic中嵌入网页代码?

    使用ng-bind-html这个类,不过它会过滤原始html的标签,我们可以引入$sce模块,用$sce.trustAsHtml()方法信任我们获取的网页


    如何将template加载到某个tab或某个sidemenu项目下?

    <ion-nav-view name="menuContent"> 可以指定name,然后在子状态中使用该name,ionic就知道该把该状态的template渲染到哪边了。例如:

        // signup page
        .state('auth.signup', {
          url: '/signup',
          views: {
              'auth-signup': {
                  templateUrl: 'templates/auth-signup.html',
                  controller: 'SignUpCtrl'
              }
          }
        })
    
        另有一个tabs中声明该auth-signup:
        <ion-tab title="Sign Up" icon-on="ion-ios-personadd"
          icon-off="ion-ios-personadd-outline" href="#/auth/signup">
          <ion-nav-view name="auth-signup"></ion-nav-view>
       </ion-tab>
    

    运行serve命令时ionic报错?

      ionic $ An uncaught exception occured and has been reported to Ionic
    

    看看你是不还有一个终端在运行着serve呢?


    用docker跑ionic的时候,不能把地址绑定到0.0.0.0怎么处理?

    可以用ionic serve -all的方法解决


    加载页面的时候会看到双括号一闪而过?

    angularjs 在使用双括号的时候,第一个加载的页面,也就是应用中的index.html,其未被渲染好的模版可能会被用户看到。用ng-bind就不会遇到这个问题。造成这种现象的原因是,浏览器需要首先加载HTML页面,渲染它,然后Angular才有机会把它解释成你期望看到的内容。不过好消息是,在大多数的模版中你依然可以使用双括号.但是对于index.html页面中的数据绑定操作,建议使用ng-bind

    ng-bind使用方式如下: <p ng-bind="greeting"></p>


    更新了数据,如何让界面更新呢?

    可以用广播,注意$broadcast 和 $emit的区别


    如何实现IonicView中card上面有一列分割线的效果?

    在css里定义

    #info-up {
      border-top: 4px solid #f06336;
    }
    

    controller.js和service.js文件越来越大怎么办?

    所有的控制器不必都放在controllers.js这一个文件中,可以新建controllers文件夹,
    然后把每个controller都建一个<controller>.js文件,同理services和utils等都是.但注意要在index.html中head部分声明.但是为了避免他们相互覆盖,第一个加载的js中模块中要加[...],其他都不需要。如:

    // File : /js/directives/mainDirective.js
    angular.module('app.directives',[]);
    
    // File : /js/directives/myGreatDirective.js
    angular.module('app.directives')  
        .directive('myGreatDirective', function(){
            return {
                //...
            }
        });
    
    // File : /js/directives/myBetterDirective.js
    angular.module('app.directives')  
        .directive('myBetterDirective', function(){
            return {
                //...
            }
        });
    
    ...
    

    angularjs-code-organization了解更多,嗯这篇文章写的还不是best practice,因为你还得记着自己把[]写到那个模块里了,统一地写在app.js中即可,在app.js最下面加上类似:

    angular.module('fcws.controllers',['ionic', 'fcws.services']);
    angular.module('fcws.services', []);
    

    可以达到和上面一样的效果,而且可以统一管理.


    如何寻找优秀的范例代码?

    目前有些ionic 的app没有进行代码混淆,至少ionic官方的ionic view没有进行代码混淆,下载他们的app,文件名改成zip,解压,所有的 www文件都在assets文件夹中,相当于开源了有木有,看看那些最优秀的practice。看中哪些优秀的app,下下来,如何在googleplay上下载?把googleplay应用的地址贴到apps.evozi中。


    如何显示相对时间?

    如几分钟前,几天前等,可以用momentjs,看这篇教程


    发布应用的时候如果遇到翻译错误即MissingTranslation怎么办?

    暂时的解决方法是,不进行翻译校正, 在 /platforms/android/build.gradle 中的android {}节中加入:

    lintOptions {
                             disable 'MissingTranslation'
                                disable 'ExtraTranslation'
    }
    

    如何在列表右下方添加时间等信息?

    span 可以用来将时间之类的附加信息显示到列表右边,如下面会将创建时间显示在name的右边:

        <ion-item class="item item-avatar-left " ng-repeat="message in messages">
            <img src="../../img/commander.jpg">
            <span class="item-note">{{message.create_at}}</span>
            <h2 >{{message.name}}</h2>
            <p >  {{message.content}}</p>
        </ion-item >
    

    如何回到上一页面?

    $ionicHistory这个模块,引入该模块后使用goBack([backCount]),backCount指定回去多少个页面(-1代表回去一个页面),默认为-1


    如何关闭应用?

        ionic.Platform.exitApp();
    

    在安卓设备上如何让title居中?

    在headerbar中添加align-title="center",如:

    <ion-header-bar class="bar-positive" align-title="center">
         <h1 class="title">{{username}}</h1>
    </ion-header-bar>
    

    不过这个设置对ion-view无效,亲测,如果要统一让所有navbar上的title居中(包括上面的headerbar),可以在config里设置,如:

    .config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
      $ionicConfigProvider.navBar.alignTitle('center');
      ...
    

    如果要让某一个view title居中,可以用$ionicNavBarDelegate,参考ionic官方文档


    如何让在sidemenu中的headerbar能够显示头像等其他信息?

    解决方案是去掉headerbar,添加一个avatar到sidemenu content中,如:

    <ion-side-menu side="left">
        <ion-content class="bar-positive">
            <ion-list>
                <ion-item class="item item-avatar item-positive" href="#">
                    <img src="img/commander.jpg">
                    <h2 class=" light">
                        <i class="icon ion-ios-star"></i>{{title}}
                    </h2>
                    <a>{{username}}</a>
                </ion-item>
    

    ionic的subheader挡住了内容区域怎么办?

    解决方案是给<ion-content>加类has-subheader,同理也可以加has-header。如下:

      <ion-content class="has-header has-subheader">
    

    对于需要添加数据的list,在添加数据后页面不能及时刷新造成卡顿怎么办?

    可以使用$ionicScrollDelegate.resize();在添加数据后手动进行重新刷新,记得添加依赖


    ionic如何处理回退按钮?例如询问用户是否真的要退出应用

    可以在app.js的.run方法中增加对硬件回退按钮的注册处理,这里我在大部分页面都想注册该事件,除去有二级历史页面的我单独判断了下,注意增加依赖。

            $ionicPlatform.registerBackButtonAction(function(e) {
                var current_state_name = $state.current.name;
                if(current_state_name !== 'sidemenu.post'
                 && current_state_name !== 'sidemenu.contact_town' &&
                current_state_name !== 'sidemenu.contact_people'){
                    $ionicPopup.confirm({
                        title: '退出应用',
                        template: '您确定要退出xxxx吗?'
                    }).then(function (res) {
                        if (res) {
                            //ionic.Platform.exitApp();
                            navigator.app.exitApp();
                        } else {
                            console.log('You are not sure');
                        }
                    });
                    e.preventDefault();
                    return false;
                }else{
                    navigator.app.backHistory();
                }
            },100);
    

    ionic如何实现对每个请求都添加认证信息或认证失败自动重新登录?

    在应用的注册或者登录部分,不记名token响应了这个请求并且这个token被存储到本地存储中。当你向后端请求一个服务时,你需要把这个token放在头部中。你可以在app.js.config方法中使用AngularJS的拦截器实现这个。每次请求都会被拦截并且会把认证头部和值放到头部中,同理如果服务器端响应401403,跳转到重新登录页面.

            $httpProvider.interceptors.push(function ($q, $location, User, $rootScope) {
                return {
                    'request': function (config) {
                        config.headers = config.headers || {};
                        if (User.getToken()) {
                            config.headers.Authorization = 'Bearer ' + User.getToken();
                        }
                        return config;
                    },
                    'responseError': function (response) {
                        if (response.status === 401 || response.status === 403) {
                            //如果之前登陆过
                            if (User.getToken()) {
                                $rootScope.$broadcast('unAuthenticed');
                            }
                        }
                        return $q.reject(response);
                    }
                };
            });
    

    ionic如何实现搜索框内的全部清除按钮?

    在label中的input不能嵌入按钮,因为ionic对于label中的tap事件会进行重定向到input上。解决方案是将label替换成span或div。如下面的搜索框,注意ng-model需要是一个对象才能置空,变量不行:

           <span class="item-input-wrapper">
                <i class="icon ion-ios-search placeholder-icon"></i>
                <input type="search" placeholder="请输入姓名前缀" ng-model="search.key">
                    <i class="icon ion-close-circled placeholder-icon" style="vertical-align: middle;"
                       on-tap="clearSearch()" ng-if="search.key.length"></i>
            </span>
    

    相关文章

      网友评论

      • d2800c53b257:请问下ionic下载文件高版本安卓系统能打开低版本打开下载的文件该文件会出现问题该怎么解决
      • 不伟心:大神,$ionicHistory怎么引入的可否指点一二
      • 西门吹雪123:博主,我最近在学习ionic,现在遇到一个问题:iOS和Android的真机和模拟机器,都无法加载从网络请求的图片,请问有遇到这种情况吗?如何解决?恳请不吝赐教~
      • 9c9fae541d1e:ionic serve .报错知道怎么解决吗?
        报错内容:
        Error occurred while loading plugins. CLI functionality may be limited.
        Checking for CLI updates now...
        PLUGIN_NOT_INSTALLED
        [ERROR] No updates found after plugin error--please report this issue.
        兼续:@歪嘴瞎子 建议试试卸载重装
      • 昵称已被使用_:都这时候了,来开始第一个ionic2app
        http://www.jianshu.com/p/836392297eb9
      • 童井神:你好,感谢你的文章学习了,有一个问题。按照你的方法来到路由配置那一步,浏览器上URL跳转到了HOME 但是页面不显示?查看了报错也只有cordova报错,这是个什么情况?渲染不成功?
      • zero_sr:你好,我有一个问题想请教一下,设置了ion-item的点击事件,它的内部元素也有点击事件,触发内部元素的点击事件也会触发ion-item的,这样的问题应该如何解决呢?
        兼续:@zero_sr 这个应该类似于js里的事件冒泡,你查下"ionic item click stop propagation"
      • 872e2f38d0ee:多谢分享 学习了
      • 点柈:想问一个问题啊,就是在app活跃状态的时候写一个倒计时的方法,在这个方法运行的时候退出app,这个倒计时就停在那里了,有啥办法可以让它在app不活跃的时候还能倒计时啊?
      • bad9418514e1:求解一个问题,ionic 上拉加载更多,列表数据确实显示出来了,但是往下滚动时,后面有一部分内容无法看到,必须进入别的页面,然后退回,才能继续往下滚动,看到懒加载的数据,可有朋友遇到这样的情况吗?
      • aeronzh:请问有没有碰到过某些Android设备上的$ionicPopup.confirm不弹出,需要再点击一下才出来。
        兼续:@hzhang 抱歉测试用的android设备有限,暂时没遇到这个问题,ionic在某些机型上确实会出现诡异的问题
      • 374a48ebaaf2:我在tab栏切换的时候,有时候会刷新不出来页面。而且ios真机测试页面为空,而且按钮点击没效果,安卓机没有说按钮点击不了,这是因为什么?
      • 2010jing:ionic如何处理回退按钮?例如询问用户是否真的要退出应用
        这个我添加了 但是没有任何反应。。。 按回退键 还是一直退回历史,
        尝试在if 之前添加 一个alert(), 也没有信息弹出,求指导
        兼续:@2010jing 例如 $ionicPlatform,$ionicPopup等服务是ionic提供给你的,如果你要用这个服务,就得在使用之前先声明它,建议你先看看一些基础的ionic开发的教程,先把基本的内容学习好
        2010jing:@icoco ionic如何处理回退按钮?例如询问用户是否真的要退出应用 提到增加依赖,博主 请问是什么依赖,刚刚接触,不懂
        兼续:@2010jing 可以的话尽量把你的运行环境和代码贴出来,开启ionic的debug模式把运行信息打出来,用的哪个系统,这个功能要在真机上才能有效果,所以你安装的哪个型号的机器?
      • 咬了一口的苹果灬:is not a function怎么解决
        兼续:@Jayce张英才 具体点,什么is not a function,发生在什么情况下,具体ionic的错误堆栈
      • 青米央:有哪些应用是使用ionic编写的
        兼续:@青米央 可以看看Ionic的showcase: http://showcase.ionicframework.com

      本文标题:Ionic 常见问题及解决方案

      本文链接:https://www.haomeiwen.com/subject/kyzhkttx.html