├── .editorconfig
├── .gitignore
├── README.md
├── config.xml
├── ionic.config.json
├── package.json
├── qr-ion2.png
├── resources
    ├── android
    │   ├── icon
    │   │   ├── drawable-hdpi-icon.png
    │   │   ├── drawable-ldpi-icon.png
    │   │   ├── drawable-mdpi-icon.png
    │   │   ├── drawable-xhdpi-icon.png
    │   │   ├── drawable-xxhdpi-icon.png
    │   │   └── drawable-xxxhdpi-icon.png
    │   └── splash
    │   │   ├── drawable-port-hdpi-screen.png
    │   │   ├── drawable-port-ldpi-screen.png
    │   │   ├── drawable-port-mdpi-screen.png
    │   │   ├── drawable-port-xhdpi-screen.png
    │   │   ├── drawable-port-xxhdpi-screen.png
    │   │   └── drawable-port-xxxhdpi-screen.png
    ├── icon.png
    ├── ios
    │   ├── icon
    │   │   ├── icon-40.png
    │   │   ├── icon-40@2x.png
    │   │   ├── icon-50.png
    │   │   ├── icon-50@2x.png
    │   │   ├── icon-60.png
    │   │   ├── icon-60@2x.png
    │   │   ├── icon-60@3x.png
    │   │   ├── icon-72.png
    │   │   ├── icon-72@2x.png
    │   │   ├── icon-76.png
    │   │   ├── icon-76@2x.png
    │   │   ├── icon-small.png
    │   │   ├── icon-small@2x.png
    │   │   ├── icon-small@3x.png
    │   │   ├── icon.png
    │   │   └── icon@2x.png
    │   └── splash
    │   │   ├── Default-568h@2x~iphone.png
    │   │   ├── Default-667h.png
    │   │   ├── Default-736h.png
    │   │   ├── Default-Landscape-736h.png
    │   │   ├── Default-Landscape@2x~ipad.png
    │   │   ├── Default-Landscape~ipad.png
    │   │   ├── Default-Portrait@2x~ipad.png
    │   │   ├── Default-Portrait~ipad.png
    │   │   ├── Default@2x~iphone.png
    │   │   └── Default~iphone.png
    └── splash.png
├── src
    ├── app
    │   ├── app.component.ts
    │   ├── app.html
    │   ├── app.module.ts
    │   ├── app.scss
    │   └── main.ts
    ├── assets
    │   ├── echarts.min.js
    │   ├── icon
    │   │   └── favicon.ico
    │   ├── image
    │   │   ├── 404.png
    │   │   ├── menu-header-back.jpg
    │   │   ├── qrcode.jpg
    │   │   └── user.jpg
    │   └── myFonts
    │   │   ├── iconfont.eot
    │   │   ├── iconfont.svg
    │   │   ├── iconfont.ttf
    │   │   └── iconfont.woff
    ├── components
    │   ├── elastic-header
    │   │   └── elastic-header.ts
    │   └── image-loader
    │   │   └── image-loader.ts
    ├── declarations.d.ts
    ├── index.html
    ├── manifest.json
    ├── pages
    │   ├── about
    │   │   ├── about.html
    │   │   ├── about.scss
    │   │   └── about.ts
    │   ├── baidu-map
    │   │   ├── baidu-map.html
    │   │   ├── baidu-map.scss
    │   │   └── baidu-map.ts
    │   ├── echarts
    │   │   ├── echarts.html
    │   │   ├── echarts.scss
    │   │   └── echarts.ts
    │   ├── movie-category
    │   │   ├── movie-category.html
    │   │   ├── movie-category.scss
    │   │   └── movie-category.ts
    │   ├── movie-detail
    │   │   ├── movie-detail.html
    │   │   ├── movie-detail.scss
    │   │   └── movie-detail.ts
    │   ├── movie
    │   │   ├── movie.html
    │   │   ├── movie.scss
    │   │   └── movie.ts
    │   ├── news-content
    │   │   ├── news-content.html
    │   │   ├── news-content.scss
    │   │   └── news-content.ts
    │   ├── news
    │   │   ├── news.html
    │   │   ├── news.scss
    │   │   └── news.ts
    │   └── tabs
    │   │   ├── tabs.html
    │   │   └── tabs.ts
    ├── providers
    │   └── data.ts
    ├── service-worker.js
    └── theme
    │   └── variables.scss
├── tsconfig.json
└── tslint.json


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs
 2 | # editorconfig.org
 3 | 
 4 | root = true
 5 | 
 6 | [*]
 7 | indent_style = space
 8 | indent_size = 2
 9 | 
10 | # We recommend you to keep these unchanged
11 | end_of_line = lf
12 | charset = utf-8
13 | trim_trailing_whitespace = true
14 | insert_final_newline = true
15 | 
16 | [*.md]
17 | trim_trailing_whitespace = false


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Specifies intentionally untracked files to ignore when using Git
 2 | # http://git-scm.com/docs/gitignore
 3 | 
 4 | *~
 5 | *.sw[mnpcod]
 6 | *.log
 7 | *.tmp
 8 | *.tmp.*
 9 | log.txt
10 | *.sublime-project
11 | *.sublime-workspace
12 | .vscode/
13 | npm-debug.log*
14 | 
15 | .idea/
16 | .sass-cache/
17 | .tmp/
18 | .versions/
19 | coverage/
20 | dist/
21 | node_modules/
22 | tmp/
23 | temp/
24 | hooks/
25 | platforms/
26 | plugins/
27 | plugins/android.json
28 | plugins/ios.json
29 | www/
30 | $RECYCLE.BIN/
31 | 
32 | .DS_Store
33 | Thumbs.db
34 | UserInterfaceState.xcuserstate
35 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 成品下载
 2 | 
 3 | Android：
 4 | 
 5 | ![Android 二维码](https://github.com/dPary/Ion2/blob/master/qr-ion2.png)
 6 | 
 7 | 微信公众号：
 8 | 
 9 | ![公众号二维码](https://github.com/dPary/Ion2/blob/master/src/assets/image/qrcode.jpg)
10 | 
11 | # 本地运行：
12 | 
13 | 1. 克隆项目
14 | 
15 |     > git clone https://github.com/dPary/Ion2.git
16 | 
17 | 2. 进入项目文件夹
18 | 
19 |     > cd Ion2
20 | 
21 | 3. 安装依赖包
22 | 
23 |     > npm install (or cnpm install)
24 | 
25 | 4. 运行调试
26 | 
27 |     > ionic serve
28 | 
29 | *浏览器运行时注意开启跨域插件(Allow-Control-Allow-Origin: *)


--------------------------------------------------------------------------------
/config.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 2 | <widget id="dpary.github.ion2" version="1.2.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
 3 |   <name>Ion2</name>
 4 |   <description>Written with Ionic2.</description>
 5 |   <author email="100602650@qq.com" href="https://github.com/dPary">dPary</author>
 6 |   <content src="index.html"/>
 7 |   <access origin="*"/>
 8 |   <allow-intent href="http://*/*"/>
 9 |   <allow-intent href="https://*/*"/>
10 |   <allow-intent href="tel:*"/>
11 |   <allow-intent href="sms:*"/>
12 |   <allow-intent href="mailto:*"/>
13 |   <allow-intent href="geo:*"/>
14 |   <allow-intent href="*:*"/>
15 |   <platform name="android">
16 |     <allow-intent href="market:*"/>
17 |     <splash src="resources\android\splash\drawable-port-ldpi-screen.png" density="port-ldpi"/>
18 |     <splash src="resources\android\splash\drawable-port-mdpi-screen.png" density="port-mdpi"/>
19 |     <splash src="resources\android\splash\drawable-port-hdpi-screen.png" density="port-hdpi"/>
20 |     <splash src="resources\android\splash\drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
21 |     <splash src="resources\android\splash\drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
22 |     <splash src="resources\android\splash\drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
23 |     <icon src="resources\android\icon\drawable-ldpi-icon.png" density="ldpi"/>
24 |     <icon src="resources\android\icon\drawable-mdpi-icon.png" density="mdpi"/>
25 |     <icon src="resources\android\icon\drawable-hdpi-icon.png" density="hdpi"/>
26 |     <icon src="resources\android\icon\drawable-xhdpi-icon.png" density="xhdpi"/>
27 |     <icon src="resources\android\icon\drawable-xxhdpi-icon.png" density="xxhdpi"/>
28 |     <icon src="resources\android\icon\drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
29 |   </platform>
30 |   <platform name="ios">
31 |     <allow-intent href="itms:*"/>
32 |     <allow-intent href="itms-apps:*"/>
33 |   </platform>
34 |   <preference name="webviewbounce" value="false"/>
35 |   <preference name="UIWebViewBounce" value="false"/>
36 |   <preference name="DisallowOverscroll" value="true"/>
37 |   <preference name="android-minSdkVersion" value="19"/>
38 |   <preference name="BackupWebStorage" value="none"/>
39 |   <preference name="SplashScreen" value="screen"/>
40 |   <preference name="AutoHideSplashScreen" value="false"/>
41 |   <preference name="SplashScreenDelay" value="10000"/>
42 |   <preference name="FadeSplashScreenDuration" value="1000"/>
43 |   <preference name="ShowSplashScreenSpinner" value="false"/>
44 |   <preference name="SplashShowOnlyFirstTime" value="false"/>
45 |   <preference name="orientation" value="portrait"/>
46 |   <feature name="StatusBar">
47 |     <param name="ios-package" onload="true" value="CDVStatusBar"/>
48 |   </feature>
49 |   <icon src="resources\android\icon\drawable-xhdpi-icon.png"/>
50 |   <allow-navigation href="http://192.168.1.103:8000"/>
51 | </widget>


--------------------------------------------------------------------------------
/ionic.config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Ion2",
3 |   "app_id": "",
4 |   "v2": true,
5 |   "typescript": true
6 | }
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "ionic-app-base",
 3 |     "author": "Ionic Framework",
 4 |     "homepage": "http://ionicframework.com/",
 5 |     "private": true,
 6 |     "scripts": {
 7 |         "clean": "ionic-app-scripts clean",
 8 |         "build": "ionic-app-scripts build",
 9 |         "ionic:build": "ionic-app-scripts build",
10 |         "ionic:serve": "ionic-app-scripts serve"
11 |     },
12 |     "dependencies": {
13 |         "@angular/common": "2.2.1",
14 |         "@angular/compiler": "2.2.1",
15 |         "@angular/compiler-cli": "2.2.1",
16 |         "@angular/core": "2.2.1",
17 |         "@angular/forms": "2.2.1",
18 |         "@angular/http": "2.2.1",
19 |         "@angular/platform-browser": "2.2.1",
20 |         "@angular/platform-browser-dynamic": "2.2.1",
21 |         "@angular/platform-server": "2.2.1",
22 |         "@ionic/storage": "1.1.7",
23 |         "ionic-angular": "2.0.1",
24 |         "ionic-native": "2.4.1",
25 |         "ionicons": "3.0.0",
26 |         "rxjs": "5.0.0-beta.12",
27 |         "sw-toolbox": "3.4.0",
28 |         "zone.js": "0.6.26"
29 |     },
30 |     "devDependencies": {
31 |         "@ionic/app-scripts": "1.0.0",
32 |         "typescript": "2.0.9"
33 |     }
34 | }


--------------------------------------------------------------------------------
/qr-ion2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/qr-ion2.png


--------------------------------------------------------------------------------
/resources/android/icon/drawable-hdpi-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/android/icon/drawable-hdpi-icon.png


--------------------------------------------------------------------------------
/resources/android/icon/drawable-ldpi-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/android/icon/drawable-ldpi-icon.png


--------------------------------------------------------------------------------
/resources/android/icon/drawable-mdpi-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/android/icon/drawable-mdpi-icon.png


--------------------------------------------------------------------------------
/resources/android/icon/drawable-xhdpi-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/android/icon/drawable-xhdpi-icon.png


--------------------------------------------------------------------------------
/resources/android/icon/drawable-xxhdpi-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/android/icon/drawable-xxhdpi-icon.png


--------------------------------------------------------------------------------
/resources/android/icon/drawable-xxxhdpi-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/android/icon/drawable-xxxhdpi-icon.png


--------------------------------------------------------------------------------
/resources/android/splash/drawable-port-hdpi-screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/android/splash/drawable-port-hdpi-screen.png


--------------------------------------------------------------------------------
/resources/android/splash/drawable-port-ldpi-screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/android/splash/drawable-port-ldpi-screen.png


--------------------------------------------------------------------------------
/resources/android/splash/drawable-port-mdpi-screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/android/splash/drawable-port-mdpi-screen.png


--------------------------------------------------------------------------------
/resources/android/splash/drawable-port-xhdpi-screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/android/splash/drawable-port-xhdpi-screen.png


--------------------------------------------------------------------------------
/resources/android/splash/drawable-port-xxhdpi-screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/android/splash/drawable-port-xxhdpi-screen.png


--------------------------------------------------------------------------------
/resources/android/splash/drawable-port-xxxhdpi-screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/android/splash/drawable-port-xxxhdpi-screen.png


--------------------------------------------------------------------------------
/resources/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/icon.png


--------------------------------------------------------------------------------
/resources/ios/icon/icon-40.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/ios/icon/icon-40.png


--------------------------------------------------------------------------------
/resources/ios/icon/icon-40@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/ios/icon/icon-40@2x.png


--------------------------------------------------------------------------------
/resources/ios/icon/icon-50.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/ios/icon/icon-50.png


--------------------------------------------------------------------------------
/resources/ios/icon/icon-50@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/ios/icon/icon-50@2x.png


--------------------------------------------------------------------------------
/resources/ios/icon/icon-60.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/ios/icon/icon-60.png


--------------------------------------------------------------------------------
/resources/ios/icon/icon-60@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/ios/icon/icon-60@2x.png


--------------------------------------------------------------------------------
/resources/ios/icon/icon-60@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/ios/icon/icon-60@3x.png


--------------------------------------------------------------------------------
/resources/ios/icon/icon-72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/ios/icon/icon-72.png


--------------------------------------------------------------------------------
/resources/ios/icon/icon-72@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/ios/icon/icon-72@2x.png


--------------------------------------------------------------------------------
/resources/ios/icon/icon-76.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/ios/icon/icon-76.png


--------------------------------------------------------------------------------
/resources/ios/icon/icon-76@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/ios/icon/icon-76@2x.png


--------------------------------------------------------------------------------
/resources/ios/icon/icon-small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/ios/icon/icon-small.png


--------------------------------------------------------------------------------
/resources/ios/icon/icon-small@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/ios/icon/icon-small@2x.png


--------------------------------------------------------------------------------
/resources/ios/icon/icon-small@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/ios/icon/icon-small@3x.png


--------------------------------------------------------------------------------
/resources/ios/icon/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/ios/icon/icon.png


--------------------------------------------------------------------------------
/resources/ios/icon/icon@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/ios/icon/icon@2x.png


--------------------------------------------------------------------------------
/resources/ios/splash/Default-568h@2x~iphone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/ios/splash/Default-568h@2x~iphone.png


--------------------------------------------------------------------------------
/resources/ios/splash/Default-667h.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/ios/splash/Default-667h.png


--------------------------------------------------------------------------------
/resources/ios/splash/Default-736h.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/ios/splash/Default-736h.png


--------------------------------------------------------------------------------
/resources/ios/splash/Default-Landscape-736h.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/ios/splash/Default-Landscape-736h.png


--------------------------------------------------------------------------------
/resources/ios/splash/Default-Landscape@2x~ipad.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/ios/splash/Default-Landscape@2x~ipad.png


--------------------------------------------------------------------------------
/resources/ios/splash/Default-Landscape~ipad.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/ios/splash/Default-Landscape~ipad.png


--------------------------------------------------------------------------------
/resources/ios/splash/Default-Portrait@2x~ipad.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/ios/splash/Default-Portrait@2x~ipad.png


--------------------------------------------------------------------------------
/resources/ios/splash/Default-Portrait~ipad.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/ios/splash/Default-Portrait~ipad.png


--------------------------------------------------------------------------------
/resources/ios/splash/Default@2x~iphone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/ios/splash/Default@2x~iphone.png


--------------------------------------------------------------------------------
/resources/ios/splash/Default~iphone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/ios/splash/Default~iphone.png


--------------------------------------------------------------------------------
/resources/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/resources/splash.png


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, ViewChild } from '@angular/core';
 2 | import { Nav, Platform, ToastController, MenuController } from 'ionic-angular';
 3 | import { StatusBar, Splashscreen } from 'ionic-native';
 4 | import { TabsPage } from '../pages/tabs/tabs';
 5 | import { BaiduMapPage } from '../pages/baidu-map/baidu-map';
 6 | import { EchartsPage } from '../pages/echarts/echarts';
 7 | 
 8 | 
 9 | @Component({
10 |   templateUrl: 'app.html'
11 | })
12 | export class MyApp {
13 |   @ViewChild(Nav) nav: Nav;
14 |   rootPage: any = TabsPage;
15 |   pages: Array<{ title: string, icon: string, component: any }>;
16 |   backButtonPressed: boolean = false;
17 | 
18 |   constructor(public platform: Platform, public toastCtrl: ToastController, public menuCtrl: MenuController) {
19 |     this.initializeApp();
20 | 
21 |     this.pages = [
22 |       { title: '百度地图', icon: 'md-map', component: BaiduMapPage },
23 |       { title: 'echarts', icon: 'md-analytics', component: EchartsPage }
24 |     ];
25 | 
26 |   }
27 | 
28 |   initializeApp() {
29 |     this.platform.ready().then(() => {
30 |       StatusBar.styleDefault();
31 |       Splashscreen.hide();
32 |       this.platform.registerBackButtonAction((): any => {
33 |         let activeVC = this.nav.getActive();
34 |         let page = activeVC.instance;
35 | 
36 |         if (this.menuCtrl.isOpen()) return this.menuCtrl.close();
37 | 
38 |         if (!(page instanceof TabsPage)) {
39 |           if (!this.nav.canGoBack()) {
40 |             //当前页面为tabs，退出APP
41 |             return this.showExit();
42 |           }
43 |           //当前页面为tabs的子页面，正常返回
44 |           return this.nav.pop();
45 |         }
46 | 
47 |         let tabs = page.tabs;
48 |         let activeNav = tabs.getSelected();
49 | 
50 |         if (!activeNav.canGoBack()) {
51 |           //当前页面为tab栏，退出APP
52 |           return this.showExit();
53 |         }
54 |         //当前页面为tab栏的子页面，正常返回
55 |         return activeNav.pop();
56 |       }, 101);
57 |     });
58 |   }
59 |   showExit() {
60 |     if (this.backButtonPressed) this.platform.exitApp();
61 |     else {
62 |       let toast = this.toastCtrl.create({
63 |         message: '再按一次退出应用',
64 |         duration: 2000,
65 |         position: 'bottom'
66 |       });
67 |       toast.present();
68 |       this.backButtonPressed = true;
69 |       setTimeout(() => {
70 |         this.backButtonPressed = false;
71 |       }, 2000)
72 |     }
73 |   }
74 |   openPage(page) {
75 |     this.nav.push(page.component);
76 |   }
77 | }
78 | 


--------------------------------------------------------------------------------
/src/app/app.html:
--------------------------------------------------------------------------------
 1 | <ion-menu type="push" [content]="content">
 2 |     <ion-content>
 3 |         <div class="dis-t menu-header">
 4 |             <div class="dis-tc c-b">
 5 |                 <img class="menu-user-photo" src="assets/image/user.jpg">
 6 |                 <h2>dPary</h2>
 7 |             </div>
 8 |         </div>
 9 |         <!--<ion-list>-->
10 |         <button menuClose ion-item icon-left *ngFor="let p of pages" (click)="openPage(p)">
11 |                 <ion-icon [name]="p.icon" color="primary" item-left></ion-icon>{{p.title}}
12 |       </button>
13 |         <!--</ion-list>-->
14 |     </ion-content>
15 | 
16 | </ion-menu>
17 | 
18 | <!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
19 | <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule, ErrorHandler } from '@angular/core';
 2 | import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
 3 | import { MyApp } from './app.component';
 4 | import { TabsPage } from '../pages/tabs/tabs';
 5 | import { NewsPage } from '../pages/news/news';
 6 | import { NewsContentPage } from '../pages/news-content/news-content';
 7 | import { AboutPage } from '../pages/about/about';
 8 | import { MoviePage } from '../pages/movie/movie';
 9 | import { MovieCategoryPage } from '../pages/movie-category/movie-category';
10 | import { MovieDetailPage } from '../pages/movie-detail/movie-detail';
11 | import { BaiduMapPage } from '../pages/baidu-map/baidu-map';
12 | import { EchartsPage } from '../pages/echarts/echarts';
13 | 
14 | import { Data } from '../providers/data';
15 | import { ImageLoader } from '../components/image-loader/image-loader';
16 | import { ElasticHeader } from '../components/elastic-header/elastic-header';
17 | 
18 | @NgModule({
19 |   declarations: [
20 |     MyApp,
21 |     TabsPage,
22 |     NewsPage,
23 |     NewsContentPage,
24 |     AboutPage,
25 |     MoviePage,
26 |     MovieCategoryPage,
27 |     MovieDetailPage,
28 |     BaiduMapPage,
29 |     EchartsPage,
30 |     ImageLoader,
31 |     ElasticHeader
32 |   ],
33 |   imports: [
34 |     IonicModule.forRoot(MyApp,{
35 |       tabsHideOnSubPages: true,
36 |       platforms: {
37 |         ios: {
38 |           backButtonText: "返回"
39 |         }
40 |       }
41 |     })
42 |   ],
43 |   bootstrap: [IonicApp],
44 |   entryComponents: [
45 |     MyApp,
46 |     TabsPage,
47 |     NewsPage,
48 |     NewsContentPage,
49 |     AboutPage,
50 |     MoviePage,
51 |     MovieCategoryPage,
52 |     MovieDetailPage,
53 |     BaiduMapPage,
54 |     EchartsPage
55 |   ],
56 |   providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler },Data]
57 | })
58 | export class AppModule { }
59 | 


