Ionic3x笔记之目录分析、创建组件、页面跳转、Tab页面

最新推荐文章于 2018-04-20 18:26:00 发布
绿叶清风
最新推荐文章于 2018-04-20 18:26:00 发布
阅读量517
点赞数
分类专栏： angular ionic
本文链接：https://blog.csdn.net/PZ0605/article/details/79690540
版权
angular ionic 专栏收录该内容
9 篇文章 0 订阅
订阅专栏

ionic = Cordova + Angular + ionic CSS
Ionic 是完全基于谷歌的 Angular 框架，在 Angular 基础上面做了一些封装，
让我们可以更快 速和容易的开发移动的项目。Ionic 调用原生的功能是基于 Cordova,
Cordova 提供了使用 JavaScript 调用 Native 功能，ionic 自己也封装了一套漂亮的 CSS UI 库。

文档：https://ionicframework.com/docs
ionic安装
  1.需要安装 nodejs
  2.安装 npm install -g cordova ionic
  3.创建项目: ionic start myApp tabs
  4.cd 到刚才创建的项目
  5.ionic serve 运行项目

Ionic3.x 目录结构分析:
   hooks:编译 cordova 时自定义的脚本命令，方便整合到我们的编译系统和版本控制系统中
   node_modules :node 各类依赖包
   resources :android/ios 资源(更换图标和启动动画)
   src:开发工作目录，页面、样式、脚本和图片都放在这个目录下
   www:静态文件
   platforms:生成 android 或者 ios 安装包路径( platforms\android\build\outputs\apk:apk
   所在位置)执行 cordova platform add android 后会生成 plugins:插件文件夹，里面放置各种 cordova 安装的插件
   config.xml: 打包成 app 的配置文件
   package.json: 配置项目的元数据和管理项目所需要的依赖
   tsconfig.json: TypeScript 项目的根目录，指定用来编译这个项目的根文件和编译选项
   tslint.json:格式化和校验 typescript
   src 工作目录:
      app:应用根目录
      assets:资源目录(静态文件(图片，js 框架。。。)各
      pages:页面文件，放置编写的页面文件，包括:html，scss，ts。
      theme:主题文件，里面有一个 scss 文件，设置主题信息。

Ionic3.x src 下面文件分析:
   app.components.ts:根组件(每一个组件对应一个.ts,.html,.scss文件)
   app.module.ts：根模块，告诉inonic如何组装应用
   main.ts:入口文件


根模块解读：
   //根模块 告诉ionic如何组装应用

   //引入 angular 以及ionic的系统模块
   import { NgModule, ErrorHandler } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';

   //引入components模块
   import { ComponentsModule } from '../components/components.module';

   //引入根组件
   import { MyApp } from './app.component';

   //页面 自定义的组件
   import { AboutPage } from '../pages/about/about';
   import { ContactPage } from '../pages/contact/contact';
   import { HomePage } from '../pages/home/home';
   import { TabsPage } from '../pages/tabs/tabs';

   //ionic打包成app以后配置启动画面 以及导航条的服务  （不用管）
   import { StatusBar } from '@ionic-native/status-bar';
   import { SplashScreen } from '@ionic-native/splash-screen';

   @NgModule({
     declarations: [   /*申明组件*/
       MyApp,
       AboutPage,
       ContactPage,
       HomePage,
       TabsPage
     ],
     imports: [  /*引入的模块 依赖的模块*/
       BrowserModule,
       ComponentsModule,
       IonicModule.forRoot(MyApp)
     ],
     bootstrap: [IonicApp],  /*启动的模块*/
     entryComponents: [   /*配置不会在模板中使用的组件*/
       MyApp,
       AboutPage,
       ContactPage,
       HomePage,
       TabsPage
     ],
     providers: [   /*配置服务*/
       StatusBar,
       SplashScreen,
       {provide: ErrorHandler, useClass: IonicErrorHandler}
     ]
   })
   export class AppModule {}

创建组件：
   1、cd 到我们的项目目录
   2、通过 ionic g component 组件名称   来创建组件
   3、创建完成组件以后会在 src 目录下面多一个 components 的目录，
      这个目录里面有我 们用命令创建的所有的组件。
   4、如果我们要使用这些组件必须在 app.module.ts 里面注册我们的模块，注册完成后就可
      以在 pages 里面的其页面里面使用这些组件。如：

      //引入components模块
      import { ComponentsModule } from '../components/components.module';

   组件源码：

      import { Component } from '@angular/core';

      @Component({
        selector: 'actionsheet',//在其他页面可以通过这个名字来引用该组件
        templateUrl: 'actionsheet.html'
      })
      export class ActionsheetComponent {

        text: string;
        public list=[];

        constructor() {  /*初始化触发*/
          console.log('Hello ActionsheetComponent Component');
          this.text = 'Hello World';
          for(var i=0;i<15;i++){
            this.list.push('这是第'+i+'条数据');
          }
        }
      }

    5，在page中引用该组件：
     <ion-content padding>
         <actionsheet></actionsheet>
     </ion-content>

     注意要先在对应的components.module.ts中引入，如：
     import { ActionsheetComponent } from './actionsheet/actionsheet';


Ionic3.x 创建页面以及页面跳转
   1，ionic  g pages news  //创建一个news页
   2，app.module.ts 引入声明组件
   3，如果要跳转到这个页面，需要在源页面页面引入这个组件，跳转this.navCtrl.push(xxx);


Ionic3.x页面跳转
    可以通过this.navCtrl.push(页面)来跳转。
    如:home.html文件
    <button ion-button (click)="goNews()">跳转到新闻页面</button>

    home.ts文件：
    import { NewsPage } from '../news/news';//引入要跳转到的页面(要先在app.modules.ts中注册、申明)

    @Component({
      selector: 'page-home',
      templateUrl: 'home.html'
    })
    export class HomePage {
      constructor(public navCtrl: NavController) {
      }

      goNews(){
        // this.navCtrl.push(页面)
        this.navCtrl.push(NewsPage);
      }
    }


Ionic3.x Tabs页面
   1，重新创建一个项目
      ionic start ionicdemo02 tabs
      cd ionicdemo02
      ionic serve
   2，重新创建两个页面(组件)
      ionic g page news
      ionic g page newsinfo
   3，在 app.module.ts 引入组件，注册组件、申明组件

      //引入新闻组件
      import { NewsPage } from '../pages/news/news';
      import { NewsinfoPage } from '../pages/newsinfo/newsinfo';

      import { StatusBar } from '@ionic-native/status-bar';
      import { SplashScreen } from '@ionic-native/splash-screen';

      @NgModule({
        declarations: [
          MyApp,
          AboutPage,
          ContactPage,
          HomePage,
          TabsPage,
          NewsPage,   /*申明组件*/
          NewsinfoPage
        ],
        imports: [
          BrowserModule,
          // IonicModule.forRoot(MyApp)

          IonicModule.forRoot(MyApp,{
            tabsHideOnSubPages: 'true', //隐藏全部子页面 tabs
            backButtonText: '返回' /*配置返回按钮*/
          })
        ],
        bootstrap: [IonicApp],
        entryComponents: [
          MyApp,
          AboutPage,
          ContactPage,
          HomePage,
          TabsPage,
          NewsPage,   /*申明组件*/
          NewsinfoPage
        ],
        providers: [
          StatusBar,
          SplashScreen,
          {provide: ErrorHandler, useClass: IonicErrorHandler}
        ]
      })
      export class AppModule {}

   4.在 tabs.ts 页面引入组件，配置组件

      import { Component } from '@angular/core';

      import { AboutPage } from '../about/about';
      import { ContactPage } from '../contact/contact';
      import { HomePage } from '../home/home';

      //引入新闻组件
      import { NewsPage } from '../news/news';


      @Component({
        templateUrl: 'tabs.html'
      })
      export class TabsPage {

        tab1Root = HomePage;
        tab2Root = AboutPage;
        tab3Root = ContactPage;
        tab4Root = NewsPage; //申明

        constructor() {

        }
      }

      tabs.html文件：
      <ion-tabs>
        <ion-tab [root]="tab1Root" tabTitle="首页" tabIcon="home"></ion-tab>
        <ion-tab [root]="tab2Root" tabTitle="关于我们" tabIcon="information-circle"></ion-tab>
        <ion-tab [root]="tab3Root" tabTitle="联系我们" tabIcon="contacts"></ion-tab>
        <ion-tab [root]="tab4Root" tabTitle="新闻" tabIcon="apps"></ion-tab>
      </ion-tabs>