【Ionic2】Ionic2 踩坑記錄

之前已經寫過2篇相關的文章了,這裏在把遇到的坑的細小的點也記錄一下:


之前的兩篇文章:

1 【Ionic2】Ionic2打包編譯時內存溢出問題

2 【Ionic2】Ionic2 Android 打包 Crosswalk報錯問題的解決方案


這裏要記錄的坑:


1 安卓6.0時,Push跳頁面報錯,報錯的信息如下:

Expression has changed after it was checked. Previous value: 'undefined' Current value: 'true'

解決方案:

在app.component頭上加上

import { enableProdMode } from '@angular/core'
enableProdMode();


2 fileTransfer

應用中的圖片文件有時需要緩存到本地,用fileTransfer緩存的圖片保存的文件路徑,只能已相對路徑的方式存儲下來

在實際使用中再加上文件夾路徑

ios的沙盒覆蓋安裝之後,絕對路徑將會改變(緩存文件相對app的相對路徑不變),所以緩存的路徑需要用相對路徑進行存儲



3 file下checkFile和removeFile

文檔上的說明如下:

checkFile(path, file)

removeFile(path, fileName)

其中的坑在於,第三方選圖/選視頻插件返回的路徑可能爲

/storage/img/123.png

或者是

file:///storage/img/123.png

checkFile和removeFile的第一個參數path,只接受file://開頭的路徑

即這裏的path應該填寫,file://storage/img,並且這裏path需要進行encodeURI處理


checkFile和removeFile的第二個參數都是文件名fileName,

在這裏爲123.png,並且這裏fileName也需要進行encodeURI處理



4 Android的app上的角標,通常使用cordova-plugin-badge進行角標的加減處理

其中Android 6.0+,7.0+的版本,需要0.8.1的該插件版本才能支持角標正常工作



5 template上的遍歷和其它元素上的遍歷寫法略有不同

<template ngFor let-complication [ngForOf]="complication_list" let-i="index">

<ion-item *ngFor="let complication of complication_list;let i = index;">



6 ionic在Android啓動慢的問題

需要在加Android平臺的時候指定至少6.1.0以上

config.xml中配置

<engine name="android" spec="~6.1.0"/>


7 打包、熱更新之前需要使用--prod打包,進行代碼壓縮



8 半透明遮罩淡入淡出的做法:

(1)只有modal可以,push頁面進去的話,背景也會不見,modal可以做透視

(2)modal的present和收起modal時候的viewCtrl.dismiss中參數都有NavOptions,即和頁面push一樣的選項參數,只是文檔上不告訴你(windows編輯器上按住ctrl點進去看源碼)

present(navOptions?: NavOptions): Promise<any>;

dismiss(data?: any, role?: string, navOptions?: NavOptions): Promise<any>;

(3)NavOptions 中 animate 參數代表是否要動畫,這裏填false就能不要默認的過渡動畫了,animation 參數是可選的動畫效果,文檔告訴我們有md-transition, ios-transition and wp-transition.這幾種,所以不滿足我們淡入淡出效果

export interface NavOptions {
    animate?: boolean;
    animation?: string;
    direction?: string;
    duration?: number;
    easing?: string;
    id?: string;
    keyboardClose?: boolean;
    progressAnimation?: boolean;
    disableApp?: boolean;
    minClickBlockDuration?: number;
    ev?: any;
    updateUrl?: boolean;
    isNavRoot?: boolean;
}

所以用animate: false屏蔽原有默認過渡動畫,然後再自己用transaction和opacity來做淡入淡出過渡


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章