paterWang

混合式 App 开发框架

2-3 混合式 App 开发框架

介绍

Hybrid App的兴起是现阶段移动互联网产业的一种偶然。

**原因：**移动互联网的热潮刮起后，众多公司前赴后继的进入。但是很快发现移动应用的开发人员太少，所以导致疯狂的人才争夺。市场机制下移动应用开发人才的待遇扶摇直上，最终变成众多企业无法负担养一个具备跨平台开发能力的专业移动应用开发团队。

背景：而HTML5的出现让Web App露出曙光，HTML5开发移动应用的跨平台和廉价优势让众多想进入移动互联网领域的公司开始心动。可是当下基于HTML5的Web App更是雾里看花，在用户入口习惯、分发渠道和应用体验这三个核心问题没解决之前，Web App也很难得以爆发。

**爆发：**正是在这样是机缘巧合下，基于HTML5低成本跨平台开发优势又兼具Native App特质的Hybrid App技术杀入混战，并且很快吸引了众人的目光。大幅的降低了移动应用的开发成本，可以通过现有应用商店模式发行，在用户桌面形成独立入口等等这些，让Hybrid App成为解决移动应用开发困境不错的选择，也成为现阶段Web App的代言人。Hybrid App像刺客一样，在Native App和Web App混战之时，偶然间的在移动应用开发领域占有了一席之地。

在本节课，我们要介绍关于混合式App开发的相关框架，及它们的特点。

什么是混合式App？

Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。

为什么要学习/了解混合式App?

拓展前端应用/拓宽视野/增加工作应用面
快应用效率开发，与原生配合
了解机理，以便在特定的应用场景下进行使用

学习目标：

理解混合式App与Native App/WebApp的区别
能够有基础判断，是否应用是由Native App开发或者是混合式开发
什么样的场景或者业务，可以使用混合式开发
学习ionic/Cordova/Phonegap，并了解其工作原理

主要内容：

混合式App简介
Cordova打包工具介绍
Phonegap的基础使用及与Cordova的关系
Ionic框架的使用与介绍

学习准备：

IDE编辑器：vscode，webstorm
Nodejs LTS版本
一部iOS手机或者Android手机
mac上需要下载Xcode，windows上需要下 Android Studio
如果需要发布，需要开发者身份（AppStore 99美元/年，Android 各大应用商店不一样）

混合式App的工作原理

混合式App（Hybrid App）

什么是混合式App?

混合应用程序：混合应用程序是一种移动应用程序，以浏览器支持的语言和计算机语言编码。它们可以通过苹果的App Store，Google Play等应用程序分发平台获得。通常，它们可以从平台下载到目标设备，如iPhone，Android手机或Windows Phone。用户需要安装才能运行它们。

Hybrid App：Hybrid App is a mobile application that is coded in both browser-supported language and computer language. They are available through application distribution platforms such as the Apple App Store, Google Play etc. Usually, they are downloaded from the platform to a target device, such as iPhone, Android phone or Windows Phone. The subscribers need to install to run them.

我们来拆解一下里面的含义：

1、mobile application：Hybrid App就是一个移动应用

2、both browser-supported language and computer language：同时使用网页语言与程序语言编写

3、available through application distribution platforms：通过应用商店进行分发

4、a target device：区分目标平台

5、install to run：用户需要安装使用

Hybrid App工作原理

Hybrid App是指介于web-app、native-app这两者之间的app,它虽然看上去是一个Native App，但只有一个UI WebView，里面访问的是一个Web App，比如百度App最开始的应用就是包了个客户端的壳，其实里面是HTML5的网页，后来才推出真正的原生应用。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WkCD6Ki1-1688439895675)(assets/Hybrid_App_Architecture.png)]

与原生/WebApp框架比较

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KCHdApdI-1688439895676)(assets/7b6c9535gy1ftadxhtbv6j20k90h3t9m.jpg)]

Native App：

优点：

可以在离线情况下使用
与硬件设备深度集成（GPS，相机，日历，消息，联系人）
可以从App商店直接下载（Google Play，App Store）
更好的用户体验
更流畅的页面过渡
数据保护 - 使本机应用程序更安全更容易。这是许多公司有兴趣为其客户提供的优势，特别是在企业部门，金融科技和具有敏感数据的应用程序中。

缺点：

需要更多的精力开发
高额的开发成本：构建复杂的软件肯定需要时间，需要更多的开发人员。跨两个主要平台的用户分布，使得为iOS和Android保持两个单独的应用程序，启动和运行所需的工作量和测试量增加了一倍。
比较低的复用性
升级过渡比较麻烦
版本多、兼容性差：App Store中的应用程序会推动版本的更新，放弃旧的版本号；而Android版本会定期更新，有很多版本需要向下兼容。相反，混合应用程序鼓励开发人员以更周到的方式处理UI和功能，并仅引入可在两个操作系统上运行的功能。

Hybrid App：

优点：

更快速的开发
灵活的升级
比较高效与的已有的设备进行集成（需要单独购买比如iOS设备）
低成本

缺点：

用户交互差
页面体验不流畅
导航功能比较难实现（左滑右滑等事件与原生进行冲突）
需要联网

与WebApp进行比较

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U3Ar79FV-1688439895677)(assets/YTqznpbzSodd–Qzy02kNEv9jPDWYc2u.png)]

常见的混合式App框架

打包工具：Cordova，PhoneGap
云平台：DCloud(Uni-app基于Vue)，AppCan，ApiCloud，wex5
框架：

Ionic：

免费和开源，Ionic提供了一个移动和桌面优化的HTML，CSS和JS组件库，用于构建高度交互的应用程序。与Angular，React，Vue或纯JavaScript一起使用。

Flutter:

Flutter是一款移动应用SDK，可帮助开发人员和设计人员构建适用于iOS和Android的现代移动应用。

React Native:

