Cordova 框架：Ionic 与 Framework7

如今，Web 开发人员统治着世界。 JavaScript 可用于任何可以编程的地方。 在这些领域中，移动应用程序开发是最早的分支方式之一：大约十年前，PhoneGap 允许为 iOS 和 Android 安装 HTML 和 JavaScript 应用程序。

从那时起，该技术起起落落：尽管易于开发，但这些应用程序显然与原生应用程序有很大不同。 Vanilla HTML 和基于浏览器的 JavaScript 是针对浏览器的，它们无法完美地迁移到这个新领域。

时至今日，主要问题仍然是：

• 难以坚持原生设计和动画
• 复杂的画面过渡效果
• 触摸事件处理
• 在大名单上的表现
• 定位固定元素
• 适应不同的屏幕尺寸
• 本机控件元素的位置（例如，iOS 状态栏）
• 适配不同的手机浏览器

为什么要为 Cordova 应用程序使用框架？

由于存在上述问题的应用程序，Cordova 技术经常被低估。 框架旨在抵消它们，并使 HTML 应用程序在设计和性能方面尽可能接近原生应用程序。

让我们看几个混合应用程序示例。 它们是由目前最成功的两个框架（除了 Onsen UI 之外）制成的，它们旨在促进 Web 开发人员在现代世界中的扩展：Framework7 和 Ionic。

关于离子框架

Ionic 由 Drifty Co. 于 2012 年开发，基于 Angular。 从那时起，它一直在积极开发中，获得了大量投资和强大的开发者社区。 官方网站声称已经基于它开发了数百万个应用程序。

在撰写本文时，最新版本是基于 Angular 5 的 Ionic 3。Ionic 4 旨在实现与 Angular 的灵活性和独立性，目前处于早期测试阶段。

除了 UI 引擎、出色的组件库和访问本机设备功能的接口之外，Ionic 还提供了多种额外的功能、服务和实用程序。

离子 CLI

Ionic 的命令行界面用于交互式项目初始化（即向导）、生成页面和组件，以及运行允许您在旅途中构建应用程序并实时重新加载它们的开发服务器。 它还提供与 Ionic 云服务的集成。

实验室和 DevApp

Lab 是一个非常有用的小服务，可以让你在 Ionic 开发者的浏览器中模仿不同平台上的应用程序的工作。 DevApp 可帮助您将应用程序快速部署到真实设备。

打包、部署和监控

Ionic 附带了一系列 Web 服务，可以为测试人员和用户简化和加速构建、调试、测试和更新应用程序。

不过，Ionic 的计划经常变化。 一些先前存在的服务——例如 Auth、Push、Analytics 和 View——被关闭，引起了订阅者的强烈抗议。

创作者

这是 Ionic 用于开发功能界面的拖放式图形编辑器。

关于Framework7

该框架由俄罗斯工作室 iDangero 于 2014 年开发。 最终，一位开发人员一直在从事该项目，其中不包括 GitHub 存储库的几个小贡献者。

最初，Framework7 由一组 UI 组件组成，采用当时最近发布的 iOS 7 的风格，因此得名。 后来，添加了一个 Android 主题，并且两个主题都针对最新的 iOS 和 Material Design 进行了更新。

最近，该项目的开发步伐加快，它从一套组件扩展到一个成熟的移动应用程序框架，集成了流行的技术和工具。

Framework7 的支持和使用 Vue.js 的示例从 v1 开始就存在，v3 也支持 React。 这可能使该项目能够与仅提供 Angular 和 TypeScript 的更流行的 Ionic 进行激烈竞争。

安装和首次启动

离子

要开始使用 Ionic，请使用 NPM 安装它：

 npm install -g ionic

然后，为将来的应用程序选择模板。 Ionic 官方网站提供了多个模板，或者您可以选择一个空模板来从头开始构建应用程序ionic start myApp blank 。

让我们选择一个简单的设计。 执行以下命令：

 ionic start Todo tabs

当安装程序询问“您想将您的新应用程序与 Cordova 集成以针对原生 iOS 和 Android 吗？”时，回答“是” 。 这将自动将应用程序与 Cordova 集成，并为在移动平台上的部署做好准备。

在下一步中，安装程序将提供将我们连接到 Ionic Pro SDK。 现在回答“否”以保持示例简单。

安装附加的@ionic/lab包以获得方便的调试 UI — iOS、Android 和 Windows 设备的浏览器模拟：

 cd Todo npm i --save-dev @ionic/lab

现在您可以在调试模式下启动应用程序。 这允许您在 Web 浏览器中实时开发和调试应用程序：

 ionic lab

结果，您将获得几个有用的地址：

