ionic3项目实战教程一（创建项目、目录分析、生成apk、根组件app分析）

前言：

使用ionic3+angular4+typescript4+cordova8+es6写app项目其实是一件相当困难的事情。不仅需要强大的英文文档阅读能力，更需要耐心和毅力！因为这条技术路线不像vue是循序渐进的，而是直接上手就干大BOSS，干掉了你就入门了，被干掉了就会被人嘲讽！后台或者项目经理就会在心里说，你是不是不行啊？连个demo都做不出来太菜了吧？这么几个简单的功能都不会写，要你这样的水货有何用？
在我们开始这个项目之前，你需要先了解下es6 阮一峰和typescript官网教程。并且仔细阅读ionic3 components和ionic3 api,不要觉得难，也不用觉得多。因为你以后的路会越走越轻松。
最后送大家一句话：技术有难易，学习无止境！

一、安装环境

npm install -g ionic@latest
npm install -g angular-cli@latest
npm install -g cordova@latest

二、新建项目

`ionic start --help //可以看到有哪些模板`

    tabs ............... ionic-angular A starting project with a simple tabbed interface
    blank .............. ionic-angular A blank starter project
    sidemenu ........... ionic-angular A starting project with a side menu with navigation in the content area
    super .............. ionic-angular A starting project complete with pre-built pages, providers and best practices for Ionic deve
lopment.
    conference ......... ionic-angular A project that demonstrates a realworld application
    tutorial ........... ionic-angular A tutorial based project that goes along with the Ionic documentation
    aws ................ ionic-angular AWS Mobile Hub Starter

ionic start myApp tabs//新建带有tabs模板名为myApp的项目

    //询问是否同步到ionic 项目，可以选择N，但是ionic cordova resources自动生成图标和启动页将无法使用。
    //选择Y需要先注册ionic官网账号并随便新建个项目，在这里关联到哪个项目即可。
    ? Connect this app to the Ionic Dashboard? (Y/n)//输入Y

    ? Which app would you like to link
    > Create a new app//回车选择这个，下面几个是我之前随便创建并且已经关联的项目
      jxsrsr (ce787b9f)
      app6 (ee75a394)
      gggg (6c94dfd5)
      llll (421a76f9)
      Nevermind

    ? Please enter a name for your new app: myApp//随便起个名字

cd myApp
ionic serve 启动项目如图示
这里写图片描述

三、文件目录分析

这里写图片描述

node_modules 项目依赖存储目录
platforms 生成的android和ios项目以及安装包目录，可以用Android Studio 调试运行
plugins 通过cordova plugin add|rm name 增加的cordova插件，实现原生功能扩展
resources 项目图标icon.png 和启动界面splash.png 自动生成适配尺寸存放目录
src 我们写代码的地方，页面编码都在这里
src/app 项目启动时最先进到这里
src/assets 存放静态资源文件
src/components 新建的组件目录
src/pages 重点，所有页面的存放目录
src/services 服务存放目录
src/theme 全局css样式文件，在里面写的样式全局有效
www ionic build 自动编译生成的文件
package.json 依赖包定义文件

四、生成apk

最好有vpn代理，因为要安装很多环境，没有代理会很卡，甚至奔溃！
需要安装 android sdk 并下载 android 运行环境，最好直接下载Android Studio这款软件，它会自动帮你把需要的环境安装好。为啥要安装这些鬼东西？因为从这一刻起，你不再是一个前端，而是一个app开发者！！！
cordova platform add android，如果你发现控制台如下并且没有报错说明你走过了非常艰难的一步。如果报错了，执行cordova platform rm android然后重新cordova platform add android再来一次。

Adding cordova-plugin-whitelist to package.json
Saved plugin info for "cordova-plugin-whitelist" to config.xml
Discovered plugin "cordova-plugin-device" in config.xml. Adding it to the project
Installing "cordova-plugin-device" for android
Adding cordova-plugin-device to package.json
Saved plugin info for "cordova-plugin-device" to config.xml
Discovered plugin "cordova-plugin-splashscreen" in config.xml. Adding it to the project
Installing "cordova-plugin-splashscreen" for android
Adding cordova-plugin-splashscreen to package.json
Saved plugin info for "cordova-plugin-splashscreen" to config.xml
Discovered plugin "cordova-plugin-ionic-webview" in config.xml. Adding it to the project
Installing "cordova-plugin-ionic-webview" for android
Adding cordova-plugin-ionic-webview to package.json
Saved plugin info for "cordova-plugin-ionic-webview" to config.xml
--save flag or autosave detected
Saving android@~7.0.0 into config.xml file ...

G:\ionicTest\myTabs>

4.cordova build android
如图示说明成功了，把app-debug.apk安装到手机上即可。
如果app-debug.apk只有几百K大小并且安装后打不开，说明你没有ionic build。你需要cordova platform rm android ,ionic build ,然后重新执行第三步。

BUILD SUCCESSFUL in 26s
47 actionable tasks: 47 executed
Built the following apk(s):
        G:\ionicTest\myTabs\platforms\android\app\build\outputs\apk\debug\app-debug.apk

G:\ionicTest\myTabs>

五、app.module.ts分析

//根模块，告诉ionic如何组装应用
//引入ng ionic系统模块
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';

//引入跟组件
import { MyApp } from './app.component';
//引入自定义页面
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

//ionic 打包成app以后配置启动画面 以及导航条的服务
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  //声明要用到的页面
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  //引入的模块 依赖的模块
  imports: [
    BrowserModule,
    ComponentsModule,
    IonicModule.forRoot(MyApp)
  ],
  //启动的模块
  bootstrap: [IonicApp],
  //配置不会在模块中使用的页面
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  //配置服务
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}//暴露这个类

ps:有什么写的不对的地方欢迎指正，写了好久呢，小哥哥小姐姐点个赞吧=_=!