React Native使您能够使用基于JavaScript和React的一致开发人员体验在本机平台上构建世界级的应用程序体验。React Native的重点是在您关注的所有平台上实现开发人员效率 - 学习一次，随处写作。Facebook在多个生产应用程序中使用React Native，并将继续投资React Native

Xamarin:

Xamarin的基于Mono的产品使.NET开发人员能够使用他们现有的代码，库和工具（包括Visual Studio *），以及.NET和C＃编程语言的技能，为业界最广泛使用的移动设备创建移动应用程序设备，包括基于Android的智能手机和平板电脑，iPhone，iPad和iPod Touch。
跨端应用：

Electron

由Github出品、维护的跨平台桌面应用开发框架。

Cordova

Apache Cordova是一组设备API，允许移动应用程序开发人员从JavaScript访问本机设备功能，如摄像头或加速度计。结合使用jQuery Mobile或Dojo Mobile或Sencha Touch等UI框架，可以使用HTML，CSS和JavaScript开发智能手机应用程序。

Cordova是Adobe捐献给Apache的项目，是一个开源的、核心的跨平台模块。

而PhoneGap是Adobe的一项商业产品，Cordova和Phonegap的关系就类似于WebKit与Chrome或者Safari的关系。

Phonegap Build，（iPhone, Android SDK service）和cordova（Apache Cordova）的合体。
而对于你面对的实际问题，就是需不需要Phonegap Build的功能，需不需要在线打包。

Cordova的前世今生：

2008年8月，PhoneGap在旧金山举办的iPhoneDevCamp上崭露头角，起名为PhoneGap是创始人的想法：“为跨越Web技术和iPhone之间的鸿沟牵线搭桥”。

当时PhoneGap隶属于Nitobe公司。

经过几个版本的更新，这款PhoneGap开始支持更多的平台，在2011年10月4日，Adobe公司收购了这个Nitobe公司，当时adobe公司还有着adobe air 和flash。

随后Adobe把PhoneGap项目捐献给了Apache基金会，但是保留了PhoneGap的商标所有权。

而就在这时候PhoneGap开始分两条路而走，在Adobe公司内部一直保有着PhoneGap的商标所有权，而Apache收录这个项目后将其更名为Apache Callback。

而捐献之后虽然PhoneGap的升级和维护工作大部分还是依托于Adobe的Nitobe项目组，所以在Adobe的PhoneGap官方宣扬的“PhoneGap”名号，而Apache对外公布的确实Callback名号，当2012年PhoneGap更新到1.4版本后，Apache又把名字更新成Cordova，有趣的是Cordova是PhoneGap团队附近一条街的名字。

安装与起步

// 全局安装cordova命令
npm install -g cordova

// 创建cordova的项目
cordova create <path>

// cordova命令帮助
cordova help create

添加平台
cordova platform add <platform name>

// 查看支持的平台
➜ cordova platform
Installed platforms:

Available platforms:
  android ^8.0.0
  browser ^6.0.0
  electron ^1.0.0
  ios ^5.0.0
  osx ^5.0.0
  windows ^7.0.0

//eg:
cd MyApp cordova platform add browser

// 运行
cordova run browser

支持的平台及打包

平台相关管理命令

$ cordova platform add ios
$ cordova platform add android

# 查看
$ cordova platform ls

预打包环境检查

$ cordova requirements
Requirements check results for android:
Java JDK: installed .
Android SDK: installed
Android target: installed android-19,android-21,android-22,android-23,Google Inc.:Google APIs:19,Google Inc.:Google APIs (x86 System Image):19,Google Inc.:Google APIs:23
Gradle: installed

Requirements check results for ios:
Apple OS X: not installed
Cordova tooling for iOS requires Apple OS X
Error: Some of requirements check failed

Android platform requirements
iOS platform requirements
Windows platform requirements

平台管理

Cordova提供了保存和恢复平台和插件的功能。

此功能允许开发人员将其应用程序保存并恢复到已知状态，而无需检入所有平台和插件源代码。

添加平台或插件时，有关应用程序平台和插件版本的详细信息会自动保存到package.json文件中。package.json假设您知道正确的标签和语法，也可以通过直接编辑文件来添加平台或插件。无法以这种方式删除插件或平台。建议的添加和删除插件和平台的方法是使用Cordova CLI命令cordova plugin add|remove ...，cordova platform add|remove ...以避免任何不同步问题。

该恢复步骤发生在一个自动cordova prepare发出，利用信息先前保存在package.json和config.xml文件。

保存/恢复功能派上用场的一个场景是在应用程序上工作的大型团队，每个团队成员都专注于平台或插件。此功能可以更轻松地共享项目并减少在存储库中检查的冗余代码量。

保存平台

要保存平台，请发出以下命令：

cordova platform add <platform[@<version>] | directory | git_url>

运行上面的命令后，package.json应该包含如下所示的内容：

"cordova": {
  "platforms": [
    "android"
  ]
},
"dependencies": {
  "cordova-android": "^8.0.0",
}

该--nosave标志阻止向package.json文件添加和删除指定的平台。要防止保存平台，请发出以下命令：

cordova platform add <platform[@<version>] | directory | git_url> --nosave

例子：

cordova platform add android

cordova-android从npm 检索平台的固定版本，将其添加到项目并更新package.json文件。

cordova platform add [email protected]

从npm 检索cordova-android平台版本7.1.4，将其添加到项目并更新package.json文件。

cordova platform add https://github.com/apache/cordova-android.git

cordova platform add https://github.com/apache/cordova-android

cordova platform add github:apache/cordova-android

npm cordova-android从git存储库中检索平台，将其添加到项目中并更新package.json。

cordova platform add C:/path/to/android/platform

从指定目录检索Android平台，将其添加到项目中，然后更新package.json文件。

cordova platform add android --nosave

cordova-android从npm 检索平台的固定版本，将其添加到项目中，但不将其添加到package.json文件中。

更新或删除平台

可以从config.xml和package.json更新和删除平台。

要更新平台，请执行以下命令：

cordova platform update <platform[@<version>] | directory | git_url>