Ionic Lab 调试服务在端口 8200 上启动。应用程序本身在端口 8100 上运行，来自 Ionic Lab 的Open fullscreen链接指向那里。 运行 Ionic Lab 的浏览器窗口会自动打开。

此外，Ionic 提供本地网络中的应用程序地址。 这非常有用，因为它允许您在移动设备浏览器中打开应用程序，只要设备在本地网络中（例如，通过 Wi-Fi）。 此外，您可以使用添加到主屏幕按钮以全屏模式重新打开应用程序。 这是在设备上测试应用程序的最快方法。

另一种方式是 Ionic DevApp 应用程序，它可以安装在移动设备上，并通过本地网络提供对应用程序的访问。 它提供插件支持（Ionic Native）以访问本机设备功能和显示日志。

框架7

F7 的开发工具不如 Ionic 先进，并且没有记录自动初始化 CLI。 但是，官方网站提供了几个带有模板项目的 GitHub 存储库，可以帮助您开始开发。

与 Ionic 中的Tabs模板类似，F7 提供了Tabbed Views ，但我们将使用一个功能更强大的模板，它将 Framework7 与 React 集成在一起。 在 v3 中添加了对 React 的支持。 为此，克隆模板存储库：

 git clone https://github.com/framework7io/framework7-template-react.git Todo

切换到项目文件夹，获取依赖项，然后开始该过程：

 cd Todo npm install npm start

执行结果与 Ionic 类似：您获得一个本地链接和一个网络内的链接，以便从真实设备即时访问：

现在您可以在浏览器中打开http://localhost:3000/ 。 Framework7 不包含内置的设备模拟器，所以让我们使用 Chrome DevTools 的设备模式来获得类似的结果：

如您所见，Framework7 与 Ionic 的相似之处在于它以 iOS 和 Material Design 作为其两个标准主题。 根据平台选择主题。

遗憾的是，与官方 React 模板中支持 Vue.js 的类似模板不同，Webpack 尚未实现，这使我们无法使用热模块替换来快速更新应用程序而无需重新加载页面。 尽管如此，您仍然可以使用默认的实时重新加载功能，该功能会在您更改源代码时重新加载页面。

设置科尔多瓦

要使用 Cordova 在设备和模拟器上安装应用程序，您需要下载并设置适用于 iOS 和 Android 的开发工具以及 Cordova CLI。 您可以在我们之前的文章和 Cordova 官方网站的 iOS 平台指南和 Android 平台指南部分阅读更多相关信息。

离子

经验表明，要成功解决大多数 Ionic 问题，基于浏览器的调试并偶尔在真实设备上进行测试就足够了。

尽管您接受了 iOS 和 Android 的集成，并且 Ionic 在config.xml文件和resources文件夹中的资源中准备了所需的设置，但您仍然需要使用 Cordova 将两个平台连接到应用程序：

 cordova platform add ios cordova platform add android

现在，您可以在“真实”模拟器中启动 Cordova 应用程序，将其安装在移动设备上，甚至将其发送到 App Store 和 Google Play。

如果通过 USB 连接，下一个命令会将应用程序安装到您的 iOS 设备。 否则，应用程序将安装在 iOS 模拟器上。

 cordova run ios

Xcode 命令行工具很可能会通知您需要设置开发人员证书。 您需要在 Xcode 中打开项目并执行所需的操作。 只需执行一次，之后您就可以使用 Cordova CLI 运行应用程序。

有时 iOS 模拟器不会自动启动。 在这种情况下，请手动启动它，例如通过 Spotlight。

Android 模拟器可以通过类似的方式启动：

 cordova run android 

请注意， cordova run命令会启动并安装已编译的应用程序，该应用程序不使用ionic serve / ionic lab服务器，因此 Live Reload 将无法工作。 要实时开发和调试应用程序，请使用本地网络中的浏览器或安装 Ionic DevApp 应用程序。

经验表明，要成功解决大多数 Ionic 问题，基于浏览器的调试并偶尔在真实设备上进行测试就足够了。

框架7

之前选择的“React”Framework7 模板没有为 Cordova 提供设置自动化，因此您需要手动添加平台。 在项目文件夹的cordova子文件夹中创建一个 Cordova 项目：

 cordova create cordova/ com.example.todo Todo cd cordova/ cordova platform add ios cordova platform add android cd ../

该模板基于 Create React App，因此要在 Cordova 环境中运行编译后的项目，您需要添加"homepage": "." 设置为./package.json文件。 此文件可以在项目的根级别找到：

编译 Framework7 项目并将结果复制到 Cordova 项目：

 npm run build rm -rf cordova/www/* cp -r build/* cordova/www/

现在您可以在设备或模拟器上启动应用程序：

 cd cordova/ cordova run ios 

你完成了！ 让我们希望 Framework7 能够赶上 Ionic 的开发标准和初始设置的便利性。

创建任务列表

离子

让我们终于开始创建应用程序了！ 由于这是一个待办事项应用程序，因此主页（ src/pages/home/home.html文件）将包含能够“标记已完成”和“添加新”的任务列表。

Ionic 为列表提供了组件<ion-list>和<ion-item> 。 首先，从<ion-content>元素中删除padding属性以使列表全屏显示。 在列表中，使用<ion-label>元素放置文本并添加<ion-toggle>元素以标记已完成的任务。

 <ion-content> <ion-list> <ion-item> <ion-label>Hello</ion-label> <ion-toggle></ion-toggle> </ion-item> <ion-item> <ion-label>Toptal</ion-label> <ion-toggle></ion-toggle> </ion-item> <ion-item> <ion-label>Blog</ion-label> <ion-toggle></ion-toggle> </ion-item> </ion-list> </ion-content>

返回运行 Ionic Lab 服务的浏览器选项卡。 该应用程序已自动更新：

伟大的！ 现在将任务数据移动到 JS 对象并使用 Angular 设置其 HTML 表示。 转到src/pages/home/home.ts文件并创建HomePage类实例的 tasks 属性：

 export class HomePage { tasks = [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }]; constructor() { } }

现在您可以在 HTML 代码中引用tasks数组。 使用*ngFor Angular 构造迭代地为每个数组元素创建列表元素。 代码变小了：

 <ion-list> <ion-item *ngFor="let task of tasks"> <ion-label>{{task.name}}</ion-label> <ion-toggle></ion-toggle> </ion-item> </ion-list>

剩下的就是在页眉中添加用于创建新任务的按钮。 为此，请使用<ion-navbar> 、 <ion-buttons> 、 <button>和<ion-icon>组件：

 <ion-header> <ion-navbar> <ion-title>To Do List</ion-title> <ion-buttons end> <button ion-button icon-only (click)="addTask()"> <ion-icon name="add-circle"></ion-icon> </button> </ion-buttons> </ion-navbar> </ion-header>

注意(click)="addTask()" Angular 构造。 正如你所猜到的，它将点击处理程序添加到按钮并为我们的组件调用addTask()方法。 让我们实现这个方法以在点击按钮时打开任务名称对话框窗口。

为此，您需要AlertController Ionic 组件。 要使用此组件，请导入其类型：

 import { AlertController } from 'ionic-angular';

并在页面的构造函数参数列表中指定它：

 constructor(public alertCtrl: AlertController) { }

现在您可以在addTask()方法中调用它。 在控制器之后设置它。 您可以使用以下调用创建和显示对话窗口：

 this.alertCtrl .create(/* options */) .present();

在options对象中指定消息头、字段描述和两个按钮。 “确定”按钮将向tasks数组添加一个新任务：

 handler: (inputs) => { this.tasks.push({ name: inputs.name }); }

将元素添加到数组this.tasks后，组件将被重新构建，并且新任务将显示在列表中。

完整的页面代码现在看起来像这样：

 import { Component } from '@angular/core'; import { AlertController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { tasks = [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }]; constructor(public alertCtrl: AlertController) { } addTask() { this.alertCtrl .create({ title: 'Add Task', inputs: [ { name: 'name', placeholder: 'Task' } ], buttons: [ { text: 'Cancel', role: 'cancel' }, { text: 'Add', handler: ({ name }) => { this.tasks.push({ name }); } } ] }) .present(); } } 

在设备上重新安装应用程序：

 cordova run ios

而已！ 没那么难，是吗？ 现在让我们尝试对 Framework7 做同样的事情。

框架7

Framework7 模板是为了展示所有的组件能力，所以只需要在src/components/App.jsx和src/routes.js文件中留下src/components/pages/HomePage.jsx页面，清理其内容并删除额外的代码注释。

现在创建任务列表。 Framework7 为此提供了<List simple-list>和<ListItem>组件。 要在其中放置任务完成开关，请添加<Toggle slot="after"/>组件。 请记住从framework7-react模块中导入所有这些组件。 现在页面代码如下所示：

 import React from 'react'; import { Page, Navbar, NavTitle, List, ListItem, Toggle } from 'framework7-react'; export default () => ( <Page> <Navbar> <NavTitle>To Do List</NavTitle> </Navbar> <List simple-list> <ListItem title="Hello"> <Toggle slot="after"/> </ListItem> <ListItem title="Toptal"> <Toggle slot="after"/> </ListItem> <ListItem title="Blog"> <Toggle slot="after"/> </ListItem> </List> </Page> );

应用程序本身如下所示：

不错的开始。 让我们再次尝试将静态数据从 HTML 代码中移出。 为此，请使用智能组件而不是我们拥有的无状态组件。 从 React 导入Component抽象类：

 import React, { Component } from 'react';

