2017-06-29

ionic3开发遇到的一些问题及解决方法

两年前，第一家公司用过ionic1开发过APP，当时对ionic1了解的不是很熟，今年公司重写APP更换技术框架为ionic3，配合ng4的开发，重新接触ionic app开发后，个人感觉开发上效率比较高，日后有时间会深入研究。下边是APP重写时遇到的一些问题总结。

不能使用组件名称作为条件判断依据

为了实现token失效或超时登录，接口拦截请求跳转登录页面，起初我用了组件名称LoginPage作为判断，因为首页请求三个接口，进入首页的时候，三次请求都会判断为token失效，都会跳转登录页面，如果不做当前是否为登录页面判断，都跳转登录页面的话，会出现三次登录页面的重复跳转。

最开始代码为：代码片段1

//登录失效，自动跳转登录页面
  if (json["code"] === -9999) {
       let curActiveView = this.nav.getActive();
        //根据登录页面组件名称为LoginPage判断
       if (curActiveView && curActiveView.component.name!=='LoginPage') {
          this.nav.push(LoginPage);
       }
   }

继续阅读全文 »

2017-06-27

技术►Ionic

ionic3之自定义tabs菜单图标

ionic的tabs组件默认图标更换方式可以通过自定义图标样式来替换。自定义图标可以是图标字体库，也可以是png图标等。

在tabs.scss文件（组件作用域），或者全局app.scss覆盖都行。下边是菜单覆盖代码：


page-tabs {
    .ion-tab-icon-base {
        width: 32px !important;
        height: 32px !important;
        padding: 4px 4px 2px;
    }
    .ion-tab-icon-md-base {
        min-width: 0 !important;
        height: 32px;
    }
    $tabImageName: 'home' 'task' 'master' 'my';
    @for $i from 1 to 5 {
        //for ios
        .ion-ios-tab-#{nth($tabImageName, $i)} {
            @extend .ion-tab-icon-base;
            content: url("../../assets/ui/tabs/icon_#{nth($tabImageName, $i)}_on.png");
        }
        .ion-ios-tab-#{nth($tabImageName, $i)}-outline {
            @extend .ion-tab-icon-base;
            content: url("../../assets/ui/tabs/icon_#{nth($tabImageName, $i)}_off.png");
        }
        // for android
        .tabs-md .tab-button[aria-selected=true] {
            .ion-md-tab-#{nth($tabImageName, $i)} {
                @extend .ion-tab-icon-md-base;
                content: url("../../assets/ui/tabs/icon_#{nth($tabImageName, $i)}_on.png");
            }
        }
        .tabs-md .tab-button[aria-selected=false] {
            .ion-md-tab-#{nth($tabImageName, $i)} {
                @extend .ion-tab-icon-md-base;
                content: url("../../assets/ui/tabs/icon_#{nth($tabImageName, $i)}_off.png");
            }
        }
    }
    .ion-ios-tab-task,.ion-ios-tab-task-outline,.ion-ios-tab-master,.ion-ios-tab-master-outline{
        width: 30px !important;
        height: 32px !important;
    }
}