ionicframework： https://ionicframework.com/
适用于 Web 的移动 SDK。一个开源移动 UI 工具包，用于从单个代码库构建现代、高质量的跨平台移动应用程序React、Vue、Angular。
ionic3官方文档： https://ionicframework.com/docs/v3/intro/installation/
什么是 ionic？他和 Cordova、Angular2 有什么联系？
ionic = Cordova + Angular + ionic CSS
Cordova 提供了使用 JavaScript 调用 Native 功能，ionic CSS 是一套 UI 框架，ionic 对 Angular 进行了封装。
（1）ionic开发环境
Ionic 开发是依赖于 Nodejs 环境的，所以在开发之前我们需要安装好 Nodejs。下载安装：https://nodejs.org/en。（注：可以使用nvm来管理node版本）。
安装完成后，打开 cmd 执行node -v 和npm -v命令，返回版本号表示已安装成功。
node 和 npm 安装完后，开始安装 Ionic 和 Cordova CLI，执行 npm install -g ionic cordova 命令安装 ionic 和 cordova。安装完后，执行 ionic -v 命令，返回版本号表示已安装成功。
-
ionic 版本是 package.json 中的 ionic-angular。
-
ionic cli 版本 是一套 ionic 的命令行界面，用于执行各种命令行的命令。
-
注意1： 很多时候，很多人以为这样安装了 ionic，就是安装了 ionic 的核心框架，其实不是，把 ionic-cli 和 ionic-angular 混为一谈了，这里安装的是
ionic-cli，是为了便于我们开发编译部署 ionic 项目的命令行，而ionic-angular其实才是我们常说的ionic 框架，每次修复 bug、更新功能指的就是它，在 package.json 里可以查看版本和相关依赖(也可以在项目目录敲npm list ionic-angular)。两者的版本并不是一致，有时候 ionic-angular 更新了多个版本，而 ionic-cli 不需要更新，而 ionic-cli 一 般是 bug 修复、提高命令执行的性能，或调整 ionic 项目结构时才需要更新。 -
注意2： 与 ionic-cli 一样，安装的 cordova 其实也是 cordova-cli，用于管理 cordova 插件的。现在 ionic-cli 涉及原生相关的命令都会带上 cordova，如：
ionic cordova build android。但是有人会省掉 ionic，变成这样：cordova build android，其实这样也是能执行，但是操作就完全不同了！cordova build 的，是把 www 目录打包为原生应用，而 ionic cordova build，是先执行基于 ionic 配置的一系列编译压缩打包命令把 src 源码生成 www 目录，再执行 cordova build 的概念。
安装：（JDK & android SDK）／xCode——可选，前者 android，后者 ios
一般直接下载，也可以安装 android studio 来实现 SDK 下载管理（为了方便调试 android 原生代码，建议此种方式），两者完成后配置环境变量，不过，现在新版 ionic-cli 使得上述方式不是必须的，在 ionic 执行 platform 添加 android 时，检查到环境变量没有配置，就会自动下载安装配置 android 环境，最后可以输入 adb 来简单验证环境配好没。
其中，window 不能开发 ios，如果要开发和调试 ios，要装苹果系统（Mac、黑苹果、虚拟机等等），而苹果系统基本可以开发各个平台。
（2）ionic 创建项目
ionic3 搭建项目详细教程
命令：ionic start 项目名称 [模板]
注：使用 ionic start --list 命令可以查看所有可用模板。
ionic3 可用模板有：
- tabs：具有简单选项卡式界面的启动项目。
- blank：空白启动项目。
- sidemenu：具有侧菜单的起始项目，该侧菜单在内容区域中具有导航。
- super：一个初始项目，包含 Ionic 开发的预构建页面、提供程序和最佳实践。
- conference：演示实际应用程序的项目。
- tutorial：一个基于教程的项目，与 Ionic 文档一起提供。
- aws：AWS 移动中心入门版。
Ionic 升级后，新版的 ionic 创建不同版本项目指令如下：
- ionic1版本：
ionic start myApp --type=ionic1 - ionic2版本：
ionic start myApp --type=ionic2 - ionic3版本：
ionic start myApp --type=ionic-angular - ionic4版本：
ionic start myApp 或 ionic start myApp --type=angular
如创建 ionic3 项目：ionic start 项目名称 --type=ionic-angular
- 创建完一个 ionic3 项目后，使用
ionic serve命令运行项目。 - 然后执行
ionic cordova platform ls命令查看可安装/已安装的 platform。
- 执行
ionic cordova platform add android@9.1.0命令，为项目添加指定版本的 android 平台。
（3）ionic3工程目录说明
- node_modules： node 各类依赖包（项目依赖存储目录） 。
- platforms： 生成 android 或者 ios 安装包路径 （通过
ionic cordova platform add android@9.1.0添加指定版本的android，通过ionic cordova platform rm android移除android平台），可以用Android Studio调试运行。 - plugins： 已安装的 cordova 插件。通过
ionic cordova plugins ls查看，通过ionic cordova plugins add/remove 插件名或路径来添加／删除 cordova 插件，实现原生功能扩展。 - resources： android / ios 资源(更换图标和启动图)，项目图标 icon.png 和启动界面 splash.png 自动生成适配尺寸存放目录 。
- src： 开发工作目录，页面、样式、脚本和图片都放在这个目录下 。
- app： 应用根目录，项目启动时最先进到这里。
- assets： 资源目录，存放静态资源文件。
- components： 新建的组件目录。
- pages： 重点，所有页面的存放目录。
- pipes： 管道存放目录。
- providers： 所有服务存放目录。
- theme： 主题文件，里面有一个 scss 文件，设置主题信息。全局 css 样式文件，在里面写的样式全局有效。
- index.html：
- manifest.json
- service-worker.js
- typings
- www： ionic build 自动编译生成的静态文件，发布 APP的
web版就是整个拷贝它到服务器发布。 - .editorconfig
- .gitignore： 当项目中的文件夹或文件不想提交到 git 仓库时，使用其进行设置，防止文件进行转移。（git 忽略文件）
- config.xml： 打包成 app 的配置文件，也就是原生项目配置文件，
app版本号在此修改。 - package.json： node安装模块时的依据文件，配置项目的元数据和管理项目所需要的依赖，在里面配置的内容，在执行 npm install 命令后会生成到 node_modules 目录。（依赖包定义文件）
- tsconfig.json： TypeScript 项目的根目录，指定用来编译这个项目的根文件和编译选项，不用管。
- tslint.json： 格式化和校验 typescript，不用管。
（4）项目运行（启动）
命令：ionic serve
（5）创建子模块
命令：ionic generate
可以生成管道、组件、页面、指令、提供程序和选项卡等。
注：使用命令 ionic g --help 可以查看详细用法。
ionic generate [<type>] [<name>]
- type：生成器的类型，例如：component（创建通用）、directive（指令，暂不用）、page（创建子页面）、pipe（管道，暂不用）、provider（单例，网络请求，数据库等一些服务）、tabs（创建带底部tabbar的子页面）。
- name：正在生成的组件的名称
选择：
- –no-module ：不为组件生成 NgModule。
- –constants：为延迟加载的页面生成页面常量文件。
例子：
$ ionic generate
$ ionic generate component
$ ionic generate directive
$ ionic generate page
$ ionic generate pipe
$ ionic generate provider
$ ionic generate tabs
$ ionic generate component foo
$ ionic generate page Login
$ ionic generate page Detail --no-module
$ ionic generate page About --constants
$ ionic generate pipe MyFilterPipe
（6）ionic 针对安卓开发教程
该教程介绍了如何使用电容器或Cordova在Android模拟器和设备上运行和调试Ionic应用程序。Android 应用程序可以在 Windows、macOS 和 Linux 上开发。
1、部署到设备
当您的应用处于开发阶段时，使用模拟器或使用模拟器在浏览器中测试您的应用程序是快速、简单和方便的，但最终您将不得不在设备上进行测试。这不仅是准确测试应用程序行为和性能的唯一方法，许多 Ionic Native 插件只有在实际硬件上运行时才有效。ionic serve
2、安卓设备
部署到 Android 设备是一个相当简单的过程。如果你有一个有效的 Android 开发环境，你已经准备好了。
3、要求
- Java JDK 8
- 安卓工作室
- 更新了 Android SDK 工具、平台和组件依赖项。可通过 Android Studio 的 SDK 管理器获得（即要安装 Android Studio ）。
4、构建安卓工程（运行您的应用）
要运行您的应用程序，您所要做的就是在 Android 设备上启用 USB 调试和开发人员模式，然后从命令行运行
ionic cordova prepare android
将 ionic 项目（应用）同步部署到Android 模拟器和设备上，这将在 Android 和 Ionic 的代码方面生成应用程序的调试版本。
5、调试安卓应用
一旦应用在 Android 设备或模拟器上运行，就可以使用 Chrome DevTools 对其进行调试。
6、使用 Chrome DevTools
Chrome 为安卓模拟器和设备提供了网络开发者工具支持。在模拟器正在运行或设备连接到计算机时转到 Chrome 中，然后检查需要调试的应用。chrome://inspect
注意：确保应用程序在设备或模拟器上运行，否则它不会显示在列表中。
（7）打包安卓apk（生产构建 + 签署安卓 APK）
参考： ionic + cordova 打包安卓Android
1、生产构建
若要运行或生成用于生产的应用，请运行
ionic cordova prepare android --prod --release
这会将您的应用代码缩小为 Ionic 的源代码，并从 APK 中删除任何调试功能。这通常在将应用程序部署到 Google Play 商店时使用。
- 默认打包
debug版本：ionic cordova prepare android。 - 打包正式版：
ionic cordova prepare android --prod --release。
ionic cordova prepare android --prod --release 命令用于在Ionic项目中为生产环境准备Android平台，并生成用于发布的APK文件。
当你执行该命令时，Ionic会根据配置和构建设置，执行以下操作：
（1）编译和构建应用程序代码： 使用生产环境的设置来编译和构建应用程序代码，以生成更小、更高效的代码。
（2）压缩和优化资源文件： 所有的 CSS 和 JavaScript 文件都会被压缩和混淆，以减小文件尺寸并提高性能。
（3）处理图像： 图像文件会被优化和压缩，以减小应用包的大小。
（4）配置代码和库： 根据编译设置和构建配置替换或排除一些代码或库，以满足生产环境的需求。
（5）生成Android平台相关的文件结构： 生成和更新 Android 平台的项目文件和目录结构，以准备应用程序在 Android 设备上的构建和部署。
（6）构建Release版本： 使用--release标志生成用于发布的APK文件。这个版本将使用正式的签名证书对应用进行签名，以便在发布到Play商店或其他应用分发渠道时能够被接受。
执行完 ionic cordova prepare android --prod --release 命令后，Ionic 会生成一个准备好的生产环境 Android 应用程序，并将其打包成 APK 文件，可以用于发布到应用商店或其他渠道。
需要注意的是，--prod参数指定了使用生产环境的配置和设置，而--release参数指定要生成发布版本的APK文件。确保提前配置好签名证书，并根据需要进行相应的修改和配置，以满足你的发布需求。
2、签署安卓 APK
如果您想在谷歌Play商店中发布您的应用程序，则必须对APK文件进行签名。 为此，您必须创建新的证书/密钥库。
让我们使用 JDK 附带的 keytool 命令生成您的私钥：
keytool -genkey -v -keystore my-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias my-alias
系统将首先提示您为密钥库创建密码。然后，回答其余不错的工具的问题，当一切都完成后，你应该在当前目录中创建一个名为 my-release-key.jks 的文件。
注意： 请务必将此文件保存在安全的地方，如果您丢失了它，您将无法向应用程序提交更新（可以把 jks 文件名设置为密钥名，这样以后打包 APK 的时候，可以直接复制，避免忘记）！
要对未签名的 APK 进行签名，请运行 jarsigner 工具，该工具也包含在 JDK 中：
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.jks app-release-unsigned.apk my-alias
这会将 APK 签名到位。最后，我们需要运行 zip 对齐工具来优化 APK。拉链对齐工具可在 中找到。例如，在安装了 Android Studio 的 OS X 上，zipalign 位于：/path/to/Android/sdk/build-tools/VERSION/zipalign~/Library/Android/sdk/build-tools/VERSION/zipalign
zipalign -v 4 app-release-unsigned.apk HelloWorld.apk
要验证您的 apk 是否已签名，请运行 apksigner。apksigner 也可以在与 zipalign 工具相同的路径中找到：
apksigner verify HelloWorld.apk
现在我们有一个名为HelloWorld的最终发布二进制文件.apk我们可以在Google Play商店发布它，供全世界欣赏！
（8）cordova-res
cordova-res： 此工具将裁剪和调整 JPEG 和 PNG 源图像的大小，以生成适用于现代 iOS、Android 和 Windows 的图标和初始屏幕。 是为与 Cordova 一起使用而开发的，但支持 Capacitor 和其他本机运行时。
官网地址： https://www.npmjs.com/package/cordova-res
安装： npm install -g cordova-res
使用教程： APP批量自动生成各种不同分辨率尺寸图标和启动页（Android和iOS都支持） - 使用cordova-res图文教程
ionic3 项目中使用：
自动创建图标和初始屏幕资源，icon.png 图标图片，splash.png 初始屏幕资源图片。
ionic cordova resources [platform] [options]
使用此命令从 PNG 源图像为您的 Cordova 平台生成完美大小的图标和初始屏幕。
官网教程： https://ionicframework.com/docs/cli/commands/cordova-resources
platfotm：
- 要为其生成资源的平台（ios 或者 android）。
options:
--icon：生成图标资源（或-i）。--splash：生成初始屏幕资源（或-s）。
例子：
ionic cordova resources
ionic cordova resources ios
ionic cordova resources android
ionic cordova resources android -i
ionic cordova resources android -s
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