并将任务数组写入state变量实例：

 export default class HomePage extends Component { state = { tasks: [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }] }; /* ... */ }

真正的应用程序可能会使用更抽象的数据流——例如使用 Redux 或 MobX——但对于一个小例子，我们将保留内部组件状态。

现在您可以使用 JSX 语法为数组中的每个任务迭代地创建列表元素：

 {this.state.tasks.map((task, i) => ( <ListItem title={task.name} key={i}> <Toggle slot="after"/> </ListItem> ))}

剩下的就是添加带有按钮的标题以再次创建新任务。 <Navbar>元素已存在，因此将<Link iconOnly>添加到<NavRight>元素：

 <Navbar> <NavTitle>To Do List</NavTitle> <NavRight> <Link iconOnly iconF7="add_round_fill" onClick={this.addTask}/> </NavRight> </Navbar>

在 React 中，您通过使用onClick属性并在其中设置回调指针来添加点击处理程序。 实现处理程序以显示任务名称对话框。

Framework7 中的每个元素都可以通过this.$f7属性访问应用程序实例。 您可以通过这种方式使用dialog.prompt()方法。 在关闭对话框之前，调用 React 组件的setState()方法并将前一个数组的副本与新元素一起传递给它。 这将反应性地更新列表。

 addTask = () => { this.$f7.dialog.prompt('Task Name:', 'Add Task', (name) => { this.setState({ tasks: [ ...this.state.tasks, { name } ] }); }); };

这是完整的组件代码：

 import React, { Component } from 'react'; import { Page, Navbar, NavTitle, NavRight, Link, List, ListItem, Toggle } from 'framework7-react'; export default class HomePage extends Component { state = { tasks: [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }] }; addTask = () => { this.$f7.dialog.prompt('Task Name:', 'Add Task', (name) => { this.setState({ tasks: [ ...this.state.tasks, { name } ] }); }); }; render = () => ( <Page> <Navbar> <NavTitle>To Do List</NavTitle> <NavRight> <Link iconOnly iconF7="add_round_fill" onClick={this.addTask}/> </NavRight> </Navbar> <List simple-list> {this.state.tasks.map((task, i) => ( <ListItem title={task.name} key={i}> <Toggle slot="after"/> </ListItem> ))} </List> </Page> ); }

检查结果：

剩下的就是重建并部署到设备：

 npm run build rm -rf cordova/www/* cp -r build/* cordova/www/ cd cordova/ cordova run ios

完毕！

这两个项目的最终代码都可以在 GitHub 上找到：

• 离子待办事项应用程序
• framework7-react-todo-app

结果

现在您已经看到了每个 Cordova 框架的完整教程。 Framework7 如何与 Ionic 相抗衡？

最初设定

由于其 CLI，Ionic 更容易安装，而 F7 需要更多时间来选择和设置模板或从头开始逐步安装。

组件多样性

这两个框架在两个主题中都有一整套精心制作的标准组件：iOS 和 Material Design。 Ionic 还在 Windows 主题和巨大的用户主题市场中提供了这些组件。

除了完全模仿原生设计和动画之外，性能优化也受到了很多关注，从而提供了出色的结果：通常，几乎不可能将任一框架上的应用程序与原生应用程序区分开来。

Framework7 提供了更复杂和有用的组件的附加列表，例如Smart Select 、 Autocomplete 、 Calendar 、 Contacts List 、 Login Screen 、 Messages和Photo Browser 。 另一方面，Ionic 提供了大量用户创建的组件。

生态系统和社区

由于其更长的寿命、强大的财务支持和活跃的社区，Ionic 显然在这些参数上获胜。 离子基础设施不断发展：支持服务和云解决方案让位于新的，插件的数量不断增长。

Framework7 比以往任何时候都好，但严重缺乏社区支持。

第三方依赖

Framework7 在第三方解决方案方面更加灵活。 它最大的优势可能是可以选择在项目中使用 Vue 还是 React，以及 Webpack 或 Browserify。 Ionic 基于 Angular，需要相关知识（因此也需要 TypeScript。）

然而，最近，Ionic 开发人员宣布了一个新的 Ionic 4 测试版，声称完全与 UI 框架无关——如果您不想要它们，则不再有 Angular 依赖项。

Cordova 框架：仍然是开发跨平台移动应用程序的强大方法

是否使用 Cordova 取决于具体的项目。 事实上，混合移动应用程序开发的速度及其对多平台的支持是其主要优势。 但这始终是一种权衡，有时您可能会面临一些原生方法不存在的缺陷。 这些出色的框架及其社区在减少这些缺陷并使我们的生活更轻松方​​面做得很好。 那么，为什么不试一试呢？