ionic V3.3開發踩坑集錦

JerryMissTom發表於2017-06-08

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…

相關文章