Commit 8ff0d814 authored by van.chen's avatar van.chen

add two platform

parent e9b8236f
......@@ -9,7 +9,13 @@
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"schematics": {
"@ionic/angular-toolkit:component": {
"styleext": "scss",
"inlineStyle": true,
"spec": false
}
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
......@@ -185,10 +191,14 @@
},
"schematics": {
"@ionic/angular-toolkit:component": {
"styleext": "scss"
"styleext": "scss",
"inlineStyle": true,
"spec": false
},
"@ionic/angular-toolkit:page": {
"styleext": "scss"
"styleext": "scss",
"inlineStyle": true,
"spec": false
}
}
}
......@@ -4484,8 +4484,8 @@
"dev": true,
"optional": true,
"requires": {
"nan": "2.12.1",
"node-pre-gyp": "0.10.3"
"nan": "^2.9.2",
"node-pre-gyp": "^0.10.0"
},
"dependencies": {
"abbrev": {
......@@ -4497,8 +4497,7 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"aproba": {
"version": "1.2.0",
......@@ -4512,23 +4511,21 @@
"dev": true,
"optional": true,
"requires": {
"delegates": "1.0.0",
"readable-stream": "2.3.6"
"delegates": "^1.0.0",
"readable-stream": "^2.0.6"
}
},
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "1.0.0",
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
}
},
......@@ -4541,20 +4538,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
......@@ -4595,7 +4589,7 @@
"dev": true,
"optional": true,
"requires": {
"minipass": "2.3.5"
"minipass": "^2.2.1"
}
},
"fs.realpath": {
......@@ -4610,14 +4604,14 @@
"dev": true,
"optional": true,
"requires": {
"aproba": "1.2.0",
"console-control-strings": "1.1.0",
"has-unicode": "2.0.1",
"object-assign": "4.1.1",
"signal-exit": "3.0.2",
"string-width": "1.0.2",
"strip-ansi": "3.0.1",
"wide-align": "1.1.3"
"aproba": "^1.0.3",
"console-control-strings": "^1.0.0",
"has-unicode": "^2.0.0",
"object-assign": "^4.1.0",
"signal-exit": "^3.0.0",
"string-width": "^1.0.1",
"strip-ansi": "^3.0.1",
"wide-align": "^1.1.0"
}
},
"glob": {
......@@ -4626,12 +4620,12 @@
"dev": true,
"optional": true,
"requires": {
"fs.realpath": "1.0.0",
"inflight": "1.0.6",
"inherits": "2.0.3",
"minimatch": "3.0.4",
"once": "1.4.0",
"path-is-absolute": "1.0.1"
"fs.realpath": "^1.0.0",
"inflight": "^1.0.4",
"inherits": "2",
"minimatch": "^3.0.4",
"once": "^1.3.0",
"path-is-absolute": "^1.0.0"
}
},
"has-unicode": {
......@@ -4646,7 +4640,7 @@
"dev": true,
"optional": true,
"requires": {
"safer-buffer": "2.1.2"
"safer-buffer": ">= 2.1.2 < 3"
}
},
"ignore-walk": {
......@@ -4655,7 +4649,7 @@
"dev": true,
"optional": true,
"requires": {
"minimatch": "3.0.4"
"minimatch": "^3.0.4"
}
},
"inflight": {
......@@ -4664,15 +4658,14 @@
"dev": true,
"optional": true,
"requires": {
"once": "1.4.0",
"wrappy": "1.0.2"
"once": "^1.3.0",
"wrappy": "1"
}
},
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
......@@ -4684,9 +4677,8 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "1.0.1"
"number-is-nan": "^1.0.0"
}
},
"isarray": {
......@@ -4699,25 +4691,22 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "1.1.11"
"brace-expansion": "^1.1.7"
}
},
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "5.1.2",
"yallist": "3.0.3"
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
}
},
"minizlib": {
......@@ -4726,14 +4715,13 @@
"dev": true,
"optional": true,
"requires": {
"minipass": "2.3.5"
"minipass": "^2.2.1"
}
},
"mkdirp": {
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
......@@ -4750,9 +4738,9 @@
"dev": true,
"optional": true,
"requires": {
"debug": "2.6.9",
"iconv-lite": "0.4.24",
"sax": "1.2.4"
"debug": "^2.1.2",
"iconv-lite": "^0.4.4",
"sax": "^1.2.4"
}
},
"node-pre-gyp": {
......@@ -4761,16 +4749,16 @@
"dev": true,
"optional": true,
"requires": {
"detect-libc": "1.0.3",
"mkdirp": "0.5.1",
"needle": "2.2.4",
"nopt": "4.0.1",
"npm-packlist": "1.2.0",
"npmlog": "4.1.2",
"rc": "1.2.8",
"rimraf": "2.6.3",
"semver": "5.6.0",
"tar": "4.4.8"
"detect-libc": "^1.0.2",
"mkdirp": "^0.5.1",
"needle": "^2.2.1",
"nopt": "^4.0.1",
"npm-packlist": "^1.1.6",
"npmlog": "^4.0.2",
"rc": "^1.2.7",
"rimraf": "^2.6.1",
"semver": "^5.3.0",
"tar": "^4"
}
},
"nopt": {
......@@ -4779,8 +4767,8 @@
"dev": true,
"optional": true,
"requires": {
"abbrev": "1.1.1",
"osenv": "0.1.5"
"abbrev": "1",
"osenv": "^0.1.4"
}
},
"npm-bundled": {
......@@ -4795,8 +4783,8 @@
"dev": true,
"optional": true,
"requires": {
"ignore-walk": "3.0.1",
"npm-bundled": "1.0.5"
"ignore-walk": "^3.0.1",
"npm-bundled": "^1.0.1"
}
},
"npmlog": {
......@@ -4805,17 +4793,16 @@
"dev": true,
"optional": true,
"requires": {
"are-we-there-yet": "1.1.5",
"console-control-strings": "1.1.0",
"gauge": "2.7.4",
"set-blocking": "2.0.0"
"are-we-there-yet": "~1.1.2",
"console-control-strings": "~1.1.0",
"gauge": "~2.7.3",
"set-blocking": "~2.0.0"
}
},
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
......@@ -4827,9 +4814,8 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1.0.2"
"wrappy": "1"
}
},
"os-homedir": {
......@@ -4850,8 +4836,8 @@
"dev": true,
"optional": true,
"requires": {
"os-homedir": "1.0.2",
"os-tmpdir": "1.0.2"
"os-homedir": "^1.0.0",
"os-tmpdir": "^1.0.0"
}
},
"path-is-absolute": {
......@@ -4872,10 +4858,10 @@
"dev": true,
"optional": true,
"requires": {
"deep-extend": "0.6.0",
"ini": "1.3.5",
"minimist": "1.2.0",
"strip-json-comments": "2.0.1"
"deep-extend": "^0.6.0",
"ini": "~1.3.0",
"minimist": "^1.2.0",
"strip-json-comments": "~2.0.1"
},
"dependencies": {
"minimist": {
......@@ -4892,13 +4878,13 @@
"dev": true,
"optional": true,
"requires": {
"core-util-is": "1.0.2",
"inherits": "2.0.3",
"isarray": "1.0.0",
"process-nextick-args": "2.0.0",
"safe-buffer": "5.1.2",
"string_decoder": "1.1.1",
"util-deprecate": "1.0.2"
"core-util-is": "~1.0.0",
"inherits": "~2.0.3",
"isarray": "~1.0.0",
"process-nextick-args": "~2.0.0",
"safe-buffer": "~5.1.1",
"string_decoder": "~1.1.1",
"util-deprecate": "~1.0.1"
}
},
"rimraf": {
......@@ -4907,14 +4893,13 @@
"dev": true,
"optional": true,
"requires": {
"glob": "7.1.3"
"glob": "^7.1.3"
}
},
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"safer-buffer": {
"version": "2.1.2",
......@@ -4950,11 +4935,10 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "1.1.0",
"is-fullwidth-code-point": "1.0.0",
"strip-ansi": "3.0.1"
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
"strip-ansi": "^3.0.0"
}
},
"string_decoder": {
......@@ -4963,16 +4947,15 @@
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "5.1.2"
"safe-buffer": "~5.1.0"
}
},
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "2.1.1"
"ansi-regex": "^2.0.0"
}
},
"strip-json-comments": {
......@@ -4987,13 +4970,13 @@
"dev": true,
"optional": true,
"requires": {
"chownr": "1.1.1",
"fs-minipass": "1.2.5",
"minipass": "2.3.5",
"minizlib": "1.2.1",
"mkdirp": "0.5.1",
"safe-buffer": "5.1.2",
"yallist": "3.0.3"
"chownr": "^1.1.1",
"fs-minipass": "^1.2.5",
"minipass": "^2.3.4",
"minizlib": "^1.1.1",
"mkdirp": "^0.5.0",
"safe-buffer": "^5.1.2",
"yallist": "^3.0.2"
}
},
"util-deprecate": {
......@@ -5008,20 +4991,18 @@
"dev": true,
"optional": true,
"requires": {
"string-width": "1.0.2"
"string-width": "^1.0.2 || 2"
}
},
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
}
}
},
......@@ -10627,6 +10608,11 @@
"minimalistic-assert": "^1.0.0"
}
},
"web-animations-js": {
"version": "2.3.1",
"resolved": "http://r.cnpmjs.org/web-animations-js/download/web-animations-js-2.3.1.tgz",
"integrity": "sha1-Om2bwVGWN3qQ+OKAP6UmIWWwRRA="
},
"webdriver-js-extender": {
"version": "2.1.0",
"resolved": "http://r.cnpmjs.org/webdriver-js-extender/download/webdriver-js-extender-2.1.0.tgz",
......
......@@ -34,6 +34,7 @@
"cordova-plugin-whitelist": "^1.3.3",
"core-js": "^2.5.4",
"rxjs": "~6.3.3",
"web-animations-js": "^2.3.1",
"zone.js": "~0.8.29"
},
"devDependencies": {
......@@ -79,4 +80,4 @@
"ios"
]
}
}
\ No newline at end of file
}
These are Cordova resources. You can replace icon.png and splash.png and run
`ionic cordova resources` to generate custom icons and splash screens for your
app. See `ionic cordova resources --help` for details.
Cordova reference documentation:
- Icons: https://cordova.apache.org/docs/en/latest/config_ref/images.html
- Splash Screens: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { TestBed, async } from '@angular/core/testing';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
let statusBarSpy, splashScreenSpy, platformReadySpy, platformSpy;
beforeEach(async(() => {
statusBarSpy = jasmine.createSpyObj('StatusBar', ['styleDefault']);
splashScreenSpy = jasmine.createSpyObj('SplashScreen', ['hide']);
platformReadySpy = Promise.resolve();
platformSpy = jasmine.createSpyObj('Platform', { ready: platformReadySpy });
TestBed.configureTestingModule({
declarations: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [
{ provide: StatusBar, useValue: statusBarSpy },
{ provide: SplashScreen, useValue: splashScreenSpy },
{ provide: Platform, useValue: platformSpy },
],
}).compileComponents();
}));
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
});
it('should initialize the app', async () => {
TestBed.createComponent(AppComponent);
expect(platformSpy.ready).toHaveBeenCalled();
await platformReadySpy;
expect(statusBarSpy.styleDefault).toHaveBeenCalled();
expect(splashScreenSpy.hide).toHaveBeenCalled();
});
// TODO: add more tests!
});
......@@ -3,8 +3,12 @@ import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { HomePage } from './home.page';
import { PageOneComponent } from '../main/page-one/page-one.component';
import { PageTwoComponent } from '../main/page-two/page-two.component';
import { PageThreeComponent } from '../main/page-three/page-three.component';
import { PageFourComponent } from '../main/page-four/page-four.component';
import { PageDetailComponent } from '../main/page-detail/page-detail.component';
@NgModule({
imports: [
......@@ -18,6 +22,13 @@ import { HomePage } from './home.page';
}
])
],
declarations: [HomePage]
declarations: [
HomePage,
PageOneComponent,
PageTwoComponent,
PageThreeComponent,
PageFourComponent,
PageDetailComponent
]
})
export class HomePageModule {}
<ion-header>
<ion-toolbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
The world is your oyster.
<p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs/">docs</a> will be your guide.</p>
</ion-content>
<ion-slides id="slideComponent" style="width: 100%;height: 100%;"
mode="ios" [options]="options" (ionSlideDidChange)="slideOnChange()">
<ion-slide>
<div class="box" style="color: #ffd31a">
<ion-slides style="width: 100%;height: 200px;"
mode="ios" [options]="options_2">
<ion-slide>
<div class="inBox" style="color: #ffd31a"><h1>xxxx</h1></div>
</ion-slide>
<ion-slide>
<div class="inBox" style="color: #f04141"><h1>xxx</h1></div>
</ion-slide>
<ion-slide>
<div class="inBox" style="color: #7e57ff"><h1>xx</h1></div>
</ion-slide>
<ion-slide>
<div class="inBox" style="color: #cccccc"><h1>x</h1></div>
</ion-slide>
</ion-slides>
</div>
</ion-slide>
<ion-slide>
<div class="box" style="color: #f04141"><h1>2222</h1></div>
</ion-slide>
<ion-slide>
<div class="box" style="color: #7e57ff"><h1>3333</h1></div>
</ion-slide>
<ion-slide>
<div class="box" style="color: #cccccc"><h1>4444</h1></div>
</ion-slide>
</ion-slides>
<ion-row class="bottomPart">
<ion-col [ngClass]="{'activeBar': active[0]}" (click)="goActive(0)">首页</ion-col>
<ion-col class="padLeft" [ngClass]="{'activeBar': active[1]}" (click)="goActive(1)">第二页</ion-col>
<ion-col class="padLeft" [ngClass]="{'activeBar': active[2]}" (click)="goActive(2)">第三页</ion-col>
<ion-col class="padLeft" [ngClass]="{'activeBar': active[3]}" (click)="goActive(3)">我的</ion-col>
</ion-row>
.bottomPart {
height: 55px;
line-height: 35px;
text-align: center;
border-top: 1px solid #ccc;
color: cornflowerblue;
}
.padLeft {
border-left: 1px solid #cccccc;
}
.activeBar {
background-color: #f25454;
color: #ffffff;
}
.inBox {
}
.box {
width: 100%;
height: 100%;
}
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HomePage } from './home.page';
describe('HomePage', () => {
let component: HomePage;
let fixture: ComponentFixture<HomePage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ HomePage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HomePage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component } from '@angular/core';
import { Component, ViewChild, OnInit } from '@angular/core';
import { IonSlides } from '@ionic/angular';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
export class HomePage implements OnInit{
@ViewChild(IonSlides) slides;
options = {
speed: 1000,
allowTouchMove: false
};
options_2 = {
speed: 1000,
allowTouchMove: true
};
index;
active = [true, false, false, false];
startX;
startY;
X;
Y;
ngOnInit() {
document.getElementById('slideComponent').addEventListener('touchstart', <TouchEvent>(e) => {
e.preventDefault();
this.startX = e.touches[0].pageX;
this.startY = e.touches[0].pageY;
});
document.getElementById('slideComponent').addEventListener('touchmove', <TouchEvent>(e) => {
e.preventDefault();
const moveEndX = e.touches[0].pageX;
const moveEndY = e.touches[0].pageY;
this.X = moveEndX - this.startX;
this.Y = moveEndY - this.startY;
});
document.getElementById('slideComponent').addEventListener('touchend', <TouchEvent>(e) => {
e.preventDefault();
if ( this.X > 0 ) {
this.slidePrev();
} else if ( this.X < 0 ) {
this.slideNext();
}
});
}
slideOnChange() {
this.slides.getActiveIndex().then((index) => {
this.changeIndex(index);
});
}
changeIndex(index) {
const active = [false, false, false, false];
active[index] = true;
this.active = active;
}
goActive(index) {
this.changeIndex(index);
this.slides.slideTo(index, 500);
}
slideNext() {
this.slides.getActiveIndex().then((index) => {
if (index + 1 < 4) {
this.goActive((index + 1));
}
});
}
slidePrev() {
this.slides.getActiveIndex().then((index) => {
if (index - 1 >= 0) {
this.goActive((index - 1));
}
});
}
}
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-page-detail',
templateUrl: './page-detail.component.html',
styleUrls: ['./page-detail.component.scss'],
})
export class PageDetailComponent implements OnInit {
constructor() { }
ngOnInit() {}
}
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-page-four',
templateUrl: './page-four.component.html',
styleUrls: ['./page-four.component.scss'],
})
export class PageFourComponent implements OnInit {
constructor() { }
ngOnInit() {}
}
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-page-one',
templateUrl: './page-one.component.html',
styleUrls: ['./page-one.component.scss'],
})
export class PageOneComponent implements OnInit {
constructor() { }
ngOnInit() {}
}
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-page-three',
templateUrl: './page-three.component.html',
styleUrls: ['./page-three.component.scss'],
})
export class PageThreeComponent implements OnInit {
constructor() { }
ngOnInit() {}
}
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-page-two',
templateUrl: './page-two.component.html',
styleUrls: ['./page-two.component.scss'],
})
export class PageTwoComponent implements OnInit {
constructor() { }
ngOnInit() {}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment