Ionic开发2:目录分析及创建组件

Posted xuyiqing

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ionic开发2:目录分析及创建组件相关的知识,希望对你有一定的参考价值。

上一篇我们创建好了一个新项目。

现在用VScode打开这个目录并且观察:

技术分享图片

 

node_modules :node 各类依赖包

resources :android/ios 资源(更换图标和启动动画)

src:开发工作目录,页面、样式、脚本和图片都放在这个目录下

www:静态文件

platforms:生成 android 或者 ios 安装包路径( platformsandroiduildoutputsapk:apk 所在位置)执行 cordova platform add android 后会生成

config.xml: 打包成 app 的配置文件

package.json: 配置项目的元数据和管理项目所需要的依赖

tsconfig.json: TypeScript 项目的根目录,指定用来编译这个项目的根文件和编译选项

tslint.json:格式化和校验 typescript

这些我们不必关心。

 

我们要注意的是src文件夹:

 技术分享图片

 

app:应用根目录

assets:资源目录(静态文件(图片,js 框架。。。)

各 pages:页面文件,放置编写的页面文件,包括:html,scss,ts。

theme:主题文件,里面有一个 scss 文件,设置主题信息

 

打开app目录和我创建的一个page页面目录:

技术分享图片

 

具体介绍下:

main.ts是入口文件,正常不用修改(无需关注):

import { platformBrowserDynamic } from @angular/platform-browser-dynamic;

import { AppModule } from ./app.module;

platformBrowserDynamic().bootstrapModule(AppModule);

 

app.model.ts是根模块:告诉Ionic如何组装项目:这里需要注意(总是用到):

//自定义的组件(我们只需要关注这里)
import { UserPage } from ./../pages/user/user;
import { CategoryPage } from ./../pages/category/category;
import { CartPage } from ./../pages/cart/cart;
import { HomePage } from ../pages/home/home;
import { TabsPage } from ../pages/tabs/tabs;

//下边这3行引入angular需要的文件(系统模块)
import { NgModule, ErrorHandler } from @angular/core;
import { BrowserModule } from @angular/platform-browser;
import { IonicApp, IonicModule, IonicErrorHandler } from ionic-angular;

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

//ionic打包成app需要的导航条和启动页面服务
import { StatusBar } from @ionic-native/status-bar;
import { SplashScreen } from @ionic-native/splash-screen;

@NgModule({
  declarations: [
    //声明我们需要用到的所有组件
    MyApp,
    HomePage,
    TabsPage,
    CartPage,
    CategoryPage,
    UserPage
  ],
  imports: [
    //引入的模块(依赖的模块)
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  //启动的模块
  bootstrap: [IonicApp],
  entryComponents: [
    //配置不会在模板中使用的组件
    //(比如页面不想在其他的组件中使用)
    MyApp,
    HomePage,
    TabsPage,
    CartPage,
    CategoryPage,
    UserPage
  ],
  providers: [
    //配置服务
    StatusBar,
    SplashScreen,
    { provide: ErrorHandler, useClass: IonicErrorHandler }
  ]
})
export class AppModule { }

 

 

 

app.component.ts是根组件(不必注意)

技术分享图片
import { Component } from @angular/core;
import { Platform } from ionic-angular;
import { StatusBar } from @ionic-native/status-bar;
import { SplashScreen } from @ionic-native/splash-screen;

import { TabsPage } from ../pages/tabs/tabs;

@Component({
  templateUrl: app.html
})
export class MyApp {
  rootPage:any = TabsPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}
View Code

 

 

再看pages中的组件:这是我自己创建的(如何创建后边介绍):

这里的html文件就是显示在用户面前的页面,scss是CSS文件,ts文件处理后台逻辑

 

上边我的代码都是创建了新组件后的代码,

那么新项目如何创建组件呢?

 

Ionic命令行有快捷方法:

技术分享图片

 

现在创建完成,我们观察下:

 技术分享图片

 

好的,我们创建好这个组件,给他写一个基本的功能:列表

首先我们要使用这个组件:先在app.module.ts中引入模块(components.module.ts):

 

技术分享图片
//导入模块
import { ComponentsModule } from ../components/components.module;

import { NgModule, ErrorHandler } from @angular/core;
import { BrowserModule } from @angular/platform-browser;
import { IonicApp, IonicModule, IonicErrorHandler } from ionic-angular;
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;

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

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    ComponentsModule,
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}
View Code

 

 

 

 

actionsheet.ts:

import { Component } from @angular/core;

/**
 * Generated class for the ActionsheetComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@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<10;i++){
      this.list.push("这是第"+(i+1)+"条数据");
    }

  }

}

 

actionsheet.html:

<!-- Generated template for the ActionsheetComponent component -->
<div>
    <ion-list>
        <ion-item *ngFor="let item of list">
            {{item}}
        </ion-item>
    </ion-list>
</div>

这样写其实不正确,要现在总组件ts文件中导入:

components.module.ts

import { NgModule } from @angular/core;
import { ActionsheetComponent } from ./actionsheet/actionsheet;
//引入这个
import { BrowserModule } from @angular/platform-browser;
@NgModule({
    declarations: [ActionsheetComponent],
    //依赖注入
    imports: [BrowserModule],
    exports: [ActionsheetComponent]
})
export class ComponentsModule {}

 

 

我在关于页面(Pages中的About页面)使用:

 about.html:

<ion-header>
  <ion-navbar>
    <ion-title>
      关于
    </ion-title>
  </ion-navbar>
</ion-header>
<actionsheet></actionsheet>

 

不过自定义Component组件不常用。

 

以上是关于Ionic开发2:目录分析及创建组件的主要内容,如果未能解决你的问题,请参考以下文章

ionic3+angular4开发混合app 之自定义组件

Ionic 自定义组件中使用 Ionic 官方组件

在 Ionic 2 中,如何创建使用 Ionic 组件的自定义组件?

Ionic01 简单介绍环境搭建创建项目项目结构创建组件创建页面子页面跳转

Reactreact概述组件事件

ionic6探索笔记——环境搭建及创建项目