Ionic4混合App开发（I）

1、 简介

App是移动App。目前，移动平台主要包括android平台和ios平台。因此，要开发一个App，通常需要分别开发两个原生版本的android和ios。然而，这样的开发周期太长，开发成本太高。因此，在H5出现后，越来越多的人使用H5+原生插件开发App，“离子框架”技术是主流技术之一。

最新版本的Ionic是4.x，包括Ionic 4.0和cordova。Ionic4.0使用使用typescript开发的常规前端框架，因此在开发App之前必须了解html5和typescript。

2、 开发环境和工具

Nodejs（安装npm）、angular4.x（开发语言）、git命令行（下载插件）、gradle（android包）、Visual Studio代码（编辑器）、chrome（调试工具）

Android平台：jdk、Android sdk；ios平台：mac操作系统、Xcode、ios移动设备

（以上应安装最新版本）

3、 离子安装和操作

1.安装节点：

检查安装是否成功：

2.安装离子：npm安装-g cordova离子

要查看已安装的版本：

3.将Cd复制到项目根目录文件夹并运行命令：ionic start myApp tabs

MyApp是项目根目录名；选项卡为App创建选项，表示底部有选项卡的App

可根据实际需要选择不同的模板

4.将CD复制到刚刚创建的目录，然后运行离子服务：

此页面出现时创建成功

四、

离子目录结构

钩子：编译cordova时定制的脚本命令，可以轻松集成到我们的编译系统和版本控制系统中

node_Modules：节点各种依赖包

资源：android/ios资源（替换图标并开始动画）

src：主开发工作目录，其中放置页面、样式、脚本和图片

www:静态文件

平台：生成android或ios安装包路径（android构建平台输出apk:apk所在的位置），并执行cordova平台添加android

插件：插件文件夹，其中放置了cordova安装的各种插件

配置。Xml:打包为App的配置文件。可以在此处修改App的基本信息

包裹Json：配置项目的元数据并管理项目所需的依赖关系

tsconfig。Json：TypeScript项目的根目录，指定用于编译项目的根文件和编译选项

Tslint。json：格式化并验证typescript

Src工作目录