ionic V3.3开发踩坑集锦

GitHub地址：github.com/JerryMissTo… ，欢迎关注

最近在使用ionic作项目，遇到过一些问题，现记录下来，说不定有缘人会须要它。咱们的App进入就是登陆界面，登录成功后会进入到底部有若干Tab的主界面。
Platform Version：

• ionic:3.3.0
• Cordova:7.0.1

最近更新了一篇V3.10的开发，地址是：ionic V3.10 开发踩坑集锦，假如两者有冲突，以最新的为准。

打包出来的apk启动缓慢，有白屏

使用 ionic cordova build android --prod --release 打包文件会更小，启动更迅速，亲测有效

打包出来的APK没有权限

使用Android Studio打开生成的工程，在Manifest.xml中设置权限，在个人Mac上遇到没法进行网络访问的状况，只得另外添加，可是在另外一同事那儿没有这个问题，打包直接就能够进行网络访问，真是奇怪

从登陆界面进入主页，按返回键能够返回至登陆页

在登陆成功的处理代码段中添加this.navCtrl.setRoot(TabsPage)，其中TabsPage是主界面。一般App打开就是登陆界面，登录后才是主界面。咱们在app.component.ts中设置了root=LoginPage，因此一进去就是登陆界面，在主界面点击返回按钮会退到登陆界面，执行上述代码后从新设置Root界面就能够解决。

添加自定义字体图标

在src目录下新建icon文件夹，把字体文件放进去。而后在theme/variables.scss中后面添加如下内容，注意把相应位置替换成你本身的：

$iconfont-path: "../assets/icon";

@font-face {
  font-family: "iconfont";
  src: url('#{$iconfont-path}/iconfont.eot?t=1495679878046'); /* IE9*/
  src: url('#{$iconfont-path}/iconfont.eot?t=1495679878046#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('#{$iconfont-path}/iconfont.woff?t=1495679878046') format('woff'), /* chrome, firefox */
  url('#{$iconfont-path}/iconfont.ttf?t=1495679878046') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('#{$iconfont-path}/iconfont.svg?t=1495679878046#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 1.6rem;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ion-md-customer-home:before,
.ion-ios-customer-home:before,
.ion-ios-customer-home-outline:before,
.ion-md-customer-rank:before,
.ion-ios-customer-rank:before,
.ion-ios-customer-rank-outline:before,
.ion-md-customer-stock:before,
.ion-ios-customer-stock:before,
.ion-ios-customer-stock-outline:before {
  @extend .iconfont;
}

.ion-md-customer-home:before { //在这里自定义你的名字，例如：customer-home，前缀也要加上，与平台相关
  content: "\e60f";
}

.ion-ios-customer-home:before {  //选中
  content: "\e611";
}

.ion-ios-customer-home-outline:before {   //未选中
  content: "\e60f";
}

.ion-md-customer-rank:before {
  content: "\e60d";
}

.ion-ios-customer-rank:before {
  content: "\e60e";
}

.ion-ios-customer-rank-outline:before {
  content: "\e60d";
}

.ion-md-customer-stock:before {
  content: "\e610";
}

.ion-ios-customer-stock:before {
  content: "\e612";
}

.ion-ios-customer-stock-outline:before {
  content: "\e610";
}
$tabs-ios-tab-text-color-active:#f6670B; //设置点击后的颜色
$tabs-ios-tab-icon-color-active:#f6670B;
$tabs-md-tab-text-color-active:#f6670B;
$tabs-md-tab-icon-color-active:#f6670B;复制代码

而后在须要的地方，例如在tabs.html中：

<ion-tabs>
    <ion-tab [root]="tab1Root" tabTitle="{{ 'TABS.TAB1_TITLE' | translate }}" tabIcon="customer-home"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="{{ 'TABS.TAB2_TITLE' | translate }}" tabIcon="customer-rank"></ion-tab>
</ion-tabs>复制代码

最后，在app.scss中添加如下代码，防止图标偏上：

.tabs-ios .tab-button-icon::before {
  vertical-align: middle;
}复制代码

ios平台上，界面底色可能会变黑色

使用<ion-content></ion-content>包裹内容

国际化

使用官方推荐的ngx-translate，而不是ng2-translate。地址是：ionicframework.com/docs/develo… ionic V3是基于Angular2的，因此国际化也是沿用其方法，地址为：github.com/ngx-transla…

Token过时返回至登陆页

检测到Token过时，应该跳转到登陆页，从新登陆，具体方法是：在须要跳转的地方，执行如下代码

this.navCtrl.setRoot(LoginComponent);复制代码

此时可能会出现底下的Tab显示的问题，隐藏它：

ngOnInit() {
    let elements = document.querySelectorAll(".tabbar");
    if (elements != null) {
      Object.keys(elements).map((key) => {
        elements[key].style.display = 'none';
      });
    }
  }复制代码

从含Tab的主界面进入二级界面后Tab仍然显示

在二级界面中加入以下代码：

//进入隐藏Tab
ngOnInit() {
    let elements = document.querySelectorAll(".tabbar");
    if (elements != null) {
      Object.keys(elements).map((key) => {
        elements[key].style.display = 'none';
      });
    }
  }

//返回至主界面显示Tab
ngOnDestroy() {
    let elements = document.querySelectorAll(".tabbar");
    if (elements != null) {
      Object.keys(elements).map((key) => {
        elements[key].style.display = 'flex';
      });
    }
  }复制代码

ionic V3使用ECharts V3.6

cd /项目的根目录下
npm install echarts --save复制代码

而后在使用的.ts文件中导入：

import echarts from 'echarts';复制代码

事件通知

ionic V3.X 自己提供了发布-订阅风格的应用级别的事件系统Events ，使用起来简单方便，具体用法见：ionicframework.com/docs/api/ut…