如今，网络开发者统治着世界. JavaScript在任何可以编程的地方都可以使用. 这些领域包括, 大约10年前，手机应用开发是最先拓展业务的方式之一, PhoneGap允许在iOS和安卓上安装HTML和JavaScript应用程序.

从那时起, 这项技术经历了起起伏伏:尽管开发起来很容易, 这些应用显然与本地应用大不相同. 普通HTML和基于浏览器的JavaScript针对的是浏览器, 他们没有办法完美地迁移到这个新的领域.

直到今天，主要问题仍然是:

• 难以坚持本土设计和动画
• 复杂的屏幕过渡效果
• 触摸事件处理
• 在大列表中的表现
• 定位固定元件
• 适应不同的屏幕尺寸
• 本地控件元素的位置(例如，iOS状态栏)
• 适应不同的移动浏览器

为什么为科尔多瓦应用使用框架?

科尔多瓦 由于应用程序存在上述问题，技术常常被低估. 框架的目标是抵消它们，让HTML应用尽可能接近原生应用, 无论是在设计上还是在性能上.

让我们来看几个混合应用的例子. 它们是由两个目前最成功的框架(除了Onsen ui)制作的，这两个框架旨在促进现代世界中web开发人员的扩展:Framework7和离子.

关于离子框架

离子是由飘浮公司开发的. 它是基于Angular的. 从那时起, 它一直在积极发展, 获得大量投资和强大的开发者社区. 官方网站称，已有数百万个应用程序是基于它开发的.

在撰写本文时，最新的版本是基于Angular 5的离子 3. 离子 4的目标是灵活性和独立于Angular，目前处于早期测试阶段.

除了UI引擎，一个很棒的 组件库, 以及用于访问本机设备功能的接口, 离子提供了许多额外的功能, 服务, 和公用事业.

离子 CLI

离子的命令行界面用于交互式项目初始化(i.e., 一个向导), 生成页面和组件, 运行一个开发服务器，让你可以随时构建应用程序并实时加载它们. 它还提供与离子云服务的集成.

实验室和DevApp

Lab是一个非常有用的迷你服务，它允许你在离子开发者的浏览器中模拟应用程序在不同平台上的工作. DevApp可以帮助您快速将应用部署到实际设备上.

打包、部署和监视

离子附带了一系列web服务，可以简化和加速构建, 调试, 测试, 为测试人员和用户更新应用程序.

不过，离子的计划经常改变. 一些先前存在的服务，如Auth, 推, 分析, 和视野都关闭了, 引起了订户的强烈抗议.

创造者

这是离子用于开发功能界面的拖放图形编辑器.

关于Framework7

这个框架是由俄罗斯工作室iDangero在2014年开发的. 最终, 一位开发人员一直致力于这个项目, 不包括对GitHub存储库的几个次要贡献者.

最初, Framework7由一组UI组件组成，采用了当时刚刚发布的iOS 7的风格, 它的名字由此而来. 晚些时候, 添加了一个安卓主题, 这两个主题都针对最新的iOS和材质设计进行了更新.

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

Framework7的支持和使用Vue的示例.js从v1就已经存在了，v3也支持反应. 这可能会让这个项目与更受欢迎的离子展开激烈的竞争, 它只提供Angular和TypeScript.

安装及首次下水

离子

要开始使用离子，使用NPM安装它:

NPM安装-g离子

然后，为将来的应用程序选择模板. 离子官方网站提供 多个模板，也可以选择一个空模板从头开始构建应用程序 离子启动myApp空白.

让我们选择一个简单的设计. 执行如下命令:

离子启动Todo标签

回答 “是的” 当安装程序询问 “你是否想将自己的新应用与科尔多瓦结合起来，瞄准iOS和安卓平台?” 这将自动将应用程序与科尔多瓦集成，并为在移动平台上部署做好准备.

在下一步中，安装程序将提供将我们连接到离子 Pro SDK. 回答 “No” 现在，为了使示例保持简单.

安装附加组件 @ionic /实验室 包，以获得方便的调试UI-in-browser模仿iOS, 安卓, 和Windows设备:

cd待办事项

NPM I—save-dev @ionic /实验室

现在可以在调试模式下启动应用程序了. 这允许你在web浏览器中开发和调试应用程序:

离子实验室

因此，您将获得几个有用的地址:

离子 Lab调试服务在端口8200上启动. 应用程序本身在端口8100上运行，而 打开全屏 离子实验室的链接指向那里. 运行离子 Lab的浏览器窗口会自动打开.

此外，离子还提供了应用程序地址 本地网络. 这非常有用, 因为它允许您在移动设备浏览器中打开应用程序, 只要设备在本地网络中(例如, 通过wi - fi). 此外，您可以使用 添加到主界面 按钮以全屏模式重新打开应用程序. 这是在设备上测试应用程序的最快方法.

另一种方法是 离子 DevApp应用, 哪一个可以安装在移动设备上，并通过本地网络提供对应用程序的访问. 它提供插件支持(离子 Native)来访问本地设备功能和显示日志.

Framework7

F7的开发工具不如离子先进, 自动初始化命令行没有文档记录. 然而，官方网站提供 几个GitHub库与模板项目 这将帮助你开始发展.

类似于 选项卡 模板，F7提供 选项卡视图，但我们将使用一个功能更强大的模板，它将Framework7与反应集成在一起. 对反应的支持是在v3中添加的. 为此，克隆模板存储库:

Git克隆http://github.com/framework7io/framework7-template-react.git待办事项

切换到项目文件夹，获取依赖项，并启动该进程:

cd待办事项

npm安装

npm开始

执行结果与离子类似:您获得本地链接和网络中的链接，以便从真实设备即时访问:

现在可以打开了 http://localhost:3000/ 在浏览器中. Framework7不包括内置的设备模拟器，所以让我们使用 Chrome Dev工具的设备模式 要得到类似的结果:

如你所见, Framework7类似于离子，因为它有iOS和材料设计作为两个标准主题. 根据平台选择主题.

可悲的是，不像一个类似的 Vue模板.js支持 在官方的反应模板中, Webpack还没有实现，这使得我们无法使用Hot Module Replacement在不重新加载页面的情况下快速更新应用程序. 仍然, 您可以使用默认的实时重新加载特性, 当您更改源代码时，它会重新加载页面.

设置科尔多瓦

使用科尔多瓦在设备和模拟器上安装应用程序, 你需要下载并设置iOS和安卓的开发工具, 以及科尔多瓦 CLI. 你可以在我们的 前一篇文章 在科尔多瓦官方网站上 iOS平台指南 和 安卓平台指南 部分.

离子

经验表明，要成功解决离子的大部分问题, 基于浏览器的调试，偶尔在真实设备上进行测试就足够了.

尽管你接受了iOS和安卓的整合, 和离子准备所需的设置 配置.xml 文件和资源 资源 文件夹中，你仍然需要用科尔多瓦将两个平台连接到应用程序:

科尔多瓦平台添加ios

科尔多瓦平台添加和roid

现在你可以在“真正的”模拟器中启动科尔多瓦应用了, 在移动设备上安装, 甚至将其发送到App Store和b谷歌Play.

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

运行ios

最有可能的, Xcode命令行工具会告诉你需要设置开发者证书. 你需要在Xcode中打开项目并执行所需的操作. 这只需要做一次, 然后你就可以用科尔多瓦 CLI运行应用程序了.

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

安卓模拟器可以用类似的方式启动:

科尔多瓦运行和roid

请注意 科尔多瓦运行 命令启动并安装 已经编译 应用程序，它不使用 离子服务/离子实验室 因此，实时重新加载将无法工作. 来实时开发和调试应用程序, 使用本地网络中的浏览器或安装离子 DevApp应用程序.

经验表明，要成功解决离子的大部分问题, 基于浏览器的调试，偶尔在真实设备上进行测试就足够了.

Framework7

之前选择的“反应”Framework7模板不为科尔多瓦提供设置自动化, 因此，您需要手动添加平台. 控件中创建一个科尔多瓦项目 科尔多瓦 项目文件夹的子文件夹:

创建科尔多瓦 / com.例子.todo待办事项

科尔多瓦cd /

科尔多瓦平台添加ios

科尔多瓦平台添加和roid

cd ../

模板基于 创建反应应用，因此要在科尔多瓦环境中运行编译后的项目，您需要添加 “主页”:“." 设置为 ./包.json 文件. 这个文件可以在项目的根目录下找到:

编译Framework7项目并将结果复制到科尔多瓦项目中:

NPM运行构建

Rm -rf 科尔多瓦/www/*

Cp -r build/* 科尔多瓦/www/

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

科尔多瓦cd /

运行ios

---

完成了! 让我们希望Framework7在开发和初始设置方便方面能赶上离子的标准.

创建任务列表

离子

最后，让我们开始创建应用程序! 由于这是一个To Do应用程序，主页面(src /页面/ home /回家.html 文件)将包含具有“标记完成”和“添加新”功能的任务列表.”

离子提供组件 和 为列表. 首先，去掉 填充 属性 元素使列表在屏幕范围内显示. 在列表中，使用 元素并添加 元素来标记已完成的任务.

  
    
      Hello
      
    
 
    
      Toptal
      
    
 
    
      博客
      
    
  

回到浏览器选项卡，离子 Lab服务正在运行. 应用程序自动更新:

伟大的! 现在将任务数据移动到JS对象中，并用Angular设置它的HTML表示. 去 src /页面/ home /回家.ts 的任务属性 主页 类实例:

导出类主页{
  任务= [{
    名称:“你好”
  }, {
    名称:“Toptal”
  }, {
    名称:“博客”
  }];
 
  构造函数(){}
}

现在你可以参考 任务 HTML代码中的数组. 使用 * ngFor Angular构造为每个数组元素迭代创建列表元素. 代码变得更小:

  
    {{task.name}}
    
  

剩下的就是添加按钮以在页面标题中创建新任务. 要做到这一点，请使用 , , , 组件:

  
    To Do List
   
    
      

注意 (点击)=“addTask ()” 角建设. 可以猜到，它将tap处理程序添加到按钮并调用 addTask () 方法。. 让我们实现这个方法，以便在点击按钮时打开任务名称对话框窗口.

为此，你需要 AlertController 离子组成. 要使用这个组件，需要导入它的类型:

从“ionic-angular”中导入{AlertController};

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

构造器(公共alertCtrl: AlertController) {}

现在你可以调用它 addTask () 方法. 在控制器之后设置它. 您可以通过以下调用创建和显示对话框窗口:

这.alertCtrl
  .创建(/* 选项 */)
  .礼物();

中指定消息头、字段描述和两个按钮 选项 object. 点击“OK”按钮将会添加一个新任务到 任务 数组:

h和ler: (inputs) => {
  这.任务.推 ({name:输入.名称});
}

将元素添加到数组之后 这.任务，该组件将被重新构建，并在列表中显示一个新任务.

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

从“@angular/core”中导入{组件};
从“ionic-angular”中导入{AlertController};

@ 组件 ({
  选择器:“page-home”,
  templateUrl:家.html的
})
导出类主页{
  任务= [{
    名称:“你好”
  }, {
    名称:“Toptal”
  }, {
    名称:“博客”
  }];
 
  构造器(公共alertCtrl: AlertController) {}
 
  addTask () {
    这.alertCtrl
      .创建({
        标题:“添加任务”;
        输入:(
          {
            名称:“名字”,
            占位符:“任务”
          }
        ],
        按钮:[
          {
            文字:“取消”,
            角色:“取消”
          },
          {
            文字:“添加”,
            h和ler: ({name}) => {
              这.任务.推 ({name});
            }
          }
        ]
      })
      .礼物();
  }
}

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

运行ios

就是这样! 这并不难，对吧? 现在让我们尝试对Framework7做同样的事情.

Framework7

Framework7模板是用来显示所有组件功能的, 所以你只需要留下 src /组件/页面/主页.jsx 在 src /组件/应用程序.jsx 和 src /路线.js 文件，清理其内容并删除额外的代码注释.

现在创建任务列表. Framework7提供 和 组件 对于这个. 要在其中放置任务完成开关，请添加 组件. 控件中导入所有这些组件 framework7-react 模块. 现在页面代码看起来像这样:

从“反应”中导入反应;
进口{
  页面，导航栏，导航标题，列表，列表项，切换
} from 'framework7-react';

export default () => (
  
    
      To Do List
    
 
    
      
        
      
      
        
      
      
        
      
    
  
);

应用程序本身看起来是这样的:

很好的开始. 让我们再次尝试将静态数据从HTML代码中移出. 为此，请使用智能组件，而不是我们使用的无状态组件. 导入 组件 反应中的抽象类:

