最近开始用ionic3写项目,在这边总结一下学习结果
ionic3 项目创建
1、node官网下载.msi文件,安装; 2、打开cmd 输入 node -v 得到版本号; 3、安装 npm install -g cordova ionic (如果npm不可以就安装淘宝镜像,然后用cnpm创建 npm install -g cnpm --registry=https://registry.npm.taobao.org); 4、进入路径如E: 创建项目:ionic start 名称 tabs ; 5、运行 ionic serve
2、新建页面指令:
ionic g page 名称 //创建新页面 ;ionic g directive 名称 //创建指令;ionic g component 名称 //创建组件;ionic g provider 名称 //创建服务;ionic g pipe 名称 //创建过滤器
注:组件和过滤器的调用方法大致相同,首先创建,然后在需要使用的页面映入,ionic3不需要公共声明
3、清除底部tabs(部分页面不需要tabs底部)
/*清除底部tabs */
ionViewDidLoad() {
var tabs = document.getElementsByClassName('tabbar').item(0);
tabs['style'].display = 'none';
}
/*离开页面恢复tabs */
ionViewWillLeave() {
var tabs = document.getElementsByClassName('tabbar').item(0);
tabs['style'].display = 'flex';
}
/*清除所有二级页面底部tabs*/
修改app.Module.ts里IonicModule.forRoot(MyApp)为
IonicModule.forRoot(MyApp,{
tabsHideOnSubPages: 'true' , //隐藏全部子页面tabs
iconMode: 'ios',
mode: 'ios',
modalEnter: 'modal-slide-in',
modalLeave: 'modal-slide-out',
}),
4、返回页面
this.navCtrl.popToRoot();//从子页面快速返回根页面
this.navCtrl.pop();//返回上一页