--------------------------------------------------------------------------------
/src/app/app.scss:
--------------------------------------------------------------------------------
  1 | // http://ionicframework.com/docs/v2/theming/
  2 | // App Global Sass
  3 | // --------------------------------------------------
  4 | // Put style rules here that you want to apply globally. These
  5 | // styles are for the entire app and not just one component.
  6 | // Additionally, this file can be also used as an entry point
  7 | // to import other Sass files to be included in the output CSS.
  8 | //
  9 | // Shared Sass variables, which can be used to adjust Ionic's
 10 | // default Sass variables, belong in "theme/variables.scss".
 11 | //
 12 | // To declare rules for a specific mode, create a child rule
 13 | // for the .md, .ios, or .wp mode classes. The mode class is
 14 | // automatically applied to the <body> element in the app.
 15 | a {
 16 |     text-decoration: none;
 17 | }
 18 | 
 19 | ion-content {
 20 |     overflow: hidden;
 21 | }
 22 | 
 23 | .c-w {
 24 |     color: #FFF;
 25 | }
 26 | 
 27 | .c-b {
 28 |     color: #000;
 29 | }
 30 | 
 31 | .dis-t {
 32 |     display: table;
 33 | }
 34 | 
 35 | .dis-tc {
 36 |     display: table-cell;
 37 |     text-align: center;
 38 |     vertical-align: middle
 39 | }
 40 | 
 41 | .menu-header {
 42 |     background: url(../assets/image/menu-header-back.jpg) no-repeat fixed center;
 43 |     width: 100%;
 44 |     height: 15em;
 45 | }
 46 | 
 47 | .menu-header h2 {
 48 |     margin: 0.2em 0;
 49 | }
 50 | 
 51 | .menu-user-photo {
 52 |     width: 8em;
 53 |     height: 8em;
 54 |     border-radius: 50%;
 55 | }
 56 | 
 57 | .loading {
 58 |     text-align: center;
 59 |     margin-top: calc(20vh);
 60 | }
 61 | 
 62 | .text-reader {
 63 |     line-height: 1.5em;
 64 |     text-indent: 2em;
 65 | }
 66 | 
 67 | @font-face {
 68 |     font-family: 'iconfont';
 69 |     src: url('../assets/myFonts/iconfont.eot');
 70 |     /* IE9*/
 71 |     src: url('../assets/myFonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 72 |     url('../assets/myFonts/iconfont.woff') format('woff'), /* chrome、firefox */
 73 |     url('../assets/myFonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
 74 |     url('../assets/myFonts/iconfont.svg#iconfont') format('svg');
 75 |     /* iOS 4.1- */
 76 | }
 77 | 
 78 | .iconfont {
 79 |     font-family: "iconfont" !important;
 80 |     font-size: 2.4rem;
 81 |     font-style: normal;
 82 |     -webkit-font-smoothing: antialiased;
 83 |     -webkit-text-stroke-width: 0.2px;
 84 |     -moz-osx-font-smoothing: grayscale;
 85 | }
 86 | 
 87 | .icon-QQ:before {
 88 |     content: "\e607";
 89 | }
 90 | 
 91 | .icon-Qzone:before {
 92 |     content: "\e608";
 93 | }
 94 | 
 95 | .icon-weixin:before {
 96 |     content: "\3433";
 97 | }
 98 | 
 99 | .icon-friends:before {
100 |     content: "\e644";
101 | }
102 | 
103 | .line-text {
104 |     font-size: 1.2em;
105 |     margin: 0;
106 | }
107 | 
108 | .line-text:before,
109 | .line-text:after {
110 |     content: '';
111 |     position: absolute;
112 |     top: 50%;
113 |     background: #e8e8e8;
114 |     width: 20%;
115 |     height: 2px;
116 | }
117 | 
118 | .line-text:before {
119 |     left: 15%;
120 | }
121 | 
122 | .line-text:after {
123 |     right: 15%;
124 | }


--------------------------------------------------------------------------------
/src/app/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 | 
3 | import { AppModule } from './app.module';
4 | 
5 | platformBrowserDynamic().bootstrapModule(AppModule);
6 | 


--------------------------------------------------------------------------------
/src/assets/icon/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/src/assets/icon/favicon.ico


--------------------------------------------------------------------------------
/src/assets/image/404.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/src/assets/image/404.png


--------------------------------------------------------------------------------
/src/assets/image/menu-header-back.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/src/assets/image/menu-header-back.jpg


--------------------------------------------------------------------------------
/src/assets/image/qrcode.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/src/assets/image/qrcode.jpg


--------------------------------------------------------------------------------
/src/assets/image/user.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/src/assets/image/user.jpg


--------------------------------------------------------------------------------
/src/assets/myFonts/iconfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/src/assets/myFonts/iconfont.eot


--------------------------------------------------------------------------------
/src/assets/myFonts/iconfont.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 3 | <svg xmlns="http://www.w3.org/2000/svg">
 4 | <metadata>
 5 | Created by FontForge 20120731 at Mon Dec  5 22:03:53 2016
 6 |  By admin
 7 | </metadata>
 8 | <defs>
 9 | <font id="iconfont" horiz-adv-x="1024" >
10 |   <font-face 
11 |     font-family="iconfont"
12 |     font-weight="500"
13 |     font-stretch="normal"
14 |     units-per-em="1024"
15 |     panose-1="2 0 6 3 0 0 0 0 0 0"
16 |     ascent="896"
17 |     descent="-128"
18 |     x-height="792"
19 |     bbox="7 -187 994 820"
20 |     underline-thickness="50"
21 |     underline-position="-100"
22 |     unicode-range="U+0078-E644"
23 |   />
24 | <missing-glyph horiz-adv-x="374" 
25 | d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
26 |     <glyph glyph-name=".notdef" horiz-adv-x="374" 
27 | d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
28 |     <glyph glyph-name=".null" horiz-adv-x="0" 
29 |  />
30 |     <glyph glyph-name="nonmarkingreturn" horiz-adv-x="341" 
31 |  />
32 |     <glyph glyph-name="x" unicode="x" horiz-adv-x="1001" 
33 | d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
34 | t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
35 | t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
36 |     <glyph glyph-name="uni3433" unicode="&#x3433;" horiz-adv-x="1000" 
37 | d="M676 471q16 0 34 -2q-23 106 -123.5 176t-229.5 70q-95 0 -175.5 -39.5t-127.5 -108t-47 -150.5q0 -138 140 -236l-35 -106l122 62q89 -18 123 -18q15 0 33 2q-11 37 -11 73q0 115 86.5 196t210.5 81zM485.5 573q22.5 0 38.5 -16t16 -38.5t-16 -38t-38.5 -15.5t-38 15.5
38 | t-15.5 38t15.5 38.5t38 16zM240.5 464q-22.5 0 -38 15.5t-15.5 38t15.5 38.5t38 16t38.5 -16t16 -38.5t-16 -38t-38.5 -15.5zM994 197q0 68 -41.5 127t-110 93t-146.5 34q-124 0 -211 -74.5t-87 -179.5t87 -179.5t211 -74.5q35 0 105 18l96 -53l-26 87q123 92 123 202z
39 | M605 236q-16 0 -27.5 11.5t-11.5 27.5t11.5 27t27.5 11t27 -11t11 -27t-11 -27.5t-27 -11.5zM797 234q-16 0 -27 11.5t-11 27.5t11 27t27 11t27.5 -11t11.5 -27t-11.5 -27.5t-27.5 -11.5z" />
40 |     <glyph glyph-name="uniE607" unicode="&#xe607;" 
41 | d="M971 143l-2 18l-3 17l-3 9l-2 9l-3 9l-4 10l-3 10l-4 9l-8 16l-6 14l-7 13l-5 11l-7 11l-5 9l-10 15l-12 19l-3 5l-1 2v1l2 7l3 6l2 11l2 6v6v5v5v6l-1 4l-2 10l-2 9l-3 8l-3 8l-4 7l-3 7l-3 6l-6 9l-2 3v2l-3 18l-1 11l-2 14l-3 15l-4 17l-3 9l-2 8l-3 9l-3 10l-3 9
42 | l-4 10l-8 19l-5 9l-6 10l-5 9l-6 10l-7 10l-7 8l-8 10l-8 8l-8 8l-9 9l-5 3l-5 4l-11 7l-12 8l-12 7l-13 7l-13 6l-13 6l-14 4l-15 4l-13 4l-15 3l-13 4l-15 1l-14 2l-15 2h-15h-14h-14l-14 -1l-14 -2l-14 -2l-13 -2l-14 -3l-13 -3l-13 -4l-12 -4l-12 -4l-12 -6l-12 -5
43 | l-10 -6l-10 -6l-10 -7l-10 -8l-8 -7l-12 -12l-10 -10l-10 -11l-9 -11l-9 -11l-7 -10l-7 -11l-4 -5l-3 -6l-7 -10l-5 -10l-5 -10l-4 -10l-4 -9l-3 -9l-3 -9l-4 -8l-4 -16l-3 -15l-1 -12l-2 -11v-8v-7v-6l-3 -3l-3 -4l-2 -4l-2 -4l-2 -9l-3 -9v-7l-1 -6v-6l-6 -8l-4 -9l-3 -8
44 | l-2 -7l-2 -7l-2 -6v-6v-6v-5l1 -4l2 -7l1 -6l-3 -3l-9 -6l-12 -11l-7 -7l-7 -6l-5 -5l-4 -5l-9 -9l-8 -10l-7 -8l-8 -11l-7 -11l-7 -12l-7 -11l-5 -11l-5 -11l-4 -10l-4 -11l-3 -11l-3 -11l-3 -10l-2 -10l-1 -9l-2 -10l-1 -18v-17v-7l1 -7l2 -13l1 -6l2 -5l2 -6l1 -3l3 -7
45 | l2 -2l2 -3h1h1h1h7l7 2l7 3l6 4l6 4l5 5l6 5l5 6l5 6l4 6l4 4l2 6l5 8l2 4l1 2v3l1 2h1l2 1h1v-1h1h1l3 -12l2 -10l4 -10l4 -9l4 -9l5 -8l4 -9l4 -7l5 -7l3 -6l10 -12l9 -11l8 -8l8 -7l7 -6l11 -10l4 -2l2 -2v-1l-1 -1h-1h-2l-8 -1l-7 -1l-6 -1l-7 -1l-5 -2l-6 -2l-5 -2
46 | l-4 -3l-5 -1l-3 -3l-3 -2l-4 -3l-4 -5l-2 -3l-2 -2l-3 -6l-2 -5l-1 -5l-1 -4v-6v-3l-1 -4v-4l-1 -4v-3l1 -4l1 -4l2 -7l2 -3l2 -3l2 -3l3 -3l3 -3l2 -3l7 -5l8 -4l8 -5l9 -3l9 -4l11 -2l10 -4l11 -2l12 -2l11 -2l12 -1l24 -3h24h23h10h10h11l9 1l9 1l8 1l13 2l9 3l9 2l17 7
47 | l8 3l7 3l12 7l10 6l8 5l6 5l9 -1l7 -1l14 -1h6h6l4 -1l4 -1l7 -3l8 -2l14 -5l15 -5l14 -4l14 -3l15 -4l15 -2l15 -2l14 -2l14 -1l15 -1h13h14h13l13 1l13 1l12 2l11 3l11 2l11 3l5 1l5 2l9 3l8 4l8 4l8 4l6 5l3 3l3 4l4 4l4 6l1 3l1 3l2 3l1 3v4l1 3l-1 5l-1 4l-2 5l-1 4
48 | l-3 5l-3 5l-3 3l-4 4l-9 7l-10 8l-10 5l-10 6l-23 12l-6 3l-2 2l-1 1l12 11l5 6l4 5l8 12l7 11l6 11l6 10l8 20l7 16l4 12l2 4l2 3l2 2h1h1l6 -12l5 -12l4 -7l4 -5l4 -7l5 -7l4 -5l3 -2l2 -3l2 -1l3 -2l4 -2l3 -1h2h2l2 1l4 1l3 2l3 2l3 3l3 4l2 3l3 5l2 3l2 6l2 4l3 11
49 | l2 12l2 14l1 8v6v7v9z" />
50 |     <glyph glyph-name="uniE608" unicode="&#xe608;" 
51 | d="M685 398h-324l214 -37l-230 -187h348l-206 45zM516 766q-95 0 -181.5 -37t-149.5 -99.5t-100 -149t-37 -182t37 -182t100 -149t149.5 -99.5t181.5 -37t181.5 37t149.5 99.5t100 149t37 182t-37 182t-100 149t-149.5 99.5t-181.5 37zM820 382l-119 -101l40 -253
52 | q-8 -8 -16 -8l-207 127l-206 -127q-13 0 -15.5 1t-2.5 7l29 253l-126 111l-43 31h-12v1l12 -1h112h134l32 56l79 168h16l87 -168l32 -56h134h80q3 0 6 1q1 0 1.5 -0.5t0.5 -4.5z" />
53 |     <glyph glyph-name="uniE644" unicode="&#xe644;" 
54 | d="M514 820q-25 0 -51 -3q-59 -7 -116 -30q301 -297 309 -308v317l-27 9q-57 15 -115 15zM828 690q-18 18 -38 34q-47 38 -102 61q2 -423 0 -437l224 225q-6 12 -13 25q-30 52 -71 92zM927 538q-298 -301 -309 -309h317q5 13 9 27q15 57 15 115q0 25 -3 51q-7 60 -29 116z
55 | M485 195l225 -224q13 6 25 13q51 30 92 71q17 17 34 38q37 47 61 102q1 0 -24 0h-61h-83q-46 0 -91.5 -0.5t-84.5 -0.5t-64.5 0.5t-28.5 0.5zM370 266v-318q13 -4 27 -8q57 -15 115 -15q25 0 51 3q60 6 116 29l-17 17q-17 16 -43.5 42.5t-59 58.5t-65.5 65l-60 60
56 | q-27 27 -45 45.5t-19 20.5zM338 398l-225 -224q6 -12 14 -25q29 -52 71 -93q17 -17 37 -33q48 -38 103 -61q0 -1 -0.5 109.5t-0.5 207.5t1 119zM82 488q-15 -57 -15 -115q0 -25 3 -51q7 -60 29 -115q298 301 309 308h-317q-5 -12 -9 -27zM289 758q-51 -29 -92 -70
57 | q-17 -17 -34 -38q-37 -47 -61 -103h437l-225 225q-13 -7 -25 -14z" />
58 |   </font>
59 | </defs></svg>
60 | 


--------------------------------------------------------------------------------
/src/assets/myFonts/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/src/assets/myFonts/iconfont.ttf


--------------------------------------------------------------------------------
/src/assets/myFonts/iconfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/git-liyou/Ion2/9d8dd80ac619c8427d7354a043cbd67bb368513b/src/assets/myFonts/iconfont.woff


--------------------------------------------------------------------------------
/src/components/elastic-header/elastic-header.ts:
--------------------------------------------------------------------------------
 1 | import { Directive, ElementRef, Renderer } from '@angular/core';
 2 | 
 3 | @Directive({
 4 |   selector: '[elastic-header]'
 5 | })
 6 | export class ElasticHeader {
 7 | 
 8 |     scrollerHandle: any;
 9 |     header: any;
10 |     headerHeight: any;
11 |     translateAmt: any;
12 |     scaleAmt: any;
13 |     scrollTop: any;
14 |     lastScrollTop: any;
15 |     ticking: any;
16 | 
17 |     constructor(public element: ElementRef, public renderer: Renderer) {
18 | 
19 |     }
20 | 
21 |     ngOnInit(){
22 | 
23 |         this.scrollerHandle = this.element.nativeElement.getElementsByClassName('scroll-content')[0];
24 |         this.header = this.scrollerHandle.firstElementChild;
25 |         this.headerHeight = this.scrollerHandle.clientHeight;
26 |         this.ticking = false;
27 | 
28 |         this.renderer.setElementStyle(this.header, 'webkitTransformOrigin', 'center center');
29 | 
30 |         window.addEventListener('resize', () => {
31 |             this.headerHeight = this.scrollerHandle.clientHeight;
32 |         }, false);
33 | 
34 |         this.scrollerHandle.addEventListener('scroll', () => {
35 | 
36 |             if(!this.ticking){
37 |                 window.requestAnimationFrame(() => {
38 |                     this.updateElasticHeader();
39 |                 });
40 |             }
41 | 
42 |             this.ticking = true;
43 | 
44 |         });
45 | 
46 |     }
47 | 
48 |     updateElasticHeader(){
49 | 
50 |         this.scrollTop = this.scrollerHandle.scrollTop;
51 | 
52 |         if(this.scrollTop >= 0){
53 |             this.translateAmt = this.scrollTop / 2;
54 |             this.scaleAmt = 1;
55 |         } else {
56 |             this.translateAmt = 0;
57 |             this.scaleAmt = -this.scrollTop / this.headerHeight + 1;
58 |         }
59 | 
60 |         this.renderer.setElementStyle(this.header, 'webkitTransform', 'translate3d(0,'+this.translateAmt+'px,0) scale('+this.scaleAmt+','+this.scaleAmt+')');
61 |         this.ticking = false;
62 | 
63 |     }
64 | 
65 | }


--------------------------------------------------------------------------------
/src/components/image-loader/image-loader.ts:
--------------------------------------------------------------------------------
 1 | import { Directive, ElementRef,ViewChild } from '@angular/core';
 2 | 
 3 | @Directive({
 4 |   selector: '[image-loader]'
 5 | })
 6 | 
 7 | export class ImageLoader {
 8 |     @ViewChild('chart') public chartEl: ElementRef;
 9 | 
10 | }
11 | 


--------------------------------------------------------------------------------
/src/declarations.d.ts:
--------------------------------------------------------------------------------
 1 | /*
 2 |   Declaration files are how the Typescript compiler knows about the type information(or shape) of an object.
 3 |   They're what make intellisense work and make Typescript know all about your code.
 4 | 
 5 |   A wildcard module is declared below to allow third party libraries to be used in an app even if they don't
 6 |   provide their own type declarations.
 7 | 
 8 |   To learn more about using third party libraries in an Ionic app, check out the docs here:
 9 |   http://ionicframework.com/docs/v2/resources/third-party-libs/
10 | 
11 |   For more info on type definition files, check out the Typescript docs here:
12 |   https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html
13 | */
14 | declare module '*';


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" dir="ltr">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title>Ionic App</title>
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 8 |     <meta name="format-detection" content="telephone=no">
 9 |     <meta name="msapplication-tap-highlight" content="no">
10 | 
11 |     <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
12 |     <link rel="manifest" href="manifest.json">
13 |     <meta name="theme-color" content="#4e8ef7">
14 | 
15 |     <!-- cordova.js required for cordova apps -->
16 |     <script src="cordova.js"></script>
17 | 
18 |     <!-- un-comment this code to enable service worker
19 |   <script>
20 |     if ('serviceWorker' in navigator) {
21 |       navigator.serviceWorker.register('service-worker.js')
22 |         .then(() => console.log('service worker installed'))
23 |         .catch(err => console.log('Error', err));
24 |     }
25 |   </script>-->
26 | 
27 |     <link href="build/main.css" rel="stylesheet">
28 | 
29 | </head>
30 | 
31 | <body>
32 | 
33 |     <!-- Ionic's root component and where the app will load -->
34 |     <ion-app></ion-app>
35 | 
36 |     <!-- The polyfills js is generated during the build process -->
37 |     <script src="build/polyfills.js"></script>
38 | 
39 |     <!-- The bundle js is generated during the build process -->
40 |     <script src="build/main.js"></script>
41 | 
42 |     <script src="http://api.map.baidu.com/api?v=2.0&ak=zuDUu1qGxl88BLqbfMZ7irpro3Sz9XvL"></script>
43 |     <script src="assets/echarts.min.js"></script>
44 | 
45 | </body>
46 | 
47 | </html>


--------------------------------------------------------------------------------
/src/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Ionic",
 3 |   "short_name": "Ionic",
 4 |   "start_url": "index.html",
 5 |   "display": "standalone",
 6 |   "icons": [{
 7 |     "src": "assets/imgs/logo.png",
 8 |     "sizes": "512x512",
 9 |     "type": "image/png"
10 |   }],
11 |   "background_color": "#4e8ef7",
12 |   "theme_color": "#4e8ef7"
13 | }


--------------------------------------------------------------------------------
/src/pages/about/about.html:
--------------------------------------------------------------------------------
 1 | <ion-header>
 2 |     <ion-navbar color="primary">
 3 |         <button ion-button menuToggle>
 4 |       <ion-icon name="menu"></ion-icon>
 5 |     </button>
 6 |         <ion-title>
 7 |             设置
 8 |         </ion-title>
 9 |     </ion-navbar>
10 | </ion-header>
11 | 
12 | <ion-content>
13 |     <div class="qrHolder" style="text-align:center;">
14 |         <img src="assets/image/qrcode.jpg" style="width:45%;margin-top:1.6rem">
15 |         <h3>微信公众号：Ionic2</h3>
16 |     </div>
17 |     <div style="width:100%;height:5px;background-color:#e8e8e8"></div>
18 |     <!--<ion-list>-->
19 |     <button ion-item icon-left (click)="saveQr()">
20 |       <ion-icon name="md-crop" color="primary" item-left></ion-icon>
21 |       保存二维码
22 |     </button>
23 |     <a ion-item icon-left href="mqqapi://card/show_pslcard?src_type=internal&version=1&uin=57770491&card_type=group&source=qrcode">
24 |         <ion-icon name="md-person-add" color="primary" item-left></ion-icon>
25 |         加入QQ群
26 |     </a>
27 |     <!--</ion-list>-->
28 |     <div style="text-align:center;position:absolute;bottom:10px;width:100%">
29 |         <div style="position:relative;">
30 |             <p class="line-text">© dPary</p>
31 |         </div>
32 |     </div>
33 | 
34 | </ion-content>


--------------------------------------------------------------------------------
/src/pages/about/about.scss:
--------------------------------------------------------------------------------
1 | page-about {}


--------------------------------------------------------------------------------
/src/pages/about/about.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | import { NavController, ToastController } from 'ionic-angular';
 4 | declare var navigator;
 5 | @Component({
 6 |   selector: 'page-about',
 7 |   templateUrl: 'about.html'
 8 | })
 9 | export class AboutPage {
10 | 
11 |   constructor(public navCtrl: NavController, public toastCtrl: ToastController) {
12 | 
13 |   }
14 |   saveQr() {
15 |     let that = this;
16 |     navigator.screenshot.save(function (error, res) {
17 |       if (error) {
18 |         that.showToast("保存失败！");
19 |       } else {
20 |         that.showToast("保存成功，微信扫描关注公众号~");
21 |       }
22 |     }, 'jpg', 100, 'Ion2Screenshot');
23 |   }
24 |   showToast(msg) {
25 |     let toast = this.toastCtrl.create({
26 |       message: msg,
27 |       duration: 2000
28 |     });
29 |     toast.present();
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/src/pages/baidu-map/baidu-map.html:
--------------------------------------------------------------------------------
 1 | <ion-header>
 2 | 
 3 |     <ion-navbar color="primary">
 4 |         <ion-title>百度地图</ion-title>
 5 |     </ion-navbar>
 6 | 
 7 | </ion-header>
 8 | 
 9 | <ion-content>
10 |     <ion-fab left bottom>
11 |         <button ion-fab (click)='getLocation()'><ion-icon name="md-locate"></ion-icon></button>
12 |     </ion-fab>
13 |     <div id="Bmap" style="width: 100%;height: 100%"></div>
14 | </ion-content>


--------------------------------------------------------------------------------
/src/pages/baidu-map/baidu-map.scss:
--------------------------------------------------------------------------------
1 | page-baidu-map {
2 | 
3 | }
4 | 


--------------------------------------------------------------------------------
/src/pages/baidu-map/baidu-map.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | import { NavController, MenuController, ToastController } from 'ionic-angular';
 3 | 
 4 | declare var BMap, BDLocation;
 5 | @Component({
 6 |   selector: 'page-baidu-map',
 7 |   templateUrl: 'baidu-map.html'
 8 | })
 9 | export class BaiduMapPage {
10 |   map: any;
11 |   constructor(public navCtrl: NavController, public menuCtrl: MenuController, public toastCtrl: ToastController) {
12 |     this.menuCtrl.swipeEnable(false);
13 |   }
14 |   getLocation() {
15 |     let that = this;
16 |     BDLocation.watch({ gps: true },
17 |       (suc) => {
18 |         if (suc.data) {
19 |           this.map.centerAndZoom(new BMap.Point(suc.data.longitude, suc.data.latitude), 15);
20 |           let pt = new BMap.Point(suc.data.longitude, suc.data.latitude);
21 |           let marker2 = new BMap.Marker(pt);
22 |           this.map.addOverlay(marker2);
23 |         } else {
24 |           that.showToast('定位失败，请检查应用权限设置！');
25 |         }
26 |         BDLocation.stop(suc => {
27 | 
28 |         }, err => {
29 | 
30 |         });
31 | 
32 |       }, (err) => {
33 |         that.showToast('定位失败，请检查应用权限设置！');
34 |       }
35 |     )
36 |   }
37 |   ionViewDidLoad() {
38 |     this.map = new BMap.Map("Bmap");
39 |     this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
40 |     this.map.addControl(new BMap.NavigationControl());
41 |     this.map.enableScrollWheelZoom(true);
42 |   }
43 |   ionViewWillLeave() {
44 |     this.menuCtrl.swipeEnable(true);
45 |   }
46 |   showToast(msg) {
47 |     let toast = this.toastCtrl.create({
48 |       message: msg,
49 |       duration: 2000
50 |     });
51 |     toast.present();
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/src/pages/echarts/echarts.html:
--------------------------------------------------------------------------------
 1 | <ion-header>
 2 | 
 3 |     <ion-navbar color="primary">
 4 |         <ion-title>echarts</ion-title>
 5 |     </ion-navbar>
 6 | 
 7 | </ion-header>
 8 | 
 9 | 
10 | <ion-content padding>
11 |     <ion-scroll scrollX="true" scrollY="true" style="width:100%;height:100%">
12 |         <div id='main' style="width:200%;height:400px"></div>
13 |     </ion-scroll>
14 | </ion-content>


--------------------------------------------------------------------------------
/src/pages/echarts/echarts.scss:
--------------------------------------------------------------------------------
1 | page-echarts {
2 | 
3 | }
4 | 


--------------------------------------------------------------------------------
/src/pages/echarts/echarts.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | import { NavController, MenuController } from 'ionic-angular';
 3 | 
 4 | declare var echarts;
 5 | @Component({
 6 |   selector: 'page-echarts',
 7 |   templateUrl: 'echarts.html'
 8 | })
 9 | export class EchartsPage {
10 |   constructor(public navCtrl: NavController, public menuCtrl: MenuController) {
11 |     this.menuCtrl.swipeEnable(false);
12 |   }
13 |   ionViewWillLeave() {
14 |     this.menuCtrl.swipeEnable(true);
15 |   }
16 | 
17 |   ionViewDidLoad() {
18 |     let myChart = echarts.init(document.getElementById('main'));
19 | 
20 |     let option = {
21 |       title: {
22 |         text: ''
23 |       },
24 |       tooltip: {
25 |         trigger: 'axis'
26 |       },
27 |       legend: {
28 |         data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
29 |       },
30 |       grid: {
31 |         left: '3%',
32 |         right: '4%',
33 |         bottom: '3%',
34 |         containLabel: true
35 |       },
36 |       xAxis: [
37 |         {
38 |           type: 'category',
39 |           boundaryGap: false,
40 |           data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
41 |         }
42 |       ],
43 |       yAxis: [
44 |         {
45 |           type: 'value'
46 |         }
47 |       ],
48 |       series: [
49 |         {
50 |           name: '邮件营销',
51 |           type: 'line',
52 |           stack: '总量',
53 |           areaStyle: { normal: {} },
54 |           data: [120, 132, 101, 134, 90, 230, 210]
55 |         },
56 |         {
57 |           name: '联盟广告',
58 |           type: 'line',
59 |           stack: '总量',
60 |           areaStyle: { normal: {} },
61 |           data: [220, 182, 191, 234, 290, 330, 310]
62 |         },
63 |         {
64 |           name: '视频广告',
65 |           type: 'line',
66 |           stack: '总量',
67 |           areaStyle: { normal: {} },
68 |           data: [150, 232, 201, 154, 190, 330, 410]
69 |         },
70 |         {
71 |           name: '直接访问',
72 |           type: 'line',
73 |           stack: '总量',
74 |           areaStyle: { normal: {} },
75 |           data: [320, 332, 301, 334, 390, 330, 320]
76 |         },
77 |         {
78 |           name: '搜索引擎',
79 |           type: 'line',
80 |           stack: '总量',
81 |           label: {
82 |             normal: {
83 |               show: true,
84 |               position: 'top'
85 |             }
86 |           },
87 |           areaStyle: { normal: {} },
88 |           data: [820, 932, 901, 934, 1290, 1330, 1320]
89 |         }
90 |       ]
91 |     };
92 | 
93 | 
94 |     // 使用刚指定的配置项和数据显示图表。
95 |     myChart.setOption(option);
96 |   }
97 | 
98 | }
99 | 


--------------------------------------------------------------------------------
/src/pages/movie-category/movie-category.html:
--------------------------------------------------------------------------------
 1 | <ion-header>
 2 | 
 3 |     <ion-navbar color="primary">
 4 |         <ion-title>{{category}}</ion-title>
 5 |     </ion-navbar>
 6 | 
 7 | </ion-header>
 8 | 
 9 | <ion-content *ngIf="hasErr">
10 |     <div class="loading" (click)="getData(null)">
11 |         <img src="assets/image/404.png" style="width:50%">
12 |     </div>
13 | </ion-content>
14 | <ion-content *ngIf="!hasErr">
15 |     <div *ngIf="!dataFinish" class="loading">
16 |         <ion-spinner name="bubbles"></ion-spinner>
17 |     </div>
18 |     <ion-refresher (ionRefresh)="getData($event)">
19 |         <ion-refresher-content pullingText="刷新中..."></ion-refresher-content>
20 |     </ion-refresher>
21 |     <ion-grid>
22 |         <ion-row wrap>
23 |             <ion-col *ngFor="let movie of movieList" width-50>
24 |                 <ion-card (click)="pushDetail(movie.id)">
25 |                     <img [src]="movie.images.large" />
26 |                     <ion-card-content>
27 |                         <ion-card-title>{{movie.title}}</ion-card-title>
28 |                     </ion-card-content>
29 |                 </ion-card>
30 |             </ion-col>
31 |         </ion-row>
32 |     </ion-grid>
33 |     <ion-infinite-scroll *ngIf="hasmore" (ionInfinite)="getData($event)">
34 |         <ion-infinite-scroll-content loadingText="加载中..."></ion-infinite-scroll-content>
35 |     </ion-infinite-scroll>
36 | </ion-content>


--------------------------------------------------------------------------------
/src/pages/movie-category/movie-category.scss:
--------------------------------------------------------------------------------
 1 | .ios,
 2 | .md {
 3 |     page-movie-category {
 4 |         ion-card {
 5 |             background-color: transparent;
 6 |             box-shadow: none;
 7 |             position: relative;
 8 |             margin-top: 0;
 9 |             img {
10 |                 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.65);
11 |             }
12 |         }
13 |         ion-col {
14 |             padding: 0;
15 |         }
16 |         ion-card-content {
17 |             padding: 0px;
18 |             text-align: center;
19 |             p {
20 |                 color: #000;
21 |             }
22 |         }
23 |         ion-card-title {
24 |             padding: 5px;
25 |             font-size: 1em;
26 |             font-weight: bold;
27 |             color: #000;
28 |             white-space: nowrap;
29 |             overflow: hidden;
30 |             text-overflow: ellipsis;
31 |         }
32 |     }
33 | }


--------------------------------------------------------------------------------
/src/pages/movie-category/movie-category.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | import { NavController, NavParams, MenuController } from 'ionic-angular';
 3 | import { MovieDetailPage } from '../movie-detail/movie-detail';
 4 | import { Data } from '../../providers/data';
 5 | 
 6 | @Component({
 7 |   selector: 'page-movie-category',
 8 |   templateUrl: 'movie-category.html'
 9 | })
10 | export class MovieCategoryPage {
11 |   category: String;
12 |   movieList: any = [];
13 |   start = 0;
14 |   count = 10;
15 |   dataFinish: boolean = false;
16 |   hasmore: boolean = false;
17 |   hasErr: any;
18 |   constructor(public navCtrl: NavController, public navParams: NavParams, public data: Data, public menuCtrl: MenuController) {
19 |     this.category = this.navParams.get('categories');
20 |     this.menuCtrl.swipeEnable(false);
21 |   }
22 | 
23 |   ionViewDidLoad() {
24 |     this.getData(null);
25 |   }
26 |   ionViewWillLeave() {
27 |     this.menuCtrl.swipeEnable(true);
28 |   }
29 |   pushDetail(id) {
30 |     this.navCtrl.push(MovieDetailPage, { id: id })
31 |   }
32 |   getData(event) {
33 |     if (event && event.ionRefresh) this.start = 0, this.movieList = [];
34 |     this.hasErr = null;
35 |     this.dataFinish = false;
36 |     switch (this.category) {
37 |       case 'Top250':
38 |         this.data.getTopData(this.start, this.count).then((res: Array<any>) => {
39 |           this.movieList = this.movieList.concat(res);
40 |           this.dataFinish = true;
41 |           if (res.length >= 10) this.start += this.count, this.hasmore = true;
42 |           else this.hasmore = false;
43 |           if (event) {
44 |             event.complete();
45 |           }
46 |         }, err => {
47 |           this.hasErr = err;
48 |         })
49 |         break;
50 |       case '正在热映':
51 |         this.data.getInTheaters(this.start, this.count).then((res: Array<any>) => {
52 |           this.movieList = this.movieList.concat(res);
53 |           this.dataFinish = true;
54 |           if (res.length >= 10) this.start += this.count, this.hasmore = true;
55 |           else this.hasmore = false;
56 |           if (event) {
57 |             event.complete();
58 |           }
59 |         }, err => {
60 |           this.hasErr = err;
61 |         })
62 |         break;
63 |       case '即将上映':
64 |         this.data.getComingSoon(this.start, this.count).then((res: Array<any>) => {
65 |           this.movieList = this.movieList.concat(res);
66 |           this.dataFinish = true;
67 |           if (res.length >= 10) this.start += this.count, this.hasmore = true;
68 |           else this.hasmore = false;
69 |           if (event) {
70 |             event.complete();
71 |           }
72 |         }, err => {
73 |           this.hasErr = err;
74 |         })
75 |         break;
76 |     }
77 | 
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/src/pages/movie-detail/movie-detail.html:
--------------------------------------------------------------------------------
 1 | <ion-header>
 2 | 
 3 |     <ion-navbar color="primary">
 4 |         <ion-title>电影信息</ion-title>
 5 |     </ion-navbar>
 6 | 
 7 | </ion-header>
 8 | <ion-content *ngIf="!movieInfo">
 9 |     <div *ngIf="!hasErr" class="loading">
10 |         <ion-spinner name="bubbles"></ion-spinner>
11 |     </div>
12 |     <div *ngIf="hasErr">
13 |         <div class="loading" (click)="initData()">
14 |             <img src="assets/image/404.png" style="width:50%">
15 |         </div>
16 |     </div>
17 | </ion-content>
18 | <ion-content *ngIf="movieInfo" elastic-header>
19 |     <div class="background-image" [ngStyle]="{'background-image':'url(' + movieInfo.images.large + ')'}"></div>
20 |     <div class="main-content">
21 |         <h2>{{movieInfo.title}}</h2>
22 |         <ion-chip color="primary" *ngFor="let genre of movieInfo.genres">
23 |             <ion-label>{{genre}}</ion-label>
24 |         </ion-chip>
25 |         <p class="text-reader">
26 |             {{movieInfo.summary}}
27 |         </p>
28 |     </div>
29 |     <ion-fab right bottom>
30 |         <button ion-fab color="primary" mini><ion-icon name="ios-send"></ion-icon></button>
31 |         <ion-fab-list side="top">
32 |             <button ion-fab (click)="shareMovie('friends',movieInfo)"><i color="primary" class="iconfont icon-friends"></i></button>
33 |             <button ion-fab (click)="shareMovie('weixin',movieInfo)"><i color="primary" class="iconfont icon-weixin"></i></button>
34 |             <button ion-fab (click)="shareMovie('Qzone',movieInfo)"><i color="primary" class="iconfont icon-Qzone"></i></button>
35 |             <button ion-fab (click)="shareMovie('QQ',movieInfo)"><i color="primary" class="iconfont icon-QQ"></i></button>
36 |         </ion-fab-list>
37 |     </ion-fab>
38 | </ion-content>


--------------------------------------------------------------------------------
/src/pages/movie-detail/movie-detail.scss:
--------------------------------------------------------------------------------
 1 | .ios,
 2 | .md {
 3 |     page-movie-detail {
 4 |         ion-chip {
 5 |             margin: 2px;
 6 |         }
 7 |     }
 8 |     .background-image {
 9 |         background-image: url(../../assets/image/menu-header-back.jpg);
10 |         background-size: cover;
11 |         background-position: center;
12 |         height: 45vh;
13 |     }
14 |     .main-content {
15 |         padding: 20px;
16 |         background-color: #F4F4F4;
17 |         position: absolute;
18 |     }
19 | }


--------------------------------------------------------------------------------
/src/pages/movie-detail/movie-detail.ts:
--------------------------------------------------------------------------------
  1 | import { Component } from '@angular/core';
  2 | import { NavController, NavParams, MenuController, ToastController } from 'ionic-angular';
  3 | import { Data } from '../../providers/data';
  4 | 
  5 | declare var YCQQ, Wechat;
  6 | 
  7 | @Component({
  8 |   selector: 'page-movie-detail',
  9 |   templateUrl: 'movie-detail.html'
 10 | })
 11 | export class MovieDetailPage {
 12 |   id: String;
 13 |   movieInfo: any;
 14 |   hasErr: any;
 15 |   constructor(public navCtrl: NavController, public navParams: NavParams, public data: Data,
 16 |     public menuCtrl: MenuController, public toastCtrl: ToastController) {
 17 |     this.id = this.navParams.get('id');
 18 |     this.menuCtrl.swipeEnable(false);
 19 |   }
 20 | 
 21 |   ionViewDidLoad() {
 22 |     this.initData();
 23 |   }
 24 |   ionViewWillLeave() {
 25 |     this.menuCtrl.swipeEnable(true);
 26 |   }
 27 |   initData() {
 28 |     this.hasErr = null;
 29 |     this.data.getMovieDetail(this.id).then(res => {
 30 |       this.movieInfo = res;
 31 |     }, err => {
 32 |       this.hasErr = err;
 33 |     })
 34 |   }
 35 |   shareMovie(type, movie) {
 36 |     let that = this;
 37 |     switch (type) {
 38 |       case 'QQ':
 39 |         let QQ = {
 40 |           url: movie.share_url,
 41 |           title: movie.title,
 42 |           description: "来自Ion2--基于Ionic2的资讯类APP",
 43 |           imageUrl: movie.images.large,
 44 |           appName: "Ion2"
 45 |         };
 46 |         YCQQ.shareToQQ(function () {
 47 |           that.showToast('分享成功');
 48 |         }, function (failReason) {
 49 |           that.showToast('分享失败');
 50 |         }, QQ);
 51 |         break;
 52 |       case 'Qzone':
 53 |         let Qzone = {
 54 |           url: movie.share_url,
 55 |           title: movie.title,
 56 |           description: "来自Ion2--基于Ionic2的资讯类APP",
 57 |           imageUrl: [movie.images.large],
 58 |           appName: "Ion2"
 59 |         };
 60 |         YCQQ.shareToQzone(function () {
 61 |           that.showToast('分享成功');
 62 |         }, function (failReason) {
 63 |           that.showToast('分享失败');
 64 |         }, Qzone);
 65 |         break;
 66 |       case 'weixin':
 67 |         Wechat.share({
 68 |           message: {
 69 |             title: movie.title,
 70 |             description: "来自Ion2--基于Ionic2的资讯类APP",
 71 |             thumb: movie.images.large,
 72 |             mediaTagName: "TEST-TAG-001",
 73 |             messageExt: "来自Ion2--基于Ionic2的资讯类APP",
 74 |             messageAction: "<action>dotalist</action>",
 75 |             media: {
 76 |               type: Wechat.Type.WEBPAGE,
 77 |               webpageUrl: movie.share_url
 78 |             }
 79 |           },
 80 |           scene: Wechat.Scene.SESSION
 81 |         }, function () {
 82 |           that.showToast('分享成功');
 83 |         }, function (failReason) {
 84 |           that.showToast('分享失败');
 85 |         });
 86 |         break;
 87 |       case 'friends':
 88 |         Wechat.share({
 89 |           message: {
 90 |             title: movie.title,
 91 |             description: "来自Ion2--基于Ionic2的资讯类APP",
 92 |             thumb: movie.images.large,
 93 |             mediaTagName: "TEST-TAG-001",
 94 |             messageExt: "来自Ion2--基于Ionic2的资讯类APP",
 95 |             messageAction: "<action>dotalist</action>",
 96 |             media: {
 97 |               type: Wechat.Type.WEBPAGE,
 98 |               webpageUrl: movie.share_url
 99 |             }
100 |           },
101 |           scene: Wechat.Scene.TIMELINE
102 |         }, function () {
103 |           that.showToast('分享成功');
104 |         }, function (failReason) {
105 |           that.showToast('分享失败');
106 |         });
107 |         break;
108 |     }
109 |   }
110 |   showToast(msg) {
111 |     let toast = this.toastCtrl.create({
112 |       message: msg,
113 |       duration: 2000
114 |     });
115 |     toast.present();
116 |   }
117 | }
118 | 


--------------------------------------------------------------------------------
/src/pages/movie/movie.html:
--------------------------------------------------------------------------------
 1 | <ion-header>
 2 |     <ion-navbar color="primary">
 3 |         <button ion-button menuToggle>
 4 |       <ion-icon name="menu"></ion-icon>
 5 |     </button>
 6 |         <ion-title>
 7 |             电影资讯
 8 |         </ion-title>
 9 |     </ion-navbar>
10 | </ion-header>
11 | 
12 | <ion-content>
13 |     <div *ngIf="!hasErr">
14 |         <div *ngIf="!dataFinish" class="loading">
15 |             <ion-spinner name="bubbles"></ion-spinner>
16 |         </div>
17 |         <div *ngIf="dataFinish">
18 |             <div *ngFor="let category of movieData">
19 |                 <button ion-item (click)="pushPage(category.title)">{{category.title}}</button>
20 |                 <ion-grid>
21 |                     <ion-scroll scrollX="true">
22 |                         <ion-row>
23 |                             <ion-col *ngFor="let movie of category.content" width-50>
24 |                                 <ion-card (click)="pushDetail(movie.id)">
25 |                                     <img [src]="movie.images.large" />
26 |                                     <ion-card-content>
27 |                                         <ion-card-title>{{movie.title}}</ion-card-title>
28 |                                     </ion-card-content>
29 |                                 </ion-card>
30 |                             </ion-col>
31 |                         </ion-row>
32 |                     </ion-scroll>
33 |                 </ion-grid>
34 | 
35 |             </div>
36 |         </div>
37 |     </div>
38 |     <div *ngIf="hasErr">
39 |         <div class="loading" (click)="initData()">
40 |             <img src="assets/image/404.png" style="width:50%">
41 |         </div>
42 |     </div>
43 | </ion-content>


--------------------------------------------------------------------------------
/src/pages/movie/movie.scss:
--------------------------------------------------------------------------------
 1 | .ios,
 2 | .md {
 3 |     page-movie {
 4 |         ion-card {
 5 |             background-color: transparent;
 6 |             box-shadow: none;
 7 |             position: relative;
 8 |             margin-top: 0;
 9 |             img {
10 |                 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.65);
11 |             }
12 |         }
13 |         ion-scroll {
14 |             height: calc(45vh);
15 |         }
16 |         ion-col {
17 |             padding: 0;
18 |         }
19 |         ion-card-content {
20 |             padding: 0px;
21 |             text-align: center;
22 |             p {
23 |                 color: #000;
24 |             }
25 |         }
26 |         ion-card-title {
27 |             padding: 5px;
28 |             font-size: 1em;
29 |             font-weight: bold;
30 |             color: #000;
31 |             white-space: nowrap;
32 |             overflow: hidden;
33 |             text-overflow: ellipsis;
34 |         }
35 |     }
36 | }


--------------------------------------------------------------------------------
/src/pages/movie/movie.ts:
--------------------------------------------------------------------------------
 1 | import { Component, ViewChild } from '@angular/core';
 2 | import { NavController, Content } from 'ionic-angular';
 3 | import { MovieCategoryPage } from '../movie-category/movie-category';
 4 | import { MovieDetailPage } from '../movie-detail/movie-detail';
 5 | 
 6 | import { Data } from '../../providers/data';
 7 | @Component({
 8 |   selector: 'page-movie',
 9 |   templateUrl: 'movie.html'
10 | })
11 | export class MoviePage {
12 |   @ViewChild(Content) content: Content;
13 |   movieData: any;
14 |   dataFinish: boolean = false;
15 |   hasErr: any;
16 |   constructor(public navCtrl: NavController, public data: Data) {
17 | 
18 |   }
19 |   pushPage(category) {
20 |     this.navCtrl.push(MovieCategoryPage, { categories: category })
21 |   }
22 |   pushDetail(id) {
23 |     this.navCtrl.push(MovieDetailPage, { id: id })
24 |   }
25 |   ionViewDidLoad() {
26 |     this.initData();
27 |   }
28 |   initData() {
29 |     this.hasErr = null;
30 |     this.dataFinish = false;
31 |     this.data.getAll().then(res => {
32 |       this.movieData = res;
33 |       this.dataFinish = true;
34 |     }, err => {
35 |       this.hasErr = err;
36 |     })
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/pages/news-content/news-content.html:
--------------------------------------------------------------------------------
 1 | <ion-header>
 2 | 
 3 |     <ion-navbar color="primary">
 4 |         <ion-title>文章详情</ion-title>
 5 |     </ion-navbar>
 6 | 
 7 | </ion-header>
 8 | 
 9 | <ion-content *ngIf="!content">
10 |     <div *ngIf="!hasErr" class="loading">
11 |         <ion-spinner name="bubbles"></ion-spinner>
12 |     </div>
13 |     <div *ngIf="hasErr">
14 |         <div class="loading" (click)="initData()">
15 |             <img src="assets/image/404.png" style="width:50%">
16 |         </div>
17 |     </div>
18 | </ion-content>
19 | <ion-content *ngIf="content" elastic-header>
20 |     <div class="background-image" [ngStyle]="{'background-image':'url(' + content.image + ')'}">
21 |         <div class="background-content">
22 |             <h2>{{content.title}}</h2>
23 |             <p>{{content.image_source}}</p>
24 |         </div>
25 |     </div>
26 |     <div class="zhihu-content" [innerHtml]="content.body"></div>
27 |     <ion-fab right bottom>
28 |         <button ion-fab color="primary" mini><ion-icon name="ios-send"></ion-icon></button>
29 |         <ion-fab-list side="top">
30 |             <button ion-fab (click)="shareContent('friends',content)"><i color="primary" class="iconfont icon-friends"></i></button>
31 |             <button ion-fab (click)="shareContent('weixin',content)"><i color="primary" class="iconfont icon-weixin"></i></button>
32 |             <button ion-fab (click)="shareContent('Qzone',content)"><i color="primary" class="iconfont icon-Qzone"></i></button>
33 |             <button ion-fab (click)="shareContent('QQ',content)"><i color="primary" class="iconfont icon-QQ"></i></button>
34 |         </ion-fab-list>
35 |     </ion-fab>
36 | </ion-content>


--------------------------------------------------------------------------------
/src/pages/news-content/news-content.scss:
--------------------------------------------------------------------------------
  1 | .ios,
  2 | .md {
  3 |     page-news-content {
  4 |         .background-image {
  5 |             position: relative;
  6 |             background-image: url(../../assets/image/menu-header-back.jpg);
  7 |             background-size: cover;
  8 |             background-position: center;
  9 |             height: 45vh;
 10 |         }
 11 |         .background-content {
 12 |             position: absolute;
 13 |             width: 100%;
 14 |             bottom: 0;
 15 |             color: #FFF;
 16 |             background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3))
 17 |         }
 18 |         .background-content h2 {
 19 |             margin: 5px 5px 0 5px;
 20 |         }
 21 |         .background-content p {
 22 |             margin: 2px;
 23 |             text-align: right;
 24 |         }
 25 |         .main-content {
 26 |             padding: 20px;
 27 |             background-color: #F4F4F4;
 28 |             position: absolute;
 29 |         }
 30 |         .zhihu-content {
 31 |             article,
 32 |             aside,
 33 |             details,
 34 |             figcaption,
 35 |             figure,
 36 |             footer,
 37 |             header,
 38 |             hgroup,
 39 |             main,
 40 |             nav,
 41 |             section,
 42 |             summary {
 43 |                 display: block;
 44 |             }
 45 |             audio,
 46 |             canvas,
 47 |             video {
 48 |                 display: inline-block;
 49 |             }
 50 |             audio:not([controls]) {
 51 |                 display: none;
 52 |                 height: 0;
 53 |             }
 54 |             html {
 55 |                 font-family: sans-serif;
 56 |                 -webkit-text-size-adjust: 100%;
 57 |             }
 58 |             body {
 59 |                 font-family: 'Helvetica Neue', Helvetica, Arial, Sans-serif;
 60 |                 background: #fff;
 61 |                 padding-top: 0;
 62 |                 margin: 0;
 63 |             }
 64 |             a:focus {
 65 |                 outline: thin dotted;
 66 |             }
 67 |             a:active,
 68 |             a:hover {
 69 |                 outline: 0;
 70 |             }
 71 |             h1 {
 72 |                 margin: .67em 0;
 73 |             }
 74 |             h1,
 75 |             h2,
 76 |             h3,
 77 |             h4,
 78 |             h5,
 79 |             h6 {
 80 |                 font-size: 16px;
 81 |             }
 82 |             abbr[title] {
 83 |                 border-bottom: 1px dotted;
 84 |             }
 85 |             hr {
 86 |                 box-sizing: content-box;
 87 |                 height: 0;
 88 |             }
 89 |             mark {
 90 |                 background: #ff0;
 91 |                 color: #000;
 92 |             }
 93 |             code,
 94 |             kbd,
 95 |             pre,
 96 |             samp {
 97 |                 font-family: monospace, serif;
 98 |                 font-size: 1em;
 99 |             }
100 |             pre {
101 |                 white-space: pre-wrap;
102 |             }
103 |             q {
104 |                 quotes: \201C\201D\2018\2019;
105 |             }
106 |             small {
107 |                 font-size: 80%;
108 |             }
109 |             sub,
110 |             sup {
111 |                 font-size: 75%;
112 |                 line-height: 0;
113 |                 position: relative;
114 |                 vertical-align: baseline;
115 |             }
116 |             sup {
117 |                 top: -0.5em;
118 |             }
119 |             sub {
120 |                 bottom: -0.25em;
121 |             }
122 |             img {
123 |                 border: 0;
124 |                 vertical-align: middle;
125 |                 color: transparent;
126 |                 font-size: 0;
127 |             }
128 |             svg:not(:root) {
129 |                 overflow: hidden;
130 |             }
131 |             figure {
132 |                 margin: 0;
133 |             }
134 |             fieldset {
135 |                 border: 1px solid silver;
136 |                 margin: 0 2px;
137 |                 padding: .35em .625em .75em;
138 |             }
139 |             legend {
140 |                 border: 0;
141 |                 padding: 0;
142 |             }
143 |             table {
144 |                 border-collapse: collapse;
145 |                 border-spacing: 0;
146 |                 overflow: hidden;
147 |             }
148 |             a {
149 |                 text-decoration: none;
150 |             }
151 |             blockquote {
152 |                 border-left: 3px solid #D0E5F2;
153 |                 font-style: normal;
154 |                 display: block;
155 |                 vertical-align: baseline;
156 |                 font-size: 100%;
157 |                 margin: .5em 0;
158 |                 padding: 0 0 0 1em;
159 |             }
160 |             ul,
161 |             ol {
162 |                 padding-left: 20px;
163 |             }
164 |             .main-wrap {
165 |                 max-width: 100%;
166 |                 min-width: 300px;
167 |                 margin: 0 auto;
168 |             }
169 |             .content-wrap {
170 |                 position: absolute;
171 |                 overflow: hidden;
172 |                 background-color: #f9f9f9;
173 |             }
174 |             .content-wrap a {
175 |                 word-break: break-all;
176 |             }
177 |             .headline {
178 |                 border-bottom: 4px solid #f6f6f6;
179 |             }
180 |             .headline-title.onlyheading {
181 |                 margin: 20px 0;
182 |             }
183 |             .headline img {
184 |                 max-width: 100%;
185 |                 vertical-align: top;
186 |             }
187 |             .headline-background-link {
188 |                 line-height: 2em;
189 |                 position: relative;
190 |                 display: block;
191 |                 padding: 20px 45px 20px 20px !important;
192 |             }
193 |             .icon-arrow-right {
194 |                 position: absolute;
195 |                 top: 50%;
196 |                 right: 20px;
197 |                 background-image: url(http://static.daily.zhihu.com/img/share-icons.png);
198 |                 background-repeat: no-repeat;
199 |                 display: inline-block;
200 |                 vertical-align: middle;
201 |                 background-position: -70px -20px;
202 |                 width: 10px;
203 |                 height: 15px;
204 |                 margin-top: -7.5px;
205 |             }
206 |             .headline-background .heading {
207 |                 color: #999;
208 |                 font-size: 15px!important;
209 |                 margin-bottom: 8px;
210 |                 line-height: 1em;
211 |             }
212 |             .headline-background .heading-content {
213 |                 color: #444;
214 |                 font-size: 17px!important;
215 |                 line-height: 1.2em;
216 |             }
217 |             .headline-title {
218 |                 line-height: 1.2em;
219 |                 color: #000;
220 |                 font-size: 22px;
221 |                 margin: 20px 0 10px;
222 |                 padding: 0 20px!important;
223 |                 font-weight: bold;
224 |             }
225 |             .meta {
226 |                 white-space: nowrap;
227 |                 text-overflow: ellipsis;
228 |                 overflow: hidden;
229 |                 font-size: 16px;
230 |                 color: #b8b8b8;
231 |             }
232 |             .meta .source-icon {
233 |                 width: 20px;
234 |                 height: 20px;
235 |                 margin-right: 4px;
236 |             }
237 |             .meta .time {
238 |                 float: right;
239 |                 margin-top: 2px;
240 |             }
241 |             .content {
242 |                 color: #444;
243 |                 line-height: 1.6em;
244 |                 font-size: 17px;
245 |                 margin: 10px 0 20px;
246 |             }
247 |             .content img {
248 |                 max-width: 100%;
249 |                 display: block;
250 |                 margin: 30px auto;
251 |             }
252 |             .content img+img {
253 |                 margin-top: 15px;
254 |             }
255 |             .content img[src*="zhihu.com/equation"] {
256 |                 display: inline-block;
257 |                 margin: 0 3px;
258 |             }
259 |             .content a {
260 |                 color: #259;
261 |             }
262 |             .content a:hover {
263 |                 text-decoration: underline;
264 |             }
265 |             .view-more {
266 |                 margin-bottom: 25px;
267 |                 text-align: center;
268 |             }
269 |             .view-more a {
270 |                 font-size: 16px;
271 |                 display: inline-block;
272 |                 width: 125px;
273 |                 height: 30px;
274 |                 line-height: 30px;
275 |                 background: #f0f0f0;
276 |                 color: #B8B8B8;
277 |             }
278 |             .question {
279 |                 overflow: hidden;
280 |                 padding: 0 20px!important;
281 |             }
282 |             .question+.question {
283 |                 border-top: 5px solid #f6f6f6;
284 |             }
285 |             .question-title {
286 |                 line-height: 1.4em;
287 |                 color: #000;
288 |                 font-weight: 700;
289 |                 font-size: 18px;
290 |                 margin: 20px 0;
291 |             }
292 |             .meta .author {
293 |                 color: #444;
294 |                 font-weight: 700;
295 |             }
296 |             .answer+.answer {
297 |                 border-top: 2px solid #f6f6f6;
298 |                 padding-top: 20px;
299 |             }
300 |             .footer {
301 |                 text-align: center;
302 |                 color: #b8b8b8;
303 |                 font-size: 13px;
304 |                 padding: 20px 0;
305 |             }
306 |             .footer a {
307 |                 color: #b8b8b8;
308 |             }
309 |             .question .view-more a {
310 |                 width: 100%;
311 |                 display: block;
312 |             }
313 |             .hot-comment {
314 |                 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
315 |             }
316 |             .comment-label {
317 |                 font-size: 16px;
318 |                 color: #333;
319 |                 line-height: 1.5em;
320 |                 font-weight: 700;
321 |                 border-top: 1px solid #eee;
322 |                 border-bottom: 1px solid #eee;
323 |                 margin: 0;
324 |                 padding: 9px 20px;
325 |             }
326 |             .comment-list {
327 |                 margin-bottom: 20px;
328 |             }
329 |             .comment-item {
330 |                 font-size: 15px;
331 |                 color: #666;
332 |                 border-bottom: 1px solid #eee;
333 |                 padding: 15px 20px;
334 |             }
335 |             .comment-meta {
336 |                 position: relative;
337 |                 margin-bottom: 10px;
338 |             }
339 |             .comment-meta .author {
340 |                 vertical-align: middle;
341 |                 color: #444;
342 |             }
343 |             .comment-meta .vote {
344 |                 position: absolute;
345 |                 color: #b8b8b8;
346 |                 font-size: 12px;
347 |                 right: 0;
348 |             }
349 |             .night .comment-label {
350 |                 color: #b8b8b8;
351 |                 border-top: 1px solid #303030;
352 |                 border-bottom: 1px solid #303030;
353 |             }
354 |             .night .comment-item {
355 |                 color: #7f7f7f;
356 |                 border-bottom: 1px solid #303030;
357 |             }
358 |             .icon-vote,
359 |             .icon-voted {
360 |                 background-repeat: no-repeat;
361 |                 display: inline-block;
362 |                 vertical-align: 0;
363 |                 width: 11px;
364 |                 height: 12px;
365 |                 margin-right: 4px;
366 |                 background-image: url(http://static.daily.zhihu.com/img/app/Comment_Vote.png) !important;
367 |             }
368 |             .icon-voted {
369 |                 background-image: url(http://static.daily.zhihu.com/img/app/Comment_Voted.png) !important;
370 |             }
371 |             .night .icon-vote {
372 |                 background-image: url(http://static.daily.zhihu.com/img/app/Dark_Comment_Vote.png) !important;
373 |             }
374 |             .img-wrap .headline-title {
375 |                 bottom: 5px;
376 |             }
377 |             .img-wrap .img-source {
378 |                 right: 10px!important;
379 |                 font-size: 9px;
380 |             }
381 |             .global-header {
382 |                 position: static;
383 |             }
384 |             .button {
385 |                 width: 60px;
386 |             }
387 |             .button i {
388 |                 margin-right: 0;
389 |             }
390 |             .from-column {
391 |                 width: 280px;
392 |                 line-height: 30px;
393 |                 height: 30px;
394 |                 padding-left: 90px;
395 |                 color: #2aacec;
396 |                 background-image: url(http://static.daily.zhihu.com/img/News_Column_Entrance.png);
397 |                 box-sizing: border-box;
398 |                 margin: 0 20px 20px;
399 |             }
400 |             .from-column:active {
401 |                 background-image: url(http://static.daily.zhihu.com/img/News_Column_Entrance_Highlight.png);
402 |             }
403 |             .night .headline {
404 |                 border-bottom: 4px solid #303030;
405 |             }
406 |             .night img {
407 |                 -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.7)), to(rgba(0, 0, 0, 0.7)));
408 |             }
409 |             body.night,
410 |             .night .content-wrap {
411 |                 background: #343434;
412 |             }
413 |             .night .answer+.answer {
414 |                 border-top: 2px solid #303030;
415 |             }
416 |             .night .question+.question {
417 |                 border-top: 4px solid #303030;
418 |             }
419 |             .night .view-more a {
420 |                 background: #292929;
421 |                 color: #666;
422 |             }
423 |             .night .icon-arrow-right {
424 |                 background-image: url(http://static.daily.zhihu.com/img/share-icons.png);
425 |                 background-repeat: no-repeat;
426 |                 display: inline-block;
427 |                 vertical-align: middle;
428 |                 background-position: -70px -35px;
429 |                 width: 10px;
430 |                 height: 15px;
431 |             }
432 |             .night blockquote,
433 |             .night sup {
434 |                 border-left: 3px solid #666;
435 |             }
436 |             .night .content a {
437 |                 color: #698ebf;
438 |             }
439 |             .night .from-column {
440 |                 color: #2b82ac;
441 |                 background-image: url(http://static.daily.zhihu.com/img/Dark_News_Column_Entrance.png);
442 |             }
443 |             .night .from-column:active {
444 |                 background-image: url(http://static.daily.zhihu.com/img/Dark_News_Column_Entrance_Highlight.png);
445 |             }
446 |             .large .question-title {
447 |                 font-size: 24px;
448 |             }
449 |             .large .meta {
450 |                 font-size: 18px;
451 |             }
452 |             .large .content {
453 |                 font-size: 20px;
454 |             }
455 |             .large blockquote,
456 |             .large sup {
457 |                 line-height: 1.6;
458 |             }
459 |             .meta .meta-item {
460 |                 -o-text-overflow: ellipsis;
461 |                 width: 39%;
462 |                 overflow: hidden;
463 |                 white-space: nowrap;
464 |                 text-overflow: ellipsis;
465 |                 display: inline-block;
466 |                 color: #929292;
467 |                 margin-right: 7px;
468 |             }
469 |             .headline .meta {
470 |                 white-space: nowrap;
471 |                 text-overflow: ellipsis;
472 |                 overflow: hidden;
473 |                 font-size: 11px;
474 |                 color: #b8b8b8;
475 |                 margin: 15px 0;
476 |                 padding: 0 20px;
477 |             }
478 |             .headline .meta a,
479 |             .headline .meta a:hover {
480 |                 padding-left: 1em;
481 |                 margin-top: 2px;
482 |                 float: right;
483 |                 font-size: 11px;
484 |                 color: #0066cf;
485 |                 text-decoration: none;
486 |             }
487 |             .highlight {
488 |                 width: auto;
489 |                 overflow: auto;
490 |                 word-wrap: normal;
491 |             }
492 |             .highlight::-webkit-scrollbar {
493 |                 width: 6px;
494 |                 height: 6px;
495 |             }
496 |             .highlight code {
497 |                 overflow: auto;
498 |             }
499 |             .highlight::-webkit-scrollbar-thumb:horizontal {
500 |                 border-radius: 6px;
501 |                 background-color: rgba(0, 0, 0, .5);
502 |             }
503 |             .highlight::-webkit-scrollbar-thumb:horizontal:hover {
504 |                 background-color: rgba(0, 0, 0, .6);
505 |             }
506 |             .highlight pre {
507 |                 margin: 0;
508 |                 white-space: pre;
509 |             }
510 |             .highlight .hll {
511 |                 background-color: #ffc;
512 |             }
513 |             .highlight .err {
514 |                 color: #a61717;
515 |                 background-color: #e3d2d2;
516 |             }
517 |             .highlight .cp {
518 |                 color: #999;
519 |                 font-weight: 700;
520 |             }
521 |             .highlight .cs {
522 |                 color: #999;
523 |                 font-weight: 700;
524 |                 font-style: italic;
525 |             }
526 |             .highlight .gd {
527 |                 color: #000;
528 |                 background-color: #fdd;
529 |             }
530 |             .highlight .gi {
531 |                 color: #000;
532 |                 background-color: #dfd;
533 |             }
534 |             .highlight .gu {
535 |                 color: #aaa;
536 |             }
537 |             .highlight .ni {
538 |                 color: purple;
539 |             }
540 |             .highlight .nt {
541 |                 color: navy;
542 |             }
543 |             .highlight .w {
544 |                 color: #bbb;
545 |             }
546 |             .highlight .sr {
547 |                 color: olive;
548 |             }
549 |             [hidden],
550 |             .button span {
551 |                 display: none;
552 |             }
553 |             b,
554 |             strong,
555 |             .highlight .k,
556 |             .highlight .o,
557 |             .highlight .gs,
558 |             .highlight .kc,
559 |             .highlight .kd,
560 |             .highlight .kn,
561 |             .highlight .kp,
562 |             .highlight .kr,
563 |             .highlight .ow {
564 |                 font-weight: 700;
565 |             }
566 |             dfn,
567 |             .highlight .ge {
568 |                 font-style: italic;
569 |             }
570 |             .meta span,
571 |             .meta .source {
572 |                 vertical-align: middle;
573 |             }
574 |             .meta .avatar,
575 |             .comment-meta .avatar {
576 |                 width: 20px;
577 |                 height: 20px;
578 |                 border-radius: 2px;
579 |                 margin-right: 5px;
580 |             }
581 |             .meta .bio,
582 |             .highlight .gh,
583 |             .highlight .bp {
584 |                 color: #999;
585 |             }
586 |             .night .comment-meta .author,
587 |             .night .content,
588 |             .night .meta .author,
589 |             .highlight .go {
590 |                 color: #888;
591 |             }
592 |             .night .headline-title,
593 |             .night .headline-background .heading-content,
594 |             .night .question-title {
595 |                 color: #B8B8B8;
596 |             }
597 |             .highlight .c,
598 |             .highlight .cm,
599 |             .highlight .c1 {
600 |                 color: #998;
601 |                 font-style: italic;
602 |             }
603 |             .highlight .gr,
604 |             .highlight .gt {
605 |                 color: #a00;
606 |             }
607 |             .highlight .gp,
608 |             .highlight .nn {
609 |                 color: #555;
610 |             }
611 |             .highlight .kt,
612 |             .highlight .nc {
613 |                 color: #458;
614 |                 font-weight: 700;
615 |             }
616 |             .highlight .m,
617 |             .highlight .mf,
618 |             .highlight .mh,
619 |             .highlight .mi,
620 |             .highlight .mo,
621 |             .highlight .il {
622 |                 color: #099;
623 |             }
624 |             .highlight .s,
625 |             .highlight .sb,
626 |             .highlight .sc,
627 |             .highlight .sd,
628 |             .highlight .s2,
629 |             .highlight .se,
630 |             .highlight .sh,
631 |             .highlight .si,
632 |             .highlight .sx,
633 |             .highlight .s1,
634 |             .highlight .ss {
635 |                 color: #d32;
636 |             }
637 |             .highlight .na,
638 |             .highlight .nb,
639 |             .highlight .no,
640 |             .highlight .nv,
641 |             .highlight .vc,
642 |             .highlight .vg,
643 |             .highlight .vi {
644 |                 color: teal;
645 |             }
646 |             .highlight .ne,
647 |             .highlight .nf {
648 |                 color: #900;
649 |                 font-weight: 700;
650 |             }
651 |             .answer h1,
652 |             .answer h2,
653 |             .answer h3,
654 |             .answer h4,
655 |             .answer h5 {
656 |                 font-size: 19px;
657 |             }
658 |             @media only screen and (-webkit-min-device-pixel-ratio2),
659 |             only screen and (min-device-pixel-ratio2) {
660 |                 .icon-arrow-right {
661 |                     background-image: url(http://static.daily.zhihu.com/img/share-icons@2x.png);
662 |                     -webkit-background-size: 82px 55px;
663 |                     background-size: 82px 55px;
664 |                 }
665 |                 .icon-vote,
666 |                 .icon-voted {
667 |                     background-image: url(http://static.daily.zhihu.com/img/app/Comment_Vote@2x.png) !important;
668 |                     background-size: 11px 12px;
669 |                 }
670 |                 .icon-voted {
671 |                     background-image: url(http://static.daily.zhihu.com/img/app/Comment_Voted@2x.png) !important;
672 |                 }
673 |                 .night .icon-vote {
674 |                     background-image: url(http://static.daily.zhihu.com/img/app/Dark_Comment_Vote@2x.png) !important;
675 |                 }
676 |                 .from-column {
677 |                     background-image: url(http://static.daily.zhihu.com/img/News_Column_Entrance@2x.png) !important;
678 |                     background-size: 280px 30px;
679 |                 }
680 |                 .from-column:active {
681 |                     background-image: url(http://static.daily.zhihu.com/img/News_Column_Entrance_Highlight@2x.png) !important;
682 |                 }
683 |                 .night .from-column {
684 |                     color: #2b82ac;
685 |                     background-image: url(http://static.daily.zhihu.com/img/Dark_News_Column_Entrance@2x.png) !important;
686 |                 }
687 |                 .night .from-column:active {
688 |                     background-image: url(http://static.daily.zhihu.com/img/Dark_News_Column_Entrance_Highlight@2x.png) !important;
689 |                 }
690 |             }
691 |             .meta .meta-item {
692 |                 width: 39%;
693 |                 overflow: hidden;
694 |                 white-space: nowrap;
695 |                 text-overflow: ellipsis;
696 |                 display: inline-block;
697 |                 color: #929292;
698 |                 margin-right: 7px;
699 |             }
700 |             .headline .meta {
701 |                 white-space: nowrap;
702 |                 text-overflow: ellipsis;
703 |                 overflow: hidden;
704 |                 font-size: 11px;
705 |                 color: #b8b8b8;
706 |                 margin: 20px 0;
707 |                 padding: 0 20px;
708 |             }
709 |             .headline .meta a,
710 |             .headline .meta a:hover {
711 |                 margin-top: 2px;
712 |                 float: right;
713 |                 font-size: 11px;
714 |                 color: #0066cf;
715 |                 text-decoration: none;
716 |             }
717 |             .answer h1,
718 |             .answer h2,
719 |             .answer h3,
720 |             .answer h4,
721 |             .answer h5 {
722 |                 font-size: 19px;
723 |             }
724 |             .origin-source,
725 |             a.origin-source:link {
726 |                 display: block;
727 |                 margin: 25px 0;
728 |                 height: 50px;
729 |                 overflow: hidden;
730 |                 background: #f0f0f0;
731 |                 color: #888;
732 |                 position: relative;
733 |                 -webkit-touch-callout: none;
734 |             }
735 |             .origin-source .source-logo,
736 |             a.origin-source:link .source-logo {
737 |                 float: left;
738 |                 width: 50px;
739 |                 height: 50px;
740 |                 margin-right: 10px;
741 |             }
742 |             .origin-source .text,
743 |             a.origin-source:link .text {
744 |                 line-height: 50px;
745 |                 height: 50px;
746 |                 font-size: 13px;
747 |             }
748 |             .origin-source.with-link .text {
749 |                 color: #333;
750 |             }
751 |             .origin-source.with-link:after {
752 |                 display: block;
753 |                 position: absolute;
754 |                 border-color: transparent transparent transparent #f0f0f0;
755 |                 border-width: 7px;
756 |                 border-style: solid;
757 |                 height: 0;
758 |                 width: 0;
759 |                 top: 18px;
760 |                 right: 4px;
761 |                 line-height: 0;
762 |                 content: "";
763 |             }
764 |             .origin-source.with-link:before {
765 |                 display: block;
766 |                 height: 0;
767 |                 width: 0;
768 |                 position: absolute;
769 |                 top: 18px;
770 |                 right: 3px;
771 |                 border-color: transparent transparent transparent #000;
772 |                 border-width: 7px;
773 |                 border-style: solid;
774 |                 line-height: 0;
775 |                 content: "";
776 |             }
777 |             .origin-source-wrap {
778 |                 position: relative;
779 |                 background: #f0f0f0;
780 |             }
781 |             .origin-source-wrap .focus-link {
782 |                 position: absolute;
783 |                 right: 0;
784 |                 top: 0;
785 |                 width: 45px;
786 |                 color: #00a2ed;
787 |                 height: 50px;
788 |                 display: none;
789 |                 text-align: center;
790 |                 font-size: 12px;
791 |                 -webkit-touch-callout: none;
792 |             }
793 |             .origin-source-wrap .focus-link .btn-label {
794 |                 text-align: center;
795 |                 display: block;
796 |                 margin-top: 8px;
797 |                 border-left: solid 1px #ccc;
798 |                 height: 34px;
799 |                 line-height: 34px;
800 |             }
801 |             .origin-source-wrap.unfocused .focus-link {
802 |                 display: block;
803 |             }
804 |             .origin-source-wrap.unfocused .origin-source:before,
805 |             .origin-source-wrap.unfocused .origin-source:after {
806 |                 display: none;
807 |             }
808 |             .night .origin-source-wrap {
809 |                 background: #292929;
810 |             }
811 |             .night .origin-source-wrap .focus-link {
812 |                 color: #116f9e;
813 |             }
814 |             .night .origin-source-wrap .btn-label {
815 |                 border-left: solid 1px #3f3f3f;
816 |             }
817 |             .night .origin-source,
818 |             .night .origin-source.with-link {
819 |                 background: #292929;
820 |                 color: #666;
821 |             }
822 |             .night .origin-source .text,
823 |             .night .origin-source.with-link .text {
824 |                 color: #666;
825 |             }
826 |             .night .origin-source.with-link:after {
827 |                 border-color: transparent transparent transparent #292929;
828 |             }
829 |             .night .origin-source.with-link:before {
830 |                 border-color: transparent transparent transparent #666;
831 |             }
832 |             /* ==== */
833 |             .question-title {
834 |                 color: #494b4d;
835 |             }
836 |             blockquote {
837 |                 color: #9da3a6;
838 |                 border-left: 3px solid #Dfe3e6;
839 |             }
840 |             .content a {
841 |                 color: #4786b3;
842 |             }
843 |             .content {
844 |                 font-size: 17px;
845 |                 color: #616466;
846 |             }
847 |             .content-wrap {
848 |                 background: #fff;
849 |             }
850 |             hr {
851 |                 margin: 30px 0;
852 |                 border-top-width: 0;
853 |             }
854 |             p {
855 |                 margin: 20px 0 !important;
856 |             }
857 |             .dudu-night .content {
858 |                 color: #797b80;
859 |             }
860 |             .dudu-night hr {
861 |                 color: #27282b;
862 |                 border-color: #27282b;
863 |             }
864 |             .dudu-night .meta .author,
865 |             .dudu-night .meta .bio {
866 |                 color: #555659;
867 |             }
868 |             .dudu-night .headline-title,
869 |             .dudu-night .headline-background .heading-content,
870 |             .dudu-night .question-title {
871 |                 color: #919499;
872 |             }
873 |             .dudu-night .headline {
874 |                 border-bottom: none;
875 |             }
876 |             .dudu-night img {
877 |                 -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.7)), to(rgba(0, 0, 0, 0.7)));
878 |             }
879 |             body.dudu-night,
880 |             .dudu-night .content-wrap {
881 |                 background: #1d1e1f;
882 |             }
883 |             .dudu-night .answer+.answer {
884 |                 border-top: 2px solid #27282b;
885 |             }
886 |             .dudu-night .question+.question {
887 |                 border-top: 4px solid #27282b;
888 |             }
889 |             .dudu-night .view-more a {
890 |                 background: #1d1e1f;
891 |                 color: #396280;
892 |             }
893 |             .dudu-night .icon-arrow-right {
894 |                 background-image: url(http://static.daily.zhihu.com/img/share-icons.png);
895 |                 background-repeat: no-repeat;
896 |                 display: inline-block;
897 |                 vertical-align: middle;
898 |                 background-position: -70px -35px;
899 |                 width: 10px;
900 |                 height: 15px;
901 |             }
902 |             .dudu-night blockquote,
903 |             .dudu-night sup {
904 |                 border-left: 3px solid #2e3033;
905 |                 color: #555659;
906 |             }
907 |             .dudu-night .content a {
908 |                 color: #396280;
909 |             }
910 |             .dudu-night img {
911 |                 opacity: 0.7;
912 |             }
913 |             .dudu-night .from-column {
914 |                 color: #2b82ac;
915 |                 background-image: url(http://static.daily.zhihu.com/img/Dark_News_Column_Entrance.png);
916 |             }
917 |             .dudu-night .from-column:active {
918 |                 background-image: url(http://static.daily.zhihu.com/img/Dark_News_Column_Entrance_Highlight.png);
919 |             }
920 |             //禁用头部下面的分隔线
921 |             .dudu .headline {
922 |                 border-bottom: none;
923 |             }
924 |             .dudu-night .origin-source,
925 |             .dudu-night a.origin-source:link {
926 |                 background: #222324;
927 |             }
928 |             .dudu-night .origin-source.with-link .text {
929 |                 color: #797b80;
930 |             }
931 |             .dudu-night .origin-source.with-link:after {
932 |                 border-color: transparent transparent transparent #797b80;
933 |             }
934 |         }
935 |     }
936 | }


--------------------------------------------------------------------------------
/src/pages/news-content/news-content.ts:
--------------------------------------------------------------------------------
  1 | import { Component } from '@angular/core';
  2 | import { NavController, NavParams, MenuController, ToastController } from 'ionic-angular';
  3 | import { Data } from '../../providers/data';
  4 | declare var YCQQ, Wechat;
  5 | @Component({
  6 |   selector: 'page-news-content',
  7 |   templateUrl: 'news-content.html'
  8 | })
  9 | export class NewsContentPage {
 10 |   id: String;
 11 |   content: any;
 12 |   hasErr: any;
 13 |   constructor(public navCtrl: NavController, public navParams: NavParams, public data: Data,
 14 |     public menuCtrl: MenuController, public toastCtrl: ToastController) {
 15 |     this.id = this.navParams.get('id');
 16 |     this.menuCtrl.swipeEnable(false);
 17 |   }
 18 |   ionViewWillLeave() {
 19 |     this.menuCtrl.swipeEnable(true);
 20 |   }
 21 | 
 22 |   ionViewDidLoad() {
 23 |     this.initData();
 24 |   }
 25 |   initData() {
 26 |     this.hasErr = null;
 27 |     this.data.getZhihuContent(this.id).then(res => {
 28 |       this.content = res;
 29 |     }, err => {
 30 |       this.hasErr = err;
 31 |     })
 32 |   }
 33 |   shareContent(type, content) {
 34 |     let that = this;
 35 |     switch (type) {
 36 |       case 'QQ':
 37 |         let QQ = {
 38 |           url: content.share_url,
 39 |           title: content.title,
 40 |           description: "来自Ion2--基于Ionic2的资讯类APP",
 41 |           imageUrl: content.images[0],
 42 |           appName: "Ion2"
 43 |         };
 44 |         YCQQ.shareToQQ(function () {
 45 |           that.showToast('分享成功');
 46 |         }, function (failReason) {
 47 |           that.showToast('分享失败');
 48 |         }, QQ);
 49 |         break;
 50 |       case 'Qzone':
 51 |         let Qzone = {
 52 |           url: content.share_url,
 53 |           title: content.title,
 54 |           description: "来自Ion2--基于Ionic2的资讯类APP",
 55 |           imageUrl: content.images,
 56 |           appName: "Ion2"
 57 |         };
 58 |         YCQQ.shareToQzone(function () {
 59 |           that.showToast('分享成功');
 60 |         }, function (failReason) {
 61 |           that.showToast('分享失败');
 62 |         }, Qzone);
 63 |         break;
 64 |       case 'weixin':
 65 |         Wechat.share({
 66 |           message: {
 67 |             title: content.title,
 68 |             description: "来自Ion2--基于Ionic2的资讯类APP",
 69 |             thumb: content.images[0],
 70 |             mediaTagName: "TEST-TAG-001",
 71 |             messageExt: "来自Ion2--基于Ionic2的资讯类APP",
 72 |             messageAction: "<action>dotalist</action>",
 73 |             media: {
 74 |               type: Wechat.Type.WEBPAGE,
 75 |               webpageUrl: content.share_url
 76 |             }
 77 |           },
 78 |           scene: Wechat.Scene.SESSION
 79 |         }, function () {
 80 |           that.showToast('分享成功');
 81 |         }, function (failReason) {
 82 |           that.showToast('分享失败');
 83 |         });
 84 |         break;
 85 |       case 'friends':
 86 |         Wechat.share({
 87 |           message: {
 88 |             title: content.title,
 89 |             description: "来自Ion2--基于Ionic2的资讯类APP",
 90 |             thumb: content.images[0],
 91 |             mediaTagName: "TEST-TAG-001",
 92 |             messageExt: "来自Ion2--基于Ionic2的资讯类APP",
 93 |             messageAction: "<action>dotalist</action>",
 94 |             media: {
 95 |               type: Wechat.Type.WEBPAGE,
 96 |               webpageUrl: content.share_url
 97 |             }
 98 |           },
 99 |           scene: Wechat.Scene.TIMELINE
100 |         }, function () {
101 |           that.showToast('分享成功');
102 |         }, function (failReason) {
103 |           that.showToast('分享失败');
104 |         });
105 |         break;
106 |     }
107 |   }
108 |   showToast(msg) {
109 |     let toast = this.toastCtrl.create({
110 |       message: msg,
111 |       duration: 2000
112 |     });
113 |     toast.present();
114 |   }
115 | }
116 | 


--------------------------------------------------------------------------------
/src/pages/news/news.html:
--------------------------------------------------------------------------------
 1 | <ion-header>
 2 |     <ion-navbar color="primary">
 3 |         <button ion-button menuToggle>
 4 |       <ion-icon name="menu"></ion-icon>
 5 |     </button>
 6 |         <ion-title>阅读</ion-title>
 7 |     </ion-navbar>
 8 | </ion-header>
 9 | <ion-content>
10 |     <div *ngIf="hasErr">
11 |         <div class="loading" (click)="initData()">
12 |             <img src="assets/image/404.png" style="width:50%">
13 |         </div>
14 |     </div>
15 |     <div *ngIf="!hasErr">
16 |         <div *ngIf="!dataFinish" class="loading">
17 |             <ion-spinner name="bubbles"></ion-spinner>
18 |         </div>
19 |         <div *ngIf="dataFinish">
20 |             <ion-slides autoplay="2000" loop="true" pager="true">
21 |                 <ion-slide *ngFor="let topic of zhihuList.top_stories" (click)="pushContent(topic.id)">
22 |                     <div class="zhihu-header" [ngStyle]="{'background-image':'url(' + topic.image + ')'}">
23 |                         <h2>{{topic.title}}</h2>
24 |                     </div>
25 |                 </ion-slide>
26 |             </ion-slides>
27 |             <ion-list>
28 |                 <ion-card *ngFor="let item of zhihuList.stories">
29 |                     <ion-item text-wrap (click)="pushContent(item.id)">
30 |                         <ion-thumbnail item-right>
31 |                             <img [src]="item.images[0]">
32 |                         </ion-thumbnail>
33 |                         <h2>{{item.title}}</h2>
34 |                     </ion-item>
35 |                 </ion-card>
36 | 
37 |             </ion-list>
38 |             <ion-infinite-scroll (ionInfinite)="getMoreZhihuList($event)">
39 |                 <ion-infinite-scroll-content loadingText="加载中..."></ion-infinite-scroll-content>
40 |             </ion-infinite-scroll>
41 |         </div>
42 |     </div>
43 | </ion-content>


--------------------------------------------------------------------------------
/src/pages/news/news.scss:
--------------------------------------------------------------------------------
 1 | .ios,
 2 | .md {
 3 |     page-news {
 4 |         .zhihu-header {
 5 |             background-image: url(../../assets/image/menu-header-back.jpg);
 6 |             background-size: cover;
 7 |             background-position: center;
 8 |             height: 35vh;
 9 |         }
10 |         .zhihu-header h2 {
11 |             position: absolute;
12 |             width: 100%;
13 |             margin: 0;
14 |             bottom: 0;
15 |             font-weight: bold;
16 |             text-align: start;
17 |             color: #FFF;
18 |             background: linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
19 |             padding: 0 10px;
20 |         }
21 |     }
22 | }


--------------------------------------------------------------------------------
/src/pages/news/news.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | import { NavController } from 'ionic-angular';
 3 | import { NewsContentPage } from '../news-content/news-content'
 4 | import { Data } from '../../providers/data';
 5 | 
 6 | @Component({
 7 |   selector: 'page-news',
 8 |   templateUrl: 'news.html'
 9 | })
10 | export class NewsPage {
11 |   zhihuList: any;
12 |   dataFinish: boolean = false;
13 |   date: Date = new Date();
14 |   hasErr: boolean = false;
15 |   constructor(public navCtrl: NavController, public data: Data) {
16 | 
17 |   }
18 |   ionViewDidLoad() {
19 |     setTimeout(() => {
20 |       this.initData();
21 |     }, 1000)
22 |   }
23 |   initData() {
24 |     this.hasErr = false;
25 |     this.dataFinish = false;
26 |     this.data.getZhihuLatest().then(res => {
27 |       this.zhihuList = res;
28 |       this.dataFinish = true;
29 |     }, err => {
30 |       this.hasErr = true;
31 |     })
32 |   }
33 |   getMoreZhihuList(event) {
34 |     let year = this.date.getFullYear();
35 |     let month = (this.date.getMonth() + 1).toString();
36 |     let day = this.date.getDate().toString();
37 |     if (day.length < 2) day = '0' + day;
38 |     if (month.length < 2) month = '0' + month;
39 | 
40 |     this.data.getZhihuBefore('' + year + month + day).then((res) => {
41 |       this.zhihuList.stories = this.zhihuList.stories.concat(res);
42 |       this.date = new Date(this.date.getTime() - 1 * 24 * 60 * 60 * 1000)
43 |       event.complete();
44 |     })
45 |   }
46 |   pushContent(id) {
47 |     this.navCtrl.push(NewsContentPage, { id: id });
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/src/pages/tabs/tabs.html:
--------------------------------------------------------------------------------
1 | <ion-tabs #mainTabs>
2 |     <ion-tab [root]="tab1Root" tabTitle="阅读" tabIcon="md-book"></ion-tab>
3 |     <ion-tab [root]="tab2Root" tabTitle="电影资讯" tabIcon="md-film"></ion-tab>
4 |     <ion-tab [root]="tab3Root" tabTitle="设置" tabIcon="md-settings"></ion-tab>
5 | </ion-tabs>


--------------------------------------------------------------------------------
/src/pages/tabs/tabs.ts:
--------------------------------------------------------------------------------
 1 | import { Component,ViewChild } from '@angular/core';
 2 | import { Tabs } from 'ionic-angular';
 3 | import { NewsPage } from '../news/news';
 4 | import { MoviePage } from '../movie/movie';
 5 | import { AboutPage } from '../about/about';
 6 | 
 7 | @Component({
 8 |   templateUrl: 'tabs.html'
 9 | })
10 | export class TabsPage {
11 |   @ViewChild('mainTabs') tabs:Tabs;
12 |   // this tells the tabs component which Pages
13 |   // should be each tab's root Page
14 |   tab1Root: any = NewsPage;
15 |   tab2Root: any = MoviePage;
16 |   tab3Root: any = AboutPage;
17 | 
18 |   constructor() {
19 | 
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/src/providers/data.ts:
--------------------------------------------------------------------------------
  1 | import { Injectable } from '@angular/core';
  2 | import { Http } from '@angular/http';
  3 | import 'rxjs/add/operator/map';
  4 | 
  5 | /*
  6 |   Generated class for the Data provider.
  7 | 
  8 |   See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  9 |   for more info on providers and Angular 2 DI.
 10 | */
 11 | @Injectable()
 12 | export class Data {
 13 |   topData: Array<any>;
 14 |   movieData: Array<any>;
 15 |   data: any;
 16 |   constructor(public http: Http) {
 17 | 
 18 |   }
 19 | 
 20 |   getAll() {
 21 |     return new Promise((resolve, reject) => {
 22 |       this.movieData = [];
 23 |       this.getTopData(0, 5).then(res => {
 24 |         this.movieData.push({ title: 'Top250', content: res });
 25 |         this.getInTheaters(0, 5).then(res => {
 26 |           this.movieData.push({ title: '正在热映', content: res });
 27 |           this.getComingSoon(0, 5).then(res => {
 28 |             this.movieData.push({ title: '即将上映', content: res });
 29 |             resolve(this.movieData);
 30 |           }, err => {
 31 |             reject(err);
 32 |           })
 33 |         }, err => {
 34 |           reject(err);
 35 |         })
 36 |       }, err => {
 37 |         reject(err);
 38 |       })
 39 |     })
 40 |   }
 41 | 
 42 | 
 43 |   getTopData(start, count) {
 44 |     return new Promise((resolve, reject) => {
 45 |       this.http.get('https://api.douban.com/v2/movie/top250?start=' + start + '&count=' + count).subscribe(res => {
 46 |         this.topData = res.json().subjects;
 47 |         resolve(this.topData);
 48 |       }, err => {
 49 |         reject(err);
 50 |       });
 51 |     })
 52 |   }
 53 |   getInTheaters(start, count) {
 54 |     return new Promise((resolve, reject) => {
 55 |       this.http.get('https://api.douban.com/v2/movie/in_theaters?start=' + start + '&count=' + count).subscribe(res => {
 56 |         this.topData = res.json().subjects;
 57 |         resolve(this.topData);
 58 |       }, err => {
 59 |         reject(err);
 60 |       });
 61 |     })
 62 |   }
 63 |   getComingSoon(start, count) {
 64 |     return new Promise((resolve, reject) => {
 65 |       this.http.get('https://api.douban.com/v2/movie/coming_soon?start=' + start + '&count=' + count).subscribe(res => {
 66 |         this.topData = res.json().subjects;
 67 |         resolve(this.topData);
 68 |       }, err => {
 69 |         reject(err);
 70 |       });
 71 |     })
 72 |   }
 73 |   getMovieDetail(id) {
 74 |     return new Promise((resolve, reject) => {
 75 |       this.http.get('https://api.douban.com/v2/movie/subject/' + id).subscribe(res => {
 76 |         this.topData = res.json();
 77 |         resolve(this.topData);
 78 |       }, err => {
 79 |         reject(err);
 80 |       });
 81 |     })
 82 |   }
 83 | 
 84 |   getZhihuLatest() {
 85 |     return new Promise((resolve, reject) => {
 86 |       this.http.get('http://news-at.zhihu.com/api/4/news/latest').subscribe(res => {
 87 |         this.data = res.json();
 88 |         resolve(this.data);
 89 |       }, err => {
 90 |         reject(err);
 91 |       });
 92 |     })
 93 |   }
 94 |   getZhihuBefore(date) {
 95 |     return new Promise((resolve, reject) => {
 96 |       this.http.get('http://news-at.zhihu.com/api/4/news/before/' + date).subscribe(res => {
 97 |         this.data = res.json().stories;
 98 |         resolve(this.data);
 99 |       }, err => {
100 |         reject(err);
101 |       });
102 |     })
103 |   }
104 |   getZhihuContent(id) {
105 |     return new Promise((resolve, reject) => {
106 |       this.http.get('http://news-at.zhihu.com/api/4/news/' + id).subscribe(res => {
107 |         this.data = res.json();
108 |         resolve(this.data);
109 |       }, err => {
110 |         reject(err);
111 |       });
112 |     })
113 |   }
114 | }
115 | 


--------------------------------------------------------------------------------
/src/service-worker.js:
--------------------------------------------------------------------------------
 1 | // tick this to make the cache invalidate and update
 2 | const CACHE_VERSION = 1;
 3 | const CURRENT_CACHES = {
 4 |   'read-through': 'read-through-cache-v' + CACHE_VERSION
 5 | };
 6 | 
 7 | self.addEventListener('activate', (event) => {
 8 |   // Delete all caches that aren't named in CURRENT_CACHES.
 9 |   // While there is only one cache in this example, the same logic will handle the case where
10 |   // there are multiple versioned caches.
11 |   const expectedCacheNames = Object.keys(CURRENT_CACHES).map((key) => {
12 |     return CURRENT_CACHES[key];
13 |   });
14 | 
15 |   event.waitUntil(
16 |     caches.keys().then((cacheNames) => {
17 |       return Promise.all(
18 |         cacheNames.map((cacheName) => {
19 |           if (expectedCacheNames.indexOf(cacheName) === -1) {
20 |             // If this cache name isn't present in the array of "expected" cache names, then delete it.
21 |             console.log('Deleting out of date cache:', cacheName);
22 |             return caches.delete(cacheName);
23 |           }
24 |         })
25 |       );
26 |     })
27 |   );
28 | });
29 | 
30 | // This sample illustrates an aggressive approach to caching, in which every valid response is
31 | // cached and every request is first checked against the cache.
32 | // This may not be an appropriate approach if your web application makes requests for
33 | // arbitrary URLs as part of its normal operation (e.g. a RSS client or a news aggregator),
34 | // as the cache could end up containing large responses that might not end up ever being accessed.
35 | // Other approaches, like selectively caching based on response headers or only caching
36 | // responses served from a specific domain, might be more appropriate for those use cases.
37 | self.addEventListener('fetch', (event) => {
38 | 
39 |   event.respondWith(
40 |     caches.open(CURRENT_CACHES['read-through']).then((cache) => {
41 |       return cache.match(event.request).then((response) => {
42 |         if (response) {
43 |           // If there is an entry in the cache for event.request, then response will be defined
44 |           // and we can just return it.
45 | 
46 |           return response;
47 |         }
48 | 
49 |         // Otherwise, if there is no entry in the cache for event.request, response will be
50 |         // undefined, and we need to fetch() the resource.
51 |         console.log(' No response for %s found in cache. ' +
52 |           'About to fetch from network...', event.request.url);
53 | 
54 |         // We call .clone() on the request since we might use it in the call to cache.put() later on.
55 |         // Both fetch() and cache.put() "consume" the request, so we need to make a copy.
56 |         // (see https://fetch.spec.whatwg.org/#dom-request-clone)
57 |         return fetch(event.request.clone()).then((response) => {
58 | 
59 |           // Optional: add in extra conditions here, e.g. response.type == 'basic' to only cache
60 |           // responses from the same domain. See https://fetch.spec.whatwg.org/#concept-response-type
61 |           if (response.status < 400 && response.type === 'basic') {
62 |             // We need to call .clone() on the response object to save a copy of it to the cache.
63 |             // (https://fetch.spec.whatwg.org/#dom-request-clone)
64 |             cache.put(event.request, response.clone());
65 |           }
66 | 
67 |           // Return the original response object, which will be used to fulfill the resource request.
68 |           return response;
69 |         });
70 |       }).catch((error) => {
71 |         // This catch() will handle exceptions that arise from the match() or fetch() operations.
72 |         // Note that a HTTP error response (e.g. 404) will NOT trigger an exception.
73 |         // It will return a normal response object that has the appropriate error code set.
74 |         console.error('  Read-through caching failed:', error);
75 | 
76 |         throw error;
77 |       });
78 |     })
79 |   );
80 | });


--------------------------------------------------------------------------------
/src/theme/variables.scss:
--------------------------------------------------------------------------------
 1 | // Ionic Variables and Theming. For more info, please see:
 2 | // http://ionicframework.com/docs/v2/theming/
 3 | @import "ionic.globals";
 4 | // Shared Variables
 5 | // --------------------------------------------------
 6 | // To customize the look and feel of this app, you can override
 7 | // the Sass variables found in Ionic's source scss files.
 8 | // To view all the possible Ionic variables, see:
 9 | // http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/
10 | $background-color: #F4F4F4;
11 | // Named Color Variables
12 | // --------------------------------------------------
13 | // Named colors makes it easy to reuse colors on various components.
14 | // It's highly recommended to change the default colors
15 | // to match your app's branding. Ionic uses a Sass map of
16 | // colors so you can add, rename and remove colors as needed.
17 | // The "primary" color is the only required color in the map.
18 | $colors: ( primary: #387ef5, secondary: #32db64, danger: #f53d3d, light: #f4f4f4, dark: #222);
19 | // App iOS Variables
20 | // --------------------------------------------------
21 | // iOS only Sass variables can go here
22 | // App Material Design Variables
23 | // --------------------------------------------------
24 | // Material Design only Sass variables can go here
25 | // App Windows Variables
26 | // --------------------------------------------------
27 | // Windows only Sass variables can go here
28 | // App Theme
29 | // --------------------------------------------------
30 | // Ionic apps can have different themes applied, which can
31 | // then be future customized. This import comes last
32 | // so that the above variables are used and Ionic's
33 | // default are overridden.
34 | @import "ionic.theme.default";
35 | // Ionicons
36 | // --------------------------------------------------
37 | // The premium icon font for Ionic. For more info, please see:
38 | // http://ionicframework.com/docs/v2/ionicons/
39 | $ionicons-font-path: "../assets/fonts";
40 | @import "ionicons";


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "allowSyntheticDefaultImports": true,
 4 |     "declaration": false,
 5 |     "emitDecoratorMetadata": true,
 6 |     "experimentalDecorators": true,
 7 |     "lib": [
 8 |       "dom",
 9 |       "es2015"
10 |     ],
11 |     "module": "es2015",
12 |     "moduleResolution": "node",
13 |     "sourceMap": true,
14 |     "target": "es5"
15 |   },
16 |   "include": [
17 |     "src/**/*.ts"
18 |   ],
19 |   "exclude": [
20 |     "node_modules"
21 |   ],
22 |   "compileOnSave": false,
23 |   "atom": {
24 |     "rewriteTsconfig": false
25 |   }
26 | }


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "rules": {
 3 |     "no-duplicate-variable": true,
 4 |     "no-unused-variable": [
 5 |       true
 6 |     ]
 7 |   },
 8 |   "rulesDirectory": [
 9 |     "node_modules/tslint-eslint-rules/dist/rules"
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------