要删除平台，请执行以下命令之一：

cordova platform remove <platform>
cordova platform rm <platform>

一些例子：

cordova platform update android

除了将cordova-android平台更新为固定版本之外，它还会更新package.json文件。

cordova platform update [email protected]

除了将cordova-android平台更新为3.8.0版本之外，它还会更新package.json文件。

cordova platform update /path/to/android/platform

除了将cordova-android平台更新为在提供的文件夹中找到的版本之外，它还会更新package.json文件。

cordova platform remove android

cordova-android从项目中删除平台并将其从package.json文件中删除。

注意：如果平台定义存在于config.xml先前版本的Cordova CLI中，则也将从中删除config.xml。

cordova platform remove android --nosave

cordova-android从项目中删除平台，但不从package.json文件中删除它。

恢复平台

执行命令时，平台会自动从package.json（和config.xml）恢复cordova prepare。

如果在两个文件中定义了平台，则将定义的信息package.json用作事实来源。

之后prepare，任何恢复的平台config.xml都将更新package.json文件以反映从中获取的值config.xml。

如果在未指定a的情况下添加平台，则将从package.json或中获取将要安装的版本config.xml。

如果在两个文件中都package.json被发现，则优先级高于config.xml。

例：

假设您的config.xml文件包含以下条目：


    ...
    <engine name="android" spec="7.1.4" />
    ...
xml>

如果运行cordova platform add android未指定的命令，[email protected]将检索并安装该平台。

恢复平台的优先顺序示例：

假设您已经定义了config.xml以及package.json平台和版本，如下所示：

config.xml：

<engine name="android" spec=“7.4.1” />

package.json：

"cordova": {
  "platforms": [
    "android"
  ]
},
"dependencies": {
  "cordova-android": "^8.0.0"
}

当prepare执行，从版本package.json上具有更高的优先级config.xml和版本^8.0.0将被安装。

跨平台通用插件管理

保存插件

要保存插件，请发出以下命令：

cordova plugin add <plugin[@<version>] | directory | git_url>

运行上面的命令后，package.json应该包含如下所示的内容：

"cordova": {
  "plugins": [
    "cordova-plugin-device"
  ]
},
"devDependencies": {
  "cordova-plugin-device": "^1.0.0"
}

该--nosave标志阻止添加和删除指定的插件package.json。要防止保存插件，请发出以下命令：

cordova plugin add <plugin[@<version>] | directory | git_url> --nosave

一些例子：

cordova plugin add cordova-plugin-device

cordova-plugin-device从npm 检索插件的固定版本，将其添加到项目并更新package.json文件。

cordova plugin add [email protected]

从npm cordova-plugin-device版本检索插件2.0.1，将其添加到项目并更新package.json文件。

cordova plugin add https://github.com/apache/cordova-plugin-device.git

cordova plugin add https://github.com/apache/cordova-plugin-device

cordova plugin add github:apache/cordova-plugin-device

npm cordova-plugin-device从git存储库中检索插件，将其添加到项目中并更新package.json。

cordova plugin add C:/path/to/console/plugin

cordova-plugin-device从指定目录中检索插件，将其添加到项目中，然后更新package.json文件。

在项目中保存现有插件

如果您有一个预先存在的项目，并且想要在项目中保存所有当前添加的插件，则可以使用：

cordova plugin save

删除插件

它可以从删除插件config.xml，并package.json使用以下命令之一：

cordova plugin remove <plugin>
cordova plugin rm <plugin>

例如：

cordova plugin remove cordova-plugin-device

删除cordova-plugin-device从项目的插件，并且删除其入境package.json。

注意：如果插件定义存在于config.xml先前版本的Cordova CLI中，则也将从中删除config.xml。

恢复插件

插件被自动地从恢复package.json和config.xml执行时cordova prepare命令。

如果在两个文件中定义了插件，则将定义的信息package.json用作事实的来源。

之后prepare，任何从中恢复的插件config.xml都将更新package.json文件以反映从中获取的值config.xml。

如果在未指定a的情况下添加插件，则将从package.json或中获取将要安装的版本config.xml。

如果在两个文件中都package.json被发现，则优先级高于config.xml。

例：

假设您的config.xml文件包含以下条目：


    ...
    <plugin name="cordova-plugin-device" spec="2.0.1" />
    ...

如果运行cordova plugin add cordova-plugin-device未指定的命令，[email protected]将检索并安装该平台。

恢复插件的优先顺序示例：

假设你已经在定义config.xml和package.json插件和版本如下：

config.xml：

<plugin name="cordova-plugin-splashscreen"/>

package.json：

"cordova": {
  "plugins": [
    "cordova-plugin-splashscreen"
  ]
},
"devDependencies": {
  "cordova-plugin-splashscreen": "1.0.0"
}

当prepare执行，从版本package.json上具有更高的优先级config.xml和版本1.0.0将被安装。

插件系统Plugman

从版本3.0开始，Cordova将所有设备API实现为插件，并在默认情况下禁用它们。它还支持两种不同的方式来添加和删除插件，具体取决于工作流程选择：

如果使用跨平台工作流，则使用cordovaCLI实用程序添加插件，如命令行界面中所述。CLI一次修改所有指定平台的插件。
如果使用以平台为中心的工作流，则为每个目标平台单独使用较低级别的 Plugman命令行界面。

要安装plugman，必须在计算机上安装节点。然后，您可以从环境中的任何位置运行以下命令以全局安装plugman，以便可以从任何目录使用它：

$ npm install -g plugman

添加插件

一旦安装了Plugman并创建了Cordova项目，就可以开始向平台添加插件：

$ plugman install --platform <ios|android> --project <directory> --plugin <name|url|path> [--plugins_dir <directory>] [--www <directory>] [--variable <name>=<value> [--variable <name>=<value> ...]]

使用最小参数，此命令将插件安装到cordova项目中。您必须为该平台指定平台和cordova项目位置。您还必须指定一个插件，其中不同的--plugin参数形式为：

