1.懒加载的问题
ionic3使用了懒加载,所以页面之间的跳转可以直接使用字符串,例如:[navPush]='"HomePage"',this.navCtrl.push('HomePage'),且不需要在app.module.ts中再申明;(申明后ionic build不会报错但是ionic build --prod会报错);
2.ios的顶部被覆盖的问题
使用cordova-plugin-statusbar插件,在app.component.ts中,将statusBar.overlaysWebView(false),设为false;这样不太美观,可以根据不同的页面和不同的系统设置顶部padding值
也可以采用这个方法https://www.jianshu.com/p/bce20d9d86c1;
3.修改标签属性
想修改ionic中的某个标签属性例如ion-item最好修改其class,如:.item-ios下修改(最好定义个父级的类,这样不会影响其他的ion-item),不要直接修改ion-item,这样会不生效
4.Android物理返回键的问题
在import { NavController, App,Slides,ActionSheetController,Keyboard,ToastController,Platform } from 'ionic-angular';引人platform,定义公共变量unregister:any,exiting: boolean = false;
在ionViewDidEnter()中添加
this.unregister=this.platform.registerBackButtonAction((e:any)=>{
if (this.keyboard.isOpen()) {//判断键盘是否为打开状态
this.keyboard.close();
}
else if () {//不为首页时
this.navCtrl.pop()
}else{//为首页时
this.showExit();
}
},200);
showExit() {
if (this.exiting === true) {
this.platform.exitApp();
} else {
this.exiting = true;
let tt = this.toast.create({
message: '再按一次退出应用程序',
duration: 2000,
position: 'bottom'
});
tt.present();
setTimeout(() => {
this.exiting = false;
}, 2000);
}
}
如果想让上述方法在整个APP中使用的话直接加在app.component.ts中,如果想只在某个页面中生效的话,记得将上面的优先级200调大以覆盖之前定义的返回方法,还有在离开页面时记得注销该方法,不然会在整个APP页面中生效
ionViewWillLeave(){
let out = this;
out.unregister();
}
具体可以查看ionic官网api中的platform下的registerBackButtonAction方法;
5.关于ionic视频播放的问题
我是使用的videogular2这个插件,具体使用方法可以在videogular2官网中查看https://videogular.github.io/videogular2/docs/getting-started/,顺便吐槽下这个官网网络有问题老是进不去,如果在ionic项目里报错:rxjs_1.fromEvent is not a function的话,可以尝试将版本回退下,回退到6.1.0版本,在ios中会默认为全屏,如果不想全屏记得在video标签中加playsinline webkit-playsinline属性;
6.ion-segment标签失效的问题
在支付页面调用外部软件再跳转到新页面中,ion-segment标签会失效,点击没有反应,例如:在支付页面调用支付宝支付成功后,跳转到订单页面时ion-segment点击会没有反应,其实是有反应的,但是页面没有更新,
解决方法首先在ts中引人
import { Component,ChangeDetectorRef } from '@angular/core';
import { NavController, NavParams,Content } from 'ionic-angular';
声明下@ViewChild (Content)content:Content ;
constructor(private cd: ChangeDetectorRef)
其次在ion-segment-button标签中添加一个方法(ionSelect)='refData()',
refData(){
setTimeout(()=>{
this.cd.detectChanges();//在用户点击0.1秒后刷新页面
},100);
}
插件篇:
1.cordova-plugin-file-opener2在Android8+中打不开apk
在config.xml中添加
<platform name="android">
<config-file parent="/manifest" target="AndroidManifest.xml" xmlns:android="http://schemas.android.com/apk/res/android">
<uses-permission android:name="android.permission.REQUEST_INSTALL_PACKAGES" />
</config-file>
</platform>
其次下载插件至本地并修改源文件src/android/io/github/pwlin/cordova/plugins/fileopener2/fileopener2.java下110行,将if(Build.VERSION.SDK_INT < Build.VERSION.CODE.N)改成if(Build.VERSION.SDK_INT < 24);
具体可以查看https://www.jianshu.com/p/39e2a88fbeb7,方法就是转自这位博主的;
2.com-sarriaroman-photoviewer插件报错
com-sarriaroman-photoviewer在ios中会出现闪退的问题,解决方法是将com-sarriaroman-photoviewer的版本回退到1.1.18,1.2.1的版本有问题,Android没有尝试过,不过Android在1.1.18中没有出现问题;
3.cordova-plugin-video-editor在Android中转码报错
有个取巧的解决方法:打开src/android/VideoEditor.java,将243中的new CustomAndroidFormatStrategy(videoBitrate, fps, width, height), listener, videoDuration);删除即可,部分视频在ios中制作缩略图也会报错(我猜是视频处理过的问题),将缩略图的0秒改成第1秒即可;
4.cordova-plugin-media-capture插件闪退
是因为ios的权限的问题,需要给相机权限
<config-file parent="NSCameraUsageDescription" platform="ios" target="*-Info.plist">
<string>App需要您的同意,才能访问相机,以便。。。</string>
</config-file>
相册权限:
<edit-config file="*-Info.plist" mode="merge" target="NSPhotoLibraryUsageDescription">
<string>App需要您的同意,才能访问相册,以便。。。</string>
</edit-config>
写入权限:
<edit-config file="*-Info.plist" mode="merge" target="NSPhotoLibraryAddUsageDescription">
<string>App需要您的同意,才能写入相册,以便。。。</string>
</edit-config>
音频录制权限:
<edit-config file="*-Info.plist" mode="merge" target="NSMicrophoneUsageDescription">
<string>App需要您的同意,才能录制声音,以便。。。</string>
</edit-config>
5.cordova-plugin-camera闪退
方法同上,只不过去掉录制声音的权限;
6.cordova-plugin-camera在ios中不显示缩略图的问题或者只出现白色
动态判断下是否为ios,当为ios时CameraOptions中设置destinationType为0即base64,Android设置为1;
***最后想说的一些话:
1.地图的插件我用的是调用高德的cordova-plugin-gaodelocation-chenyu插件;
2.支付宝的插件我用的是cordova-plugin-alipay-v2;
3.微信用的是cordova-plugin-wechatv2(微信图片分享部分安卓会闪退);
4.Android机我使用的是Chrome自带的调试工具打开网站便可:
Chrome://inspect/#devices,
连接手机
在控制台运行ionic build,cordova run Android;
ios可以直接使用xcode调试,插上usb连接手机,在
中选择连接的设备,然后点击开始
在这里可以看见后台报错或打印的代码。