【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来做淡入淡出过渡


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