name：插件内容所在的目录名称。这必须是--plugins_dir路径下的现有目录（有关详细信息，请参见下文）或Cordova注册表中的插件。
url：以https：//或git：//开头的URL，指向可克隆且包含plugin.xml文件的有效git存储库。该存储库的内容将被复制到--plugins_dir。
path：包含有效插件的目录的路径，该插件包含plugin.xml文件。此路径的内容将被复制到--plugins_dir。

其他参数：

--plugins_dir默认为/cordova/plugins，但可以是包含每个已获取插件的子目录的任何目录。
--www默认为项目的www文件夹位置，但可以是要用作cordova项目应用程序Web资产的任何目录。
--variable允许在安装时指定某些变量，这对于需要API密钥的某些插件或其他自定义的用户定义参数是必需的。有关更多信息，请参阅[插件规范](https://cordova.apache.org/docs/en/latest/plugin_ref/spec.html#Plugin Specification)。

删除插件

要卸载插件，只需传递uninstall命令并提供插件ID即可。

$ plugman uninstall --platform <ios|android> --project <directory> --plugin <id> [--www <directory>] [--plugins_dir <directory>]

查看Plugman帮助

plugman -help
plugman  # same as above

注意：plugman -help可能会显示一些与注册表相关的其他命令。这些命令适用于插件开发人员，可能无法在第三方插件注册表上实现。

您还可以将--debug|-d标志附加到任何Plugman命令，以在详细模式下运行该命令，该模式将显示发出的任何内部调试消息，并可帮助您跟踪丢失文件等问题。

# Adding Android battery-status plugin to "myProject":
plugman -d install --platform android --project myProject --plugin cordova-plugin-battery-status

最后，您可以使用该--version|-v标志查看您正在使用的Plugman版本。

plugman -v

插件仓库操作

有许多插件命令可用于与插件仓库进行交互。请注意，这些注册表命令特定于plugins.cordova.io插件注册表，可能不会由第三方插件注册表实现。

搜索插件

您可以使用Plugman在Plugin仓库中搜索与给定空格分隔的关键字列表匹配的插件ID。

plugman search <plugin keywords>

更改插件仓库

您可以获取或设置plugman正在使用的当前插件注册表的URL。通常，您应将此设置保留在http://registry.cordova.io，除非您要使用第三方插件注册表。

plugman config set registry <url-to-registry>
plugman config get registry

获取插件信息

您可以通过以下方式获取有关存储在插件存储库中的任何特定插件的信息：

plugman info <id>

这将联系插件注册表并获取插件的版本号等信息。

构建过程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rEOjAG2M-1688439895678)(…/…/2-3%20%E6%B7%B7%E5%90%88%E5%BC%8F%20App%20%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/resource/assets/Hybrid_App_Installer.png)]

默认情况下，cordova create脚本会生成基于Web的骨架应用程序，其起始页是项目的www/index.html文件。应该将任何初始化指定为在其中定义的deviceready事件处理程序的一部分www/js/index.js。

运行以下命令为所有平台构建项目：

$ cordova build

您可以选择将每个构建的范围限制为特定平台 - 在这种情况下为“ios”：

$ cordova build ios/android

配置Android打包环境

安装Android-sdk（或者跳过，安装Android-studio）

brew cask install android-sdk

// unix
// export ANDROID_SDK_ROOT=""

安装Java8

直接在官网上下载，即可

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fq2QgFT0-1688439895679)(assets/image-20190720194401868.png)]

Mac中配置方法：

配置JAVA_HOME
```
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_211.jdk/Contents/Home
```
在Mac上可以这样去查看
```
➜ /usr/libexec/java_home -V

Matching Java Virtual Machines (2):
    1.8.0_211, x86_64:	"Java SE 8"	/Library/Java/JavaVirtualMachines/jdk1.8.0_211.jdk/Contents/Home
    1.7.0_80, x86_64:	"Java SE 7"	/Library/Java/JavaVirtualMachines/jdk1.7.0_80.jdk/Contents/Home
```
Windows配置环境变量：

JAVA_HOME: D:\Java\jdk1.8.0(这里是自己安装的目录)

PATH: %JAVA_HOME%\bin

CLASSPATH: .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar(一定要注意有一个点号)
安装Android Studio(可选)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xVg5v4Qs-1688439895679)(assets/image-20190720194434487.png)]

安装Gradle

官方地址：https://gradle.org/install/

Windows平台：

步骤1. 下载最新的Gradle分发版

目前的Gradle版本是版本5.5.1，于2019年7月10日发布。分发zip文件有两种版本：

安装包
完整包，有文档和来源

如有疑问，请选择仅二进制版本并在线浏览文档和来源。

需要使用旧版本吗？请参阅版本页面

步骤2. 解压Gradle安装包

C:\Gradle使用文件资源管理器创建新目录。

打开第二个文件资源管理器窗口，然后转到下载Gradle分发版的目录。双击ZIP存档以显示内容。将内容文件夹gradle-5.5.1拖到新创建的C:\Gradle文件夹中。

或者，您可以C:\Gradle使用您选择的归档工具将Gradle分发ZIP解压缩。

步骤3. 配置环境变量

在**文件资源管理器中，**右键单击电脑（或我的电脑）图标，然后单击属性- > 高级系统设置- > 环境变量设置。

在系统变量下选择下Path，然后单击编辑。添加条目C:\Gradle\gradle-5.5.1\bin。

单击“确定”保存。

步骤4.验证您的安装

打开控制台（或Windows命令提示符）并运行gradle -v以运行gradle并显示版本，例如：

Mac平台

brew install gradle

常见问题1：

端口被占用：

export PATH=$PATH:/usr/local/android-sdk-linux/
export PATH=$PATH:/usr/local/android-sdk-linux/tools
export PATH=$PATH:/usr/local/android-sdk-linux/platform-tools
export PATH=$PATH:/usr/local/android-sdk-linux/build-tools