从' 反应 '中导入反应， {组件};

并将任务数组写入 状态 变量实例:

导出默认类主页扩展组件{
  状态= {
    任务:[{
      名称:“你好”
    }, {
      名称:“Toptal”
    }, {
      名称:“博客”
    }]
  };
  /* ... */
}

实际应用程序可能会使用更抽象的数据流(例如Redux或mobx)，但对于一个小示例，我们将保留内部组件状态.

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

{这个.状态.任务.map((task, i) => (
  
    
  
))}

剩下的就是添加带有按钮的标题，以再次创建新任务. 的 元素已经存在，所以添加 到 元素:

  To Do List
  
    
  

类来添加tap处理程序 onClick 属性并在其中设置回调指针. 实现处理程序以显示任务名称对话框.

Framework7中的每个元素都可以通过 这.$f7 财产. 你可以使用 dialog.提示() 这种方法. 在关闭对话框之前，调用 设置状态() 方法，并将带有新元素的前一个数组的副本传递给它. 这将反应性地更新列表.

addTask = () => {
  这.$f7.dialog.prompt('Task Name:', 'Add Task', (name) => {
    这.设置状态({
      任务:[
        ...这.状态.的任务,
        {name}
      ]
    });
  });
};

下面是完整的组件代码:

从' 反应 '中导入反应， {组件};
进口{
  页面，导航栏，导航标题，导航右，链接，列表，列表项，切换
} from 'framework7-react';

导出默认类主页扩展组件{
  状态= {
    任务:[{
      名称:“你好”
    }, {
      名称:“Toptal”
    }, {
      名称:“博客”
    }]
  };
 
  addTask = () => {
    这.$f7.dialog.prompt('Task Name:', 'Add Task', (name) => {
      这.设置状态({
        任务:[
          ...这.状态.的任务,
          {name}
        ]
      });
    });
  };
 
  render = () => (
    
      
        To Do List
        
          
        
      
 
      
        {这个.状态.任务.map((task, i) => (
          
            
          
        ))}
      
    
  );
}

检查结果:

剩下的就是重新构建并部署到设备:

NPM运行构建

Rm -rf 科尔多瓦/www/*

Cp -r build/* 科尔多瓦/www/

科尔多瓦cd /

运行ios

完成!

---

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

• ionic-todo-app
• framework7-react-todo-app

结果

现在您已经看到了每个科尔多瓦框架的完整教程. Framework7与离子相比如何?

初始设置

由于它的CLI, 离子的安装要容易得多, 而F7需要更多的时间来选择和设置模板或从地面开始逐步安装.

组件的多样性

这两个框架在iOS和材料设计两个主题中都有完整的精心制作的标准组件. 离子还在Windows主题和一个巨大的 用户的主题 市场.

除了完全模仿本地设计和动画, 性能优化得到了很多关注, 提供奇妙的结果:经常, 几乎不可能在任何一个框架上区分应用程序和本地应用程序.

Framework7提供了一个额外的更复杂和有用的组件列表，例如 聪明的选择, 自动完成, 日历, 联系人列表, 登录屏幕, 消息, 图片浏览器. 另一方面，离子提供了大量的 用户创建的组件.

生态系统与群落

离子显然在这些参数上更胜一筹，这要归功于它更长的寿命, 雄厚的资金支持, 活跃的社区. 离子的基础设施在不断发展:支持服务和云解决方案让位于新的服务和插件的数量不断增长.

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

第三方依赖关系

Framework7在第三方解决方案方面更加灵活. 它最大的优势可能是能够选择在项目中使用Vue还是反应, 以及Webpack或Browserify. 离子是基于Angular的，需要了解Angular(因此也需要了解TypeScript).)

然而,最近, 离子开发者发布了新的离子 4测试版, 声称完全与ui框架无关——如果你不想要Angular依赖，就不再依赖它们.

科尔多瓦框架:开发跨平台移动应用的强大方法

是否使用科尔多瓦取决于具体的项目. 事实上, 混合移动应用开发的速度和对多平台的支持是它的主要优势. 但这总是一种权衡, 有时，您可能会遇到一些本地方法不存在的缺陷. 这些美妙的框架和它们的社区在减少这些缺陷和使我们的生活更轻松方面做得很好. 所以，为什么不试一试呢?