Cordova框架：Ionic与Framework7

本文概述

• 为什么要为Cordova应用程序使用框架？
• 关于Ionic框架
• 关于Framework7
• 安装和首次启动
• 设置Cordova
• 创建任务列表
• 结果
• Cordova框架：仍然是开发跨平台移动应用程序的有力方法

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

从那时起, 这项技术便起起伏伏：尽管易于开发, 但这些应用程序与本机应用程序显然有很大不同。 Vanilla HTML和基于浏览器的JavaScript都是针对浏览器的, 因此他们无法完美地迁移到这个新领域。

到目前为止, 主要问题仍然是：

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

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

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

让我们看几个混合应用示例。它们是由两个目前最成功的框架(除了Onsen UI)构成的, 它们旨在促进现代Web开发人员的扩展：Framework7和Ionic。

关于Ionic框架

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

在撰写本文时, 最新版本是基于Angular 5的Ionic3。旨在提高灵活性和与Angular的独立性的Ionic 4处于早期测试阶段。

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

IonicCLI

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进行了更新。

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

自v1以来, 就存在Framework7对Vue.js的支持和示例, 而v3也支持React。这可能会使该项目与仅提供Angular和TypeScript的更流行的Ionic进行严重竞争。

安装和首次启动

Ionic

要开始使用Ionic, 请通过NPM安装它：

npm install -g ionic

然后, 为将来的应用选择模板。 Ionic官方网站提供了多个模板, 或者你可以选择一个空模板以ionic开头myApp空白来重新构建应用程序。

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

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视图, 但我们将使用功能更强大的模板, 该模板将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尚未实现, 这使我们无法使用Hot Module Replacement快速更新应用程序而无需重新加载页面。不过, 你仍可以使用默认的实时重新加载功能, 该功能可以在你更改源代码时重新加载页面。

设置Cordova

要使用Cordova在设备和仿真器上安装应用程序, 你需要下载并设置适用于iOS和Android以及Cordova CLI的开发工具。你可以在我们的上一篇文章以及Cordova官方网站上的iOS平台指南和Android平台指南部分中阅读有关此内容的更多信息。

Ionic

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

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

cordova platform add ios

cordova platform add android

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

如果通过USB连接, 则下一个命令会将应用程序安装到iOS设备。否则, 该应用程序将安装在iOS Simulator上。

cordova run ios

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

有时, iOS Simulator不会自动启动。在这种情况下, 请手动启动它, 例如通过Spotlight。

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

cordova run android

请注意, cordova run命令将启动并安装已编译的应用程序, 该应用程序不使用Ionic服务/Ionic实验室服务器, 因此”实时重新加载”将不起作用。要实时开发和调试应用程序, 请使用局域网中的浏览器或安装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环境中运行编译的项目, 你需要添加”主页”：””。设置为./package.json文件。可以在项目的根级别找到此文件：

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

npm run build

rm -rf cordova/www/*

cp -r build/* cordova/www/

现在, 你可以在设备或仿真器上启动应用程序：

cd cordova/

cordova run ios

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

创建任务列表

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>srcmini</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类实例的task属性：

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

现在, 你可以在HTML代码中引用task数组。使用* 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()”的角度构造。如你所料, 它将点击处理程序添加到按钮, 并为我们的组件调用addTask()方法。让我们实现此方法以在点击按钮时打开任务名称对话框窗口。

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

import { AlertController } from 'ionic-angular';

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

constructor(public alertCtrl: AlertController) { }

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

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

指定消息标题, 字段描述和选项对象中的两个按钮。 “确定”按钮将向任务数组添加新任务：

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: 'srcmini'
  }, {
    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="srcmini">
        <Toggle slot="after"/>
      </ListItem>
      <ListItem title="Blog">
        <Toggle slot="after"/>
      </ListItem>
    </List>
  </Page>
);

应用程序本身看起来像这样：

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

import React, { Component } from 'react';

并将task数组写入状态变量实例：

export default class HomePage extends Component {
  state = {
    tasks: [{
      name: 'Hello'
    }, {
      name: 'srcmini'
    }, {
      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: 'srcmini'
    }, {
      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上找到：

• Ionic待办事项应用
• framework7-react-todo-app

结果

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

初始设置

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

组件多样性

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

除了完全模仿本机设计和动画之外, 还对性能优化给予了很多关注, 它们可提供出色的结果：通常, 几乎无法区分两种框架中的应用程序与本机框架之间的应用。

Framework7提供了更复杂和有用的组件的附加列表, 例如智能选择, 自动完成, 日历, 联系人列表, 登录屏幕, 消息和照片浏览器。另一方面, Ionic提供了大量用户创建的组件。

生态系统与社区

由于使用寿命长, 强大的财务支持和活跃的社区, Ionic显然在这些参数上取胜。Ionic基础架构在不断发展：支持服务和云解决方案让位于新的基础设施上, 插件的数量不断增长。

Framework7比以往任何时候都更好, 但非常缺乏社区支持。

第三方依赖

Framework7在第三方解决方案方面更为灵活。它的最大优势可能是能够选择是否在项目中使用Vue或React以及Webpack或Browserify。 Ionic基于Angular, 并且需要有关它的知识(因此也需要TypeScript。)

但是, 最近, Ionic开发人员宣布了一个新的Ionic 4 beta, 声称完全与UI框架无关, 如果你不希望它们与Angular无关。

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

是否使用Cordova取决于特定项目。确实, 混合移动应用程序的开发速度及其对多个平台的支持是其主要优势。但这始终是一个折衷, 有时你可能会遇到一些本机方法不存在的缺陷。这些出色的框架及其社区在减少这些缺陷并简化我们的生活方面做得很好。那么, 为什么不尝试一下呢？

相关：决斗：React Native vs. Cordova