需要设置成为自己的sdk的目录。

常见问题2：

daemon卡死

gradle --stop

配置iOS打包环境

步骤1. 安装Xcode

步骤2. 安装npm依赖包

npm install -g ios-deploy

需要先安装xcode，再来安装ios-deploy

会打印很长的一串构建过程：

** BUILD SUCCEEDED **

/Users/itheima/.nvm/versions/node/v10.16.0/bin/ios-deploy -> /Users/itheima/.nvm/versions/node/v10.16.0/lib/node_modules/ios-deploy/build/Release/ios-deploy
+ [email protected]
added 1 package from 1 contributor in 10.023s

步骤3. 添加ios平台

cordova platform add ios

步骤4. 运行ios应用

# build ios应用
cordova build ios

# 需要配置开发者账号
cordova run ios

# 模拟器运行
cordova emulate ios

常见问题：

使用cordova requirements ios 去查看本地的开发环境还需要配置什么

安装cocoapods的命令：

sudo gem install cocoapods -n /usr/local/bin

# 然后使用pod --version查看版本，pod setup进行初始化配置
pod --version
1.7.5

平台与插件的升级

升级Cordova项目

Cordova项目没有升级命令。相反，从项目中删除平台，然后重新添加它以获取最新版本：

cordova platform rm android
cordova platform add android

阅读更新版本中的更改非常重要，因为更新可能会破坏您的代码。查找此信息的最佳位置将在存储库和Cordova博客上发布的发行说明中。您需要彻底测试您的应用，以便在执行更新后验证它是否正常工作。

注意：某些插件可能与新版本的Cordova不兼容。如果插件不兼容，您可能能够找到满足您需要的替换插件，或者您可能需要延迟升级项目。或者，更改插件以使其在新版本下工作并回馈社区。

//workflow
npm install -g cordova

cordova platform rm android
cordova platform rm ios
..

// git svn
// plugin

升级Cordova插件

升级插件涉及与平台相同的过程 - 将其删除，然后重新添加。

cordova plugin rm some-plugin
cordova plugin add some-plugin

一个简单的示例

使用该cordova实用程序设置新项目，如Cordova 命令行界面中所述。例如，在源代码目录中：

$ cordova create hello com.example.hello "HelloWorld"
$ cd hello
$ cordova platform add osx
$ cordova prepare              # or "cordova build"

运行应用程序

要在桌面上运行应用程序：

$ cordova run

你应该看到一个带有示例应用程序的边框窗口：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1ElJDhmt-1688439895680)(assets/helloworld_run.png)]

SPA项目集成

这里我们介绍与Vue项目的集成。

必要的依赖安装

# 全局安装cordova
npm i cordova -g

# 全局安装@vue/cli工具
npm i @vue/cli -g

初始化Vue项目：
```
vue create cordova-demo
```
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LhXQde0z-1688439895681)(assets/vue-cli.gif)]

上面演示了一种常规的SPA应用的配置

创建cordova打包应用

cordova create cordova-app

# 添加特定的平台
cordova platform add android
cordova platform add ios

配置cordova打包环境，见3.6

目录结构：

├── cordova-app
│   ├── config.xml
│   ├── hooks
│   ├── node_modules
│   ├── package-lock.json
│   ├── package.json
│   ├── platforms
│   ├── plugins
│   └── www
└── cordova-vue
    ├── README.md
    ├── babel.config.js
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    ├── postcss.config.js
    ├── public
    ├── src
    └── vue.config.js

配置vue.config.js

module.exports = {
    //基本路径
	publicPath: './',
	//输出文件目录
    outputDir: '../cordova-app/www',
    productionSourceMap:false, //不生成map
}

进行构建 vue应用
```
npm run build 
```
运行app，比如android
```
cordova run android
```

在Vue项目中使用Cordova，插件vue-cordova

npm install --save vue-cordova

在main.js中引入

import VueCordova from 'vue-cordova'
Vue.use(VueCordova)

// add cordova.js only if serving the app through file://
if (window.location.protocol === 'file:' || window.location.port === '3000') {
  var cordovaScript = document.createElement('script')
  cordovaScript.setAttribute('type', 'text/javascript')
  cordovaScript.setAttribute('src', 'cordova.js')
  document.body.appendChild(cordovaScript)
}

//测试的
Vue.cordova.on('deviceready', () => {
  console.log('Cordova : device is ready !');
  console.log('Vue.cordova :', Vue.cordova);
});

使用camera插件

# 在cordova-app中
cordova plugin add cordova-plugin-camera

测试一下

Vue.cordova.camera.getPicture((imageURI) => {
  window.alert('Photo URI : ' + imageURI)
}, (message) => {
  window.alert('FAILED : ' + message)
}, {
  quality: 50,
  destinationType: Vue.cordova.camera.DestinationType.FILE_URI
})

真机调试

方法一：Chrome/Safari进行调试，chrome://inspect/#devices

如果打开是白板，那么需要添加Host

# 编辑hosts文件，添加： 
61.91.161.217 chrome-devtools-frontend.appspot.com 
61.91.161.217 chrometophone.appspot.com

方法二：

使用weinre

# 安装
npm install weinre -g

# 使用查看帮助
weinre --help

修改 www/index.html，添加以下代码：

Html 代码

