之前已经写过2篇相关的文章了,这里在把遇到的坑的细小的点也记录一下:
之前的两篇文章:
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来做淡入淡出过渡