ionic4-新建工程-worker

环境

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

欢迎访问我的专栏：
ionic4 混合开发实战-csdn
ionic4 混合开发实战-简书

创建工程

# 进入目录
 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            # 包管理
 

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

欢迎访问我的专栏：
ionic4 混合开发实战-csdn
ionic4 混合开发实战-简书