```

访问以下 URL 后，Targets 有了文件连接后，切换到 Elements 后就能调试页面了。

http://localhost:8080/client/#HelloVue

**特别说明：**

1. 真机测试中，不要使用localhost，使用本机IP，让手机与电脑在一个网段

设置weinre端口--httpPort 8090，设置绑定IP--boundHost 192.168.1.100(举例)
3. 测试完成之后，别忘记删除script标签

Phonegap

PhoneGap是一个免费且开源的开发环境，是一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。开发者可以开发出在Android、Palm、黑莓、iPhone、iTouch及iPad等设备上运行的App。其使用的是HTML和JavaScript等标准的Web开发语言。开发者使用PhoneGap进行开发，可调用加速计、GPS/定位、照相机、声音等功能。

PhoneGap的官网地址是 PhoneGap

Phonegap入门

安装桌面应用

下载并安装的新PhoneGap桌面应用程序，该应用程序目前处于测试阶段。提供Windows与Mac版本：

官方下载页面：https://github.com/phonegap/phonegap-app-desktop/releases

课程中显示的是这下面的版本：0.4.5

Mac: https://github.com/phonegap/phonegap-app-desktop/releases/download/0.4.5/PhoneGapDesktop.dmg

Windows: https://github.com/phonegap/phonegap-app-desktop/releases/download/0.4.5/PhoneGapSetup-win32.exe

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-38KSVdx8-1688439895681)(assets/Phonegap.gif)]

安装移动应用

PhoneGap Developer应用程序适用于多个平台，可让您在移动设备上运行PhoneGap项目，无需进行代码签名或编译。

Due to Apple guidelines, the PhoneGap Developer App has been removed from the iOS App Store. New users will be unable to download. No impact to Android or Windows versions.

PhoneGap目前不支持，直接下载ios PhoneGap应用。

Windows下载链接

Android下载链接

创建新的PhoneGap应用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G692RbVE-1688439895682)(assets/menu_screenshot.png)]

phoneGap提供了很多种快速入门的模板：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2XvdisW3-1688439895683)(assets/image-20190720115011342.png)]

开始调试

打开移动应用，输入IP与端口，点击Connect:（如图示，为http://192.168.31.103;3000与上图进行对应）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a6aVQRoU-1688439895683)(assets/connect.gif)]

PhoneGap build简介

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0UzMMrUo-1688439895684)(assets/image-20190725234305998.png)]

只需将您的HTML5，CSS和JavaScript资产上传到Adobe®PhoneGap™Build云服务，我们就会为您进行编译工作。

Simply upload your HTML5, CSS, and JavaScript assets to the Adobe® PhoneGap™ Build cloud service and we do the work of compiling for you.

特点：

云服务
支持多平台打包
团队协作
快速部署，分享应用

关于icon与splash启动页面的在线生成工具：

icon：https://makeappicon.com/

iOS Splash：http://ios.hvims.com/

Android Launcher Icon Generator：https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html

Cordova icon的自定义说明：https://cordova.apache.org/docs/en/latest/config_ref/images.html

Cordova定义启动页面：https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/index.html

设计指南：

Apple的Icon与图片设计指南：

https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/

Android设计指南：

http://iconhandbook.co.uk/reference/chart/android/

指南网站：

http://iconhandbook.co.uk/reference/chart/

Phonegap第三方库

https://phonegap.com/tool/

Ionic

免费和开源，Ionic提供了一个移动和桌面优化的HTML，CSS和JS组件库，用于构建高度交互的应用程序。可以与Angular，React，Vue或纯JavaScript一起使用。

Ionic应用程序主要通过Ionic命令行实用程序（“CLI”）创建和开发，并使用Cordova构建/部署为本机应用程序。

Ionic是Angular的衍生品，Angular是单独的JS库，和jQuery一样能够独立用于开发应用，而Ionic只是对Angular进行了扩展，利用Angular实现了很多符合移动端应用的组件，并搭建了很完善的样式库，是对Angular最成功的应用样例。即使不使用Ionic，Angular也可与任意样式库，如Bootstrap、Foundation等搭配使用，得到想要的页面效果。

Currently, Ionic Framework has official integration with Angular, but support for Vue and React are in development. If you’d like to learn more about Ionic Framework before diving in, we created a video to walk you through the basics.

Ionic与Cordova

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fHtdCGY5-1688439895684)(assets/70.png)]

起步与使用

使用Node和NPM设置，让我们安装Ionic和Cordova CLI。

$ npm install -g ionic cordova

注意：这-g意味着这是全局安装，因此对于Windows，您需要打开Admin命令提示符。对于Mac / Linux，您可能需要运行该命令sudo。

完成后，创建您的第一个Ionic应用程序：

$ ionic start helloWorld

要运行您的应用程序，请cd进入已创建的目录，然后运行 ionic serve命令以在浏览器中直接测试您的应用程序！

$ cd helloWorld
$ ionic serve

VSCode配置

配置vscode以对ionic+angular支持：

Angular Extension Pack:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AlCWhS1j-1688439895685)(assets/image-20190726004618080.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f4rsiZf7-1688439895685)(assets/image-20190726004809534.png)]

Ionic Extension Pack:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k2Ec0PUY-1688439895686)(assets/image-20190726004535923.png)]

TypeScript保存自动修复：

在VSCode的settings.json中加入

  "editor.codeActionsOnSave": {
    "source.fixAll.tslint": true
  },

核心概念

ionic是一个混合App开发框架，ionic以Angularjs和Cordova为基础，使用npm进行模块管理，使用HTML\CSS\JS进行App开发。

UI组件

Ionic Framework是一个UI组件库，它是可重用的元素，用作应用程序的构建块。ionic组件是用网络标准使用HTML，CSS和JavaScript。虽然这些组件是预先构建的，但它们是从头开始设计的，可以高度自定义，因此应用程序可以将每个组件都自己制作，从而使每个应用程序都拥有自己的外观和感觉。更具体地说，Ionic组件可以轻松地主题化，以在整个应用程序中全局更改外观。有关自定义外观的更多信息，请参阅主题化。
跨平台

Platform Continuity是Ionic Framework的内置功能，允许应用程序开发人员在多个平台上使用相同的代码库。每个Ionic组件都会将其外观调整为运行应用程序的平台。例如，Apple设备（如iPhone和iPad）使用Apple自己的iOS设计语言。同样，Android设备使用Google的设计语言Material Design。

通过在平台之间进行细微的设计更改，用户可以获得熟悉的应用体验。从Apple的App Store下载的Ionic应用程序将获得iOS主题，而从Android Play商店下载的Ionic应用程序将获得Material Design主题。对于从浏览器中被视为渐进式Web应用程序（PWA）的应用程序，Ionic将默认使用Material Design主题。此外，决定在某些场景中使用哪个平台是完全可配置的。有关平台连续性的更多信息，请参阅主题化。
路由(使用Angular-router)

传统的网络应用程序使用线性历史记录，这意味着用户可以向前导航到某个页面，并可以点击后退按钮进行导航。这方面的一个例子是点击维基百科，用户在浏览器的线性历史堆栈上前进和后退。

相比之下，移动应用程序通常使用并行的“非线性”导航。例如，选项卡式界面可以为每个选项卡分别设置导航堆栈，确保用户在导航和切换选项卡时不会失去位置。

Ionic应用程序采用这种移动导航方法，支持也可以嵌套的并行导航历史，同时保持Web开发人员熟悉的熟悉的浏览器式导航概念。

对于使用Angular构建的应用程序@ionic/angular，我们建议使用开箱即用的Angular Router，用于每个新的Ionic 4 Angular应用程序。Ionic的早期版本附带了我们自己的定制路由器，但为了提供最佳的工具和开发人员体验，我们已经转向使用框架推荐的路由器。
主题化

在核心，Ionic Framework是使用CSS构建的，它允许我们利用CSS属性（变量）提供的灵活性。这使得设计一个看起来很棒的应用程序非常容易，同时遵循Web标准。我们提供一组颜色，以便开发人员可以拥有一些很棒的默认值，但我们鼓励覆盖它们以创建与品牌，公司或所需调色板相匹配的设计。从应用程序的背景颜色到文本颜色的所有内容都可以完全自定义。有关应用主题的更多信息，请参阅主题化。

目录介绍：

resources : android/ios 资源(更换图标和启动动画)

src: 开发工作目录，页面、样式、脚本和图片都放在这个目录下

www: 静态文件，ionic build --prod 生成的单页面静态资源文件

platforms: 生成 android 或者 ios 安装包需要的资源—(cordova platform add android 后会生成)

plugins: 插件文件夹，里面放置各种 cordova 安装的插件

config.xml: 打包成 app 的配置文件

package.json: 配置项目的元数据和管理项目所需要的依赖

ionic.config.json、ionic.starter.json:ionic 配置文件

angular.json angular 配置文件

tsconfig.json: TypeScript 项目的根目录，指定用来编译这个项目的根文件和编译选项

tslint.json:格式化和校验 typescript

Ionic相关的资源介绍

Ionic官网：https://ionicframework.com，同ionic.io

Ionic Github: https://github.com/ionic-team/ionic

Ionic中文： http://www.ionic.wang/js_doc-index.html

Ionic Icons: https://ionicons.com/

Ionic Native: https://github.com/ionic-team/ionic-native

Ionic CLI

创建模板项目

ionic start

使用start命令快速创建ionic项目：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qvdVIJzc-1688439895686)(assets/ionic-start.gif)]

资源文件的处理

npm i -g cordova-res

用法介绍：

cordova-res --help

此工具将裁剪和调整JPEG和PNG源图像的大小，以便为iOS和Android设备生成图像。

cordova-res 必须在Cordova项目的根目录下运行，例如：

resources/
├── icon.png
└── splash.png
config.xml

resources/icon.png 必须至少1024×1024px
resources/splash.png 必须至少为2732×2732px

还支持Android 自适应图标。如果您选择使用它们，请创建以下附加文件：

resources/android/icon-foreground.png 必须至少432×432px
resources/android/icon-background.png 必须至少432×432px

如果使用自适应图标，则不会生成常规Android图标。

通过使用--icon-background-source十六进制颜色代码指定选项，例如，也可以将颜色用于图标背景--icon-background-source '#FFFFFF'

Ionic默认模板

查看ionic提供的模板：

$ ionic start --list

结果：

Starters for @ionic/angular (--type=angular)

name         | description
--------------------------------------------------------------------------------------
tabs         | A starting project with a simple tabbed interface
sidemenu     | A starting project with a side menu with navigation in the content area
blank        | A blank starter project
my-first-app | An example application that builds a camera with gallery
conference   | A kitchen-sink application that shows off all Ionic has to offer


Starters for @ionic/react (--type=react)

name       | description
------------------------------------------------------------------------------------
blank      | A blank starter project
sidemenu   | A starting project with a side menu with navigation in the content area
tabs       | A starting project with a simple tabbed interface
conference | A kitchen-sink application that shows off all Ionic has to offer


Starters for Ionic 2/3 (--type=ionic-angular)

name     | description
----------------------------------------------------------------------------------------------------------------
tabs     | A starting project with a simple tabbed interface
sidemenu | A starting project with a side menu with navigation in the content area
blank    | A blank starter project
super    | A starting project complete with pre-built pages, providers and best practices for Ionic development.
tutorial | A tutorial based project that goes along with the Ionic documentation
aws      | AWS Mobile Hub Starter


Starters for Ionic 1 (--type=ionic1)

name     | description
---------------------------------------------------------------------------------------------
tabs     | A starting project for Ionic using a simple tabbed interface
sidemenu | A starting project for Ionic using a side menu with navigation in the content area
blank    | A blank starter project for Ionic
maps     | An Ionic starter project using Google Maps and a side menu

命令的使用方式：

ionic start

描述	如果`true`，网格将具有基于屏幕大小的固定宽度。
属性	`fixed`
类型	`boolean`
默认	`false`

名称	值	描述
xs	100％	不要为xs屏幕设置网格宽度
sm	540px	设置网格宽度为540px时（最小宽度：576px）
md	720像素	（最小宽度：768px）时将网格宽度设置为720px
lg	960像素	（最小宽度：992px）时将网格宽度设置为960px
xl	1140px	（最小宽度：1200px）时将网格宽度设置为1140px

名称	描述
`--ion-grid-padding`	网格填充
`--ion-grid-padding-lg`	在lg屏幕上填充网格
`--ion-grid-padding-md`	在md屏幕上填充网格
`--ion-grid-padding-sm`	在sm屏幕上填充网格
`--ion-grid-padding-xl`	在xl屏幕上填充网格
`--ion-grid-padding-xs`	在xs屏幕上填充网格
`--ion-grid-width`	固定网格的宽度
`--ion-grid-width-lg`	lg屏幕上固定网格的宽度
`--ion-grid-width-md`	md屏幕上固定网格的宽度
`--ion-grid-width-sm`	sm屏幕上固定网格的宽度
`--ion-grid-width-xl`	xl屏幕上固定网格的宽度
`--ion-grid-width-xs`	xs屏幕上固定网格的宽度

属性	描述
nowrap	添加`flex-wrap: nowrap`。强制列为单行。
wrap-reverse	添加`flex-wrap: wrap-reverse`。列将反向换行。
align-items-start	添加`align-items: flex-start`。所有列都将在顶部垂直对齐，除非它们指定自己的对齐方式。
align-items-center	添加`align-items: center`。所有列都将在中心垂直对齐，除非它们指定自己的对齐方式。
align-items-end	添加`align-items: flex-end`。所有列都将在底部垂直对齐，除非它们指定自己的对齐方式。
align-items-stretch	添加`align-items: stretch`。所有列都将被拉伸以占据行的整个高度，除非它们指定自己的对齐方式。
align-items-baseline	添加`align-items: baseline`。所有列都将在其基线处垂直对齐，除非它们指定自己的对齐方式。
justify-content-start	添加`justify-content: start`。所有列将在开始时水平对齐。
justify-content-center	添加`justify-content: center`。所有列都将在中心水平对齐。
justify-content-end	添加`justify-content: end`。所有列将在末尾水平对齐。
justify-content-around	添加`justify-content: space-around`。所有列都将水平对齐，周围的空间相等。
justify-content-between	添加`justify-content: space-between`。所有列都将水平对齐，两端各有一个半角空间。

名称	描述
`ionTabsDidChange`	导航完成转换为新组件时发出。
`ionTabsWillChange`	导航即将转换为新组件时发出。

名称	描述
Slot	如果没有插槽，则将内容放置在命名插槽之间。
`"bottom"`	内容位于屏幕底部。
`"top"`	内容位于屏幕顶部。

值	细节
`block`	带圆角的全宽按钮。
`full`	带有方角的全宽按钮，左侧或右侧没有边框。

值	细节
`clear`	具有透明背景的按钮，类似于平面按钮。
`outline`	带有透明背景和可见边框的按钮。
`solid`	按钮有填充的背景。对于工具栏中的按钮很有用。

值	细节
`small`	高度和填充较少的按钮。项目中按钮的默认值。
`default`	具有默认高度和填充的按钮。对于项目中的按钮很有用。
`large`	按钮有更多的高度和填充。

钩子	用途及时机
`ngOnChanges()`	当 Angular（重新）设置数据绑定输入属性时响应。该方法接受当前和上一属性值的 `SimpleChanges` 对象在 `ngOnInit()` 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。
`ngOnInit()`	在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。在第一轮 `ngOnChanges()` 完成之后调用，只调用一次。
`ngDoCheck()`	检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应。在每个变更检测周期中，紧跟在 `ngOnChanges()` 和 `ngOnInit()` 后面调用。
`ngAfterContentInit()`	当 Angular 把外部内容投影进组件/指令的视图之后调用。第一次 `ngDoCheck()` 之后调用，只调用一次。
`ngAfterContentChecked()`	每当 Angular 完成被投影组件内容的变更检测之后调用。`ngAfterContentInit()` 和每次 `ngDoCheck()` 之后调用
`ngAfterViewInit()`	当 Angular 初始化完组件视图及其子视图之后调用。第一次 `ngAfterContentChecked()` 之后调用，只调用一次。
`ngAfterViewChecked()`	每当 Angular 做完组件视图和子视图的变更检测之后调用。`ngAfterViewInit()` 和每次 `ngAfterContentChecked()` 之后调用。
`ngOnDestroy()`	每当 Angular 每次销毁指令/组件之前调用并清扫。在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏。在 Angular 销毁指令/组件之前调用。

描述	导航到其他页面时，过渡效果，一般与路由routerLink配合使用。
属性	`router-direction`
类型	`“back”
默认	`'forward'`

