Ionic—APP基础布局开发

版权声明：作者已开启版权声明，如转载请注明转载地址。 https://blog.csdn.net/qq_34829447/article/details/84574886

一.项目开发目标

• 目标：开发一款论坛相关的APP

二.tab组件布局以及图标选择

• page/tabs文件夹下有对应icon的设置

• 图标选取的网站:ionicframework.com/docs/ionicons,将对应的icon名字拷贝过来放置成ion-tab标签中的tabIcon的值

• ion-tab标签属性

  • tabTitle：Tab标题名
  • tabIcon：Tab图标
  • [root]：对应的Tab页面名

• 实例代码

  • html代码

    <ion-tabs>
    
      <ion-tab tab="home">
        <ion-router-outlet name="home"></ion-router-outlet>
      </ion-tab>
      <ion-tab tab="discovery">
        <ion-router-outlet name="discovery"></ion-router-outlet>
      </ion-tab>
      <ion-tab tab="chat">
        <ion-router-outlet name="chat"></ion-router-outlet>
      </ion-tab>
      <ion-tab tab="notifications">
        <ion-router-outlet name="notifications"></ion-router-outlet>
      </ion-tab>
      <ion-tab tab="more">
        <ion-router-outlet name="more"></ion-router-outlet>
      </ion-tab>
    
      <ion-tab-bar slot="bottom">
    
        <ion-tab-button tab="home" href="/tabs/(home:home)">
          <ion-icon name="list-box"></ion-icon>
          <ion-label>Home</ion-label>
        </ion-tab-button>
    
        <ion-tab-button tab="discovery" href="/tabs/(discovery:discovery)">
          <ion-icon name="navigate"></ion-icon>
          <ion-label>Discovery</ion-label>
        </ion-tab-button>
    
        <ion-tab-button tab="chat" href="/tabs/(chat:chat)">
          <ion-icon name="chatbubbles"></ion-icon>
          <ion-label>Chat</ion-label>
        </ion-tab-button>
    
        <ion-tab-button tab="notifications" href="/tabs/(notifications:notifications)">
          <ion-icon name="notifications"></ion-icon>
          <ion-label>Notifications</ion-label>
        </ion-tab-button>
    
        <ion-tab-button tab="more" href="/tabs/(more:more)">
          <ion-icon name="menu"></ion-icon>
          <ion-label>more</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    
    </ion-tabs>
    

三.五个一级基础页面的创建与调试

• 通过ionic执行ionic generate(简写:ionic g)会提示创建的内容，选择page则可以创建组件，之后按照提示输入组件名，即自动生成对应组件[也可以通过ionic g page 组件名直接生成对应组件]

• 执行安装组件命令，并删除之前无用的组件

  ionic g page home
  ionic g page discovery
  ionic g page chat
  ionic g page notifications
  ionic g page more
  

• 修改对应代码

  • tabs.page.html

    <ion-tabs>
    
      <ion-tab tab="home">
        <ion-router-outlet name="home"></ion-router-outlet>
      </ion-tab>
      <ion-tab tab="discovery">
        <ion-router-outlet name="discovery"></ion-router-outlet>
      </ion-tab>
      <ion-tab tab="chat">
        <ion-router-outlet name="chat"></ion-router-outlet>
      </ion-tab>
      <ion-tab tab="notifications">
        <ion-router-outlet name="notifications"></ion-router-outlet>
      </ion-tab>
      <ion-tab tab="more">
        <ion-router-outlet name="more"></ion-router-outlet>
      </ion-tab>
    
      <ion-tab-bar slot="bottom">
    
        <ion-tab-button tab="home" href="/tabs/(home:home)">
          <ion-icon name="list-box"></ion-icon>
          <ion-label>Home</ion-label>
        </ion-tab-button>
    
        <ion-tab-button tab="discovery" href="/tabs/(discovery:discovery)">
          <ion-icon name="navigate"></ion-icon>
          <ion-label>Discovery</ion-label>
        </ion-tab-button>
    
        <ion-tab-button tab="chat" href="/tabs/(chat:chat)">
          <ion-icon name="chatbubbles"></ion-icon>
          <ion-label>Chat</ion-label>
        </ion-tab-button>
    
        <ion-tab-button tab="notifications" href="/tabs/(notifications:notifications)">
          <ion-icon name="notifications"></ion-icon>
          <ion-label>Notifications</ion-label>
        </ion-tab-button>
    
        <ion-tab-button tab="more" href="/tabs/(more:more)">
          <ion-icon name="menu"></ion-icon>
          <ion-label>more</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    
    </ion-tabs>
    

  • tabs.router.module.ts

    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    
    import { TabsPage } from './tabs.page';
    import { HomePage } from '../home/home.page';
    import { DiscoveryPage } from '../discovery/discovery.page';
    import { ChatPage } from '../chat/chat.page';
    import { NotificationsPage } from '../notifications/notifications.page';
    import { MorePage } from '../more/more.page';
    
    const routes: Routes = [
      {
        path: 'tabs',
        component: TabsPage,
        children: [
          {
            path: '',
            redirectTo: '/tabs/(home:home)',
            pathMatch: 'full',
          },
          {
            path: 'home',
            outlet: 'home',
            component: HomePage
          },
          {
            path: 'discovery',
            outlet: 'discovery',
            component: DiscoveryPage
          },
          {
            path: 'chat',
            outlet: 'chat',
            component: ChatPage
          },
          {
            path: 'notifications',
            outlet: 'notifications',
            component: NotificationsPage
          },
          {
            path: 'more',
            outlet: 'more',
            component: MorePage
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/(home:home)',
        pathMatch: 'full'
      }
    ];
    
    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule]
    })
    export class TabsPageRoutingModule {}
    

  • tabs.modules.ts

    import { IonicModule } from '@ionic/angular';
    import { RouterModule } from '@angular/router';
    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { FormsModule } from '@angular/forms';
    
    import { TabsPageRoutingModule } from './tabs.router.module';
    
    import { TabsPage } from './tabs.page';
    import { HomePageModule } from '../home/home.module';
    import { DiscoveryPageModule } from '../discovery/discovery.module';
    import { ChatPageModule } from '../chat/chat.module';
    import { MorePageModule } from '../more/more.module';
    import { NotificationsPageModule } from '../notifications/notifications.module';
    
    @NgModule({
      imports: [
        IonicModule,
        CommonModule,
        FormsModule,
        TabsPageRoutingModule,
        HomePageModule,
        DiscoveryPageModule,
        ChatPageModule,
        NotificationsPageModule,
        MorePageModule
      ],
      declarations: [TabsPage]
    })
    export class TabsPageModule {}
    

四.项目数据源API解读与测试工具Postman介绍

• IOS对API的要求是HTTPS请求
• 测试API我们通常采用Postman软件进行测试【到官网下载Postman软件直接运行就可以使用】