https://github.com/sillyhatxu/learning-ionic
https://github.com/sillyhatxu/learning-ionic
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/sillyhatxu/learning-ionic
- Owner: sillyhatxu
- Created: 2019-08-12T04:09:32.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T08:38:27.000Z (over 2 years ago)
- Last Synced: 2025-01-31T07:46:02.763Z (4 months ago)
- Language: TypeScript
- Size: 5.87 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# learning-ionic
Install Ionic
```
npm install -g ionic
```
创建项目
```
ionic start
ionic start myApp tabs
```
启动服务
```
ionic serve
```
add page
```
ionic generate page pages/shop
ionic generate page pages/message
ionic generate page pages/me
ionic generate page pages/cart
```
add service
```
ionic generate service api/user
ionic generate service api/product
```
安装组件
```
npm install ng-circle-progress --save
```
build ios or android
> 生成 platform 目录，用 xcode 打开或用 Android Studio 打开
```
ionic cordova platform add ios
ionic cordova platform add android
```
[ionic client](https://ionicframework.com/docs/cli/commands/generate)
```
ionic generate
ionic generate page
ionic generate page contact
ionic generate component contact/form
ionic generate component login-form --change-detection=OnPush
ionic generate directive ripple --skip-import
ionic generate service api/user
```
## Develop Process
> ionic start
>
> ionic generate page pages/tutorial
>
> ionic generate service api/tutorial
>
> Edit app-routing.module.ts
```ts
const routes: Routes = [
{path: '',redirectTo: '/tutorial',pathMatch: 'full'},
{path: 'tutorial',loadChildren: () => import('./pages/tutorial/tutorial.module').then(m => m.TutorialPageModule),canLoad: [TutorialService]},
];
```
系统资源加载
```
import { CanLoad } from '@angular/router';
canLoad() {
return this.storage.get('ion_did_tutorial').then(res => {
if (res) {
this.router.navigate(['/app', 'tabs', 'schedule']);
return false;
} else {
return true;
}
});
}
```
> 新增 tutorial-routing.module.ts 为每一个组件配置routing
>
```bash
ionic generate page pages/tabs
ionic generate page pages/shop
ionic generate page pages/shipping
ionic generate page pages/message
ionic generate page pages/me
```
>
> TabsPageModule 需要导入tab组件Module
```ts
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
ShopPageModule,
ShippingPageModule,
MessagePageModule,
MePageModule,
RouterModule.forChild(routes)
],
declarations: [TabsPage]
})
export class TabsPageModule { }
```
> tab="shipping"是url跳转链接，ion-icon是图片，ion-label是tag名字
```html
Shipping
```
> ionic xxxxxxxxxxxxxxx
>
> ionic xxxxxxxxxxxxxxx
>
> ionic xxxxxxxxxxxxxxx
>
> ionic xxxxxxxxxxxxxxx
>
> ionic xxxxxxxxxxxxxxx
>
> ionic xxxxxxxxxxxxxxx
>
> ionic xxxxxxxxxxxxxxx
>
> ionic xxxxxxxxxxxxxxx
>
> ionic xxxxxxxxxxxxxxx
>
> ionic xxxxxxxxxxxxxxx
>
> ionic xxxxxxxxxxxxxxx
>
> ionic xxxxxxxxxxxxxxx
>
> ionic xxxxxxxxxxxxxxx
>
> ionic xxxxxxxxxxxxxxx
## 资源说明
#### 缓存
> npm install --save @ionic/storage
```
import { IonicStorageModule } from '@ionic/storage';
```
## 打开app画面
```bash
ionic cordova plugin add cordova-plugin-splashscreen
npm install @ionic-native/splash-screen
```