Ionic 常见问题及解决方案
发布于 1年前 作者 rdmclin2 1861 次浏览 来自 分享

在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>
回到顶部