ionic3 学习笔记(一)

最近开始用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();//返回上一页

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容