65.9K
CodeProject 正在变化。 阅读更多。
Home

Visual Studio 2015 和 Apache Cordova

Hugo Carnicelli
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.87/5 (59投票s)

2015年1月4日

CPOL

7分钟阅读

viewsIcon

175937

downloadIcon

17

在本文中，我们将学习 Apache Cordova 是什么，以及这个工具现在是如何集成到 Visual Studio 2015 中的。

Visual Studio 2015 和 Apache Cordova

在开始之前，请问自己这些问题

  • 如今，有多少比例的开发人员在 Web 技术方面拥有专业技能？
  • 有多少比例的开发人员拥有原生移动开发专业知识（不包括跨平台工具用户）？
  • 有多少比例的开发人员可以说他们同时具备 Web 和原生移动开发技能？
  • 在这些人中，有多少比例的开发人员同时精通多个移动平台？

由于学习时间和职业背景的原因，最后一个问题的比例非常低。事实上，招聘市场很少招聘高度多面手型的个人，因为他们成本更高，但一次只能执行一项任务。因此，顾问的专业知识也与这种假设相符。Apache Cordova 等跨平台工具倾向于显著增加最后一个数字。

跨平台解决方案概述

在 Web 浏览器和原生移动操作系统之间，我们可以列出 3 种主要工具。Unity，通常用于视频游戏开发，最接近原生。它性能非常高，但当然需要特定且相对陡峭的学习曲线。Xamarin，一个基于 Mono 项目的开发工具，更容易上手，特别是对于 .NET 开发人员。它有助于将该框架的优势带到微软的外部平台。最后，Cordova 凭借几乎零学习曲线，可以使用与移动导向的 Web 开发相同的技术来实现移动和跨平台应用程序。

Web

Cordova

Xamarin

Unity

原生

一些历史

Cordova 项目在 3 年间是 Adobe 公司推出的 PhoneGap 项目，Adobe 以其多媒体处理软件套件而闻名于世：Photoshop、Illustrator、Premiere 和 After Effect 等。它于 2011 年 10 月移交给 Apache 软件基金会，并于 2012 年 10 月升格为顶级项目。

早在 2014 年 5 月，微软就发布了 Visual Studio 2013 的更新 2。在此之际，出现了一个名为“Multi-Device Hybrid App”的全新扩展。它通过新的项目类型和依赖项安装程序，实现了 Apache Cordova 与 Visual Studio 的更好集成。在发布了第一个版本并在微软社区中获得了不错的反响后，又出现了第二个版本，并带来了新功能、更好的集成……

最近，在 2014 年 11 月，随着 Visual Studio 2015 Preview 的发布，该扩展进行了重新设计并更名为“Tools for Apache Cordova”。现在可以直接通过 Visual Studio 安装程序中的一个选项来获取。如果选择它，将触发第二个安装程序，允许您精确选择要安装的依赖项：Ant、Android、Java、NodeJS 等等。

Cordova 带来的价值

传统的网站无法通过智能手机的短信和电子邮件等标准渠道来吸引客户。Cordova 为 Web 开发人员提供了以前几乎无法触及的新维度：运行应用程序的设备的功能。通知、地理定位、振动器、摄像头、存储……所有这些功能，对于移动导向的开发来说都超出了范围，但又是必不可少的，它们可以更有效地触达产品目标。

为了允许在原生环境中使用 Web 技术，Cordova 在编译过程中将生成一个应用程序，其中包含 2 个主要部分：

  • 一个带有 WebView 组件（集成 Web 浏览器）的应用程序
  • 一系列用于嵌入 Web 应用程序文件的资源

将 Cordova 的 API 集成到现有网页只需要很少的代码，只需添加一个仅在编译后可用的虚拟 JavaScript 文件即可。

<script src="cordova.js"></script>

最后，可以附加一个特定的事件触发器来检测 API 是否可用并准备好使用。

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() { /* INIT */ }

Visual Studio 中的新功能

为了推广使用 Cordova 进行跨平台开发，Visual Studio 在 JavaScript 和 TypeScript 类别下添加了一个新的项目类型。

除了初始化您的开发并提供基本的文件树之外，IDE 还添加了两个新的模拟器。

Android 模拟器

