版权声明:作者已开启版权声明,如转载请注明转载地址。 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软件直接运行就可以使用】