混合式 App 开发框架

2-3 混合式 App 开发框架

介绍

混合式App的工作原理

混合式App（Hybrid App）

Hybrid App工作原理

与原生/WebApp框架比较

常见的混合式App框架

Cordova

安装与起步

支持的平台及打包

平台管理

保存平台

更新或删除平台

恢复平台

跨平台通用插件管理

保存插件

在项目中保存现有插件

删除插件

恢复插件

插件系统Plugman

添加插件

删除插件

查看Plugman帮助

插件仓库操作

构建过程

配置Android打包环境

配置iOS打包环境

平台与插件的升级

一个简单的示例

SPA项目集成

Phonegap

Phonegap入门

安装桌面应用

安装移动应用

创建新的PhoneGap应用

开始调试

PhoneGap build简介

Phonegap第三方库

Ionic

Ionic与Cordova

起步与使用

VSCode配置

核心概念

Ionic相关的资源介绍

Ionic CLI

创建模板项目

资源文件的处理

Ionic默认模板

Ionic与Cordova相关的构建命令

iOS及Android打包

Angular相关介绍

Ionic常用组件介绍

Grid控件

Tab控件

button

Input

Loading

Alert

Toast

Grid布局

Modal

Toolbar控件

Card

Navigation

Ionic中的网络请求

Ionic Native

实际项目应用ionic+Angularjs

补充学习

自建PhoneGap iOS开发者应用

Cordova中文网

Cordova核心插件

Gradle构建优化

开启daemon

设置heap大小

开启offline

设置并行构建

加速brew下载

加速Android SDK下载

修改 hosts 文件