ionic4 新建工程-worker

ionic4 新建工程-worker

环境

node 10.15.0
ionic 4.12.0
cordova 9.0
# platforms
cordova-android：8.0.0
cordova-ios: 5.0.0

创建工程

# 进入目录
cd /Users/xxx/Documents/Personal/Study/ionic4
ionic start worker tabs

等待ionic脚手架创建成功…

创建成功后：执行

ionic serve

效果如下图所示：

添加Android、ios平台

ionic cordova prepare android
ionic cordova prepare ios

根据脚手架提示，确认添加平台；此时会默认安装如下几个插件：

# 白名单
cordova-plugin-whitelist
# 状态栏
cordova-plugin-statusbar
# 设备
cordova-plugin-device
# 启动页
cordova-plugin-splashscreen
# 键盘
cordova-plugin-ionic-keyboard
# webview
cordova-plugin-ionic-webview

后面我们将详细说说几个插件的使用及注意事项。

依赖说明 (package.json)

备注第三方的是项目中需要的。

"dependencies": {
    # angular 相关包
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
     # ionic-native 相关包(插件需使用)
    "@ionic-native/camera": "^5.5.0",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/file": "^5.5.0",
    "@ionic-native/file-transfer": "^5.5.0",
    "@ionic-native/image-picker": "^5.5.0",
    "@ionic-native/ionic-webview": "^5.5.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.3.0",
    # storage 自适应调整存储方式
    "@ionic/storage": "^2.2.0",
    "core-js": "^2.5.4",
    # 第三方 logger
    "ngx-logger": "^3.3.12",
    # 第三方 xml解析
    "ngx-xml2json": "^1.0.2",
    "rxjs": "~6.3.3",
    # 第三方 堆栈追踪
    "stacktrace-js": "^2.0.0",
     # 第三方 md5加密
    "ts-md5": "^1.2.4",
    "zone.js": "~0.8.29"

目录结构

.
├── e2e
│   ├── protractor.conf.js
│   ├── src
│   │   ├── app.e2e-spec.ts
│   │   └── app.po.ts
│   └── tsconfig.e2e.json
├── resources                    # android/ios 资源(图标、启动页)
│   ├── README.md
│   ├── android
│   │   ├── icon
│   │   └── splash
│   ├── icon.png
│   ├── ios
│   │   ├── icon
│   │   └── splash
│   └── splash.png
├── src                              # 代码 
│   ├── app                       # app
│   │   ├── app-routing.module.ts
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   ├── core
│   │   ├── pages
│   │   └── share
│   ├── assets    # 静态资源
│   │   ├── fonts
│   │   ├── icon
│   │   ├── img
│   │   └── shapes.svg
│   ├── environments # 环境
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── global.scss # 全局样式
│   ├── index.html
│   ├── karma.conf.js
│   ├── main.ts #启动类
│   ├── polyfills.ts # 垫片
│   ├── style
│   │   └── base
│   ├── test.ts
│   ├── theme #主题
│   │   └── variables.scss
│   ├── tsconfig.app.json
│   └── tsconfig.spec.json
├── tsconfig.json # ts文件配置
└── tslint.json # ts文件检查
├── README.md
├── angular.json # angular配置文件
├── config.xml # android、iosf工程配置
├── ionic.config.json
├── ionic.project
├── package-lock.json
├── package.json            # 包管理

下一篇将介绍工程、路由等配置。