第一个是全新的，是其前代的有力竞争者：它是 Visual Studio 的 Android 模拟器。现在可以直接从 Visual Studio 中运行和调试我们的应用程序，而无需启动 Android SDK 的模拟器。在改进之处，我们注意到它的启动时间比同类产品快得多。此外，还可以模拟模拟设备的一些 API，如加速计或 GPS。

Ripple 模拟器

第二个也是 Apache Foundation 的产品，是 Ripple。最初是一个 Chrome 扩展程序，旨在以更快的环境测试和模拟 Cordova 的 API。Visual Studio 除了在 Google Chrome 窗口中打开它（这是微软的一个有趣举措）之外，并未止步于此。一旦启动模拟器，就可以编辑应用程序的源代码，并看到模拟器自动更新以吸收通常的重置调试时间。

Visual Studio 很快应该会更进一步，提供将应用程序部署到物理设备并允许您像本地一样轻松调试它。目前，仍然有一个问题阻止在物理设备上激活调试模式。但应用程序确实已部署并启动。此 bug 是一个已知问题，因此我们应该很快就能看到它得到解决。Android、iOS 和 Windows Phone 现在都在所有级别的 Web 开发人员的范围内，但不仅限于此。

需要注意的是，Cordova 不仅仅针对移动应用程序。它还可以创建 Windows 应用商店应用程序或 Ubuntu 应用程序。

关注点

Cordova 极大地简化了 Web 开发人员的工作，并允许他们在不迷失方向的情况下初步涉足移动开发环境。此外，还可以保留大部分工作习惯，尤其是关于响应式设计的所有内容，这允许使用比为每个所需分辨率定义“布局”更灵活的技术。

然而，重要的是要更加关注动画，这些动画通常是用 JavaScript 实现的，以便在更多 Web 浏览器中兼容。使用原生应用程序，这不再是必需的。您可以定位特定的操作系统版本以确保先决条件，这在可能使用 Internet Explorer 6 或 7 的客户端计算机上是不可能的。另一方面，CPU 和可用 RAM 仍然不如计算机重要。

因此，我们应该用 CSS 过渡替换“内联”JavaScript 动画（例如 Foundation 所做的）。此外，最好使用新的 CSS3 功能来影响 GPU（在相关时），以避免“重排”现象。当元素尺寸发生变化时，我们可以观察到这一点，这可能会暂时减慢浏览器计算此更改对页面其余部分的影响的速度。例如，对“transform”指令（通过“translate”）使用过渡将比使用“top”和“left”坐标效率更高。最后，虽然优化 DOM 和 JavaScript 在计算机上可能看起来没有必要，但在移动设备上则更为重要。

例如，此 CSS 将在更多 Web 浏览器中工作，但效率不高

.slide.inactive {   
    transition: all 0.5s ease-out;   
    -webkit-transition: all 0.5s ease-out;   
    opacity: 0;   
    left: -100%;   
}   
.slide.active {   
    position: relative;   
    transition: all 0.5s ease-out;   
    -webkit-transition: all 0.5s ease-out;   
    opacity: 1;   
    left: 0;   
}

相反，这一个兼容性较差，但性能要好得多，因为它不会触发重排

.slide.inactive {   
    transition: all 0.5s ease-out;   
    -webkit-transition: all 0.5s ease-out;   
    opacity: 0;   
    transform: translateX(-100%);   
    -webkit-transform: translateX(-100%);   
}   
.slide.active {   
    position: relative;   
    transition: all 0.5s ease-out;   
    -webkit-transition: all 0.5s ease-out;   
    opacity: 1;   
    transform: translateX(0);   
    -webkit-transform: translateX(0);   
}

要进一步深入，我们应该尝试像Ionic这样的专业前端框架。值得注意的是他们的口号之一

痴迷于性能
速度很重要。如此重要，以至于只有在它不存在时您才会注意到。Ionic 旨在在最新的移动设备上提供出色的性能和表现。通过最少的 DOM 操作、零 jQuery 和硬件加速过渡，有一点是肯定的：您会印象深刻。

最后，有一个 GitHub 存储库，其中托管了一个类似 PowerPoint 的 Cordova 应用程序的源代码。

来源

© . All rights reserved.