移动应用程序开发人员的道路通常始于一个选择：为iOS、Android或Windows开发？这一选择会立即缩小潜在受众的规模，但开发人员通常会屏住鼻子，不情愿地做出决定。那些需要访问所有三个应用商店的人，可以选择为每个平台重写应用程序。
VisualStudio使您能够在实现大量代码重用的同时获得最大的访问范围。使用Xamarin，C#开发人员可以跨iOS、Android和Windows应用程序共享业务逻辑。使用Apache Cordova，web开发人员可以使用HTML、CSS和JavaScript构建跨平台的移动应用程序，从而实现最大程度的代码重用。
在本文中，我们将详细了解如何使用Visual Studio的多设备混合应用程序开发扩展，使用HTML、JS和CSS构建跨平台应用程序。要在IDE中执行以下操作：
安装好这些工具后，为“多设备混合应用程序”创建一个项目
在探索这些工具之前，让我们花点时间看看Cordova应用程序的架构。应用程序本身是作为HTML应用程序实现的（例如。单页应用程序)托管在webview控件内（或在Windows上，作为WWA），使您的应用程序可以访问本机设备API。大多数开发人员喜欢通过RESTful web服务（例如。Azure移动服务)，但所有文件资产（如HTML、CSS、JS和媒体）都与应用程序打包在一起，以便用户可以继续脱机使用应用程序。
为了从JavaScript访问本机设备功能（例如，摄像头、联系人、文件系统、加速计），Cordova使用了一种称为插件的结构。插件通常封装两个组件：用于调用三个平台（即Objective-C、Java和C#）中每一个平台的功能的本地代码，以及可供应用程序使用的规范化JavaScript API。
要使用API，可以从JavaScript中进行异步调用。本机代码返回对回调函数的响应。在下面的示例中，相机插件返回指向移动设备上文件系统的照片的URI。
//从移动设备照片库检索图像文件位置
功能获取PhotoURI（）{navigator.camera.getPhoto（onPhotoSuccess，onPhotoFail{质量：50，destinationType:destinationType。文件_ URI，sourceType:pictureSource。照片库});}//成功照片库事件的回调
功能onPhotoSuccess（imageURI）{//将img添加到div#album
无功功率，无功功率img=文档创建元素(“img”);img.set属性(“src”，图像URL）；文档.getElementById('相册').appendChild（img）；}
旨在与Web标准融合
Cordova插件通常被设计为公开JavaScript API，这些API将随着时间的推移与web标准融合。目标是让插件最终消失，让W3C标准的实现取代它们。例如Web API为了激活设备振动，导航器振动（时间）已经由实现科尔多瓦,铬、和Firefox浏览器。随着时间的推移，所有移动设备和浏览器都将使用相同的API，从而使插件作为polyfill过时。Cordova的最终目标是充当临时桥梁，直到标准web平台支持设备功能。
JavaScript或TypeScript：您的选择
一旦你开始了，你的大部分时间将花在编写代码上。无论是HTML、CSS、JavaScript还是TypeScript，我们的目标都是为我们的开发人员提供当前任务的上下文帮助.例如，许多开发人员依赖IntelliSense来避免常见的语法错误，并快速探索新的API。你想知道你的应用程序有哪些本机设备功能吗？Visual Studio针对Apache Cordova的工具包括对使用JavaScript和TypeScript的常见Cordova插件的IntelliSense支持。
如果您编写自定义插件，您可能还希望为组件启用IntelliSense。为了支持常见的Cordova插件API，我们使用JavaScript智能感知扩展用于JavaScript编辑器。对于TypeScript，我们只需编写TypeScript d.ts文件来描述每个API。您可以在公共主页中查看开源d.ts文件：已明确键入。每个d.ts文件都提供了必要的元数据，以便为Cordova插件提供可靠、准确的IntelliSense，而无需在后台执行JavaScript代码。
预览应用程序的三种方法
为了获得最高的生产力收益，大多数开发人员选择在所有部署目标（iOS、Android和Windows）中使用相同的代码——95%或更多。
由于大多数开发人员选择在所有平台上部署一个共享的HTML/CSS/JS代码库，因此确保应用程序在您关心的平台上的外观和行为符合预期非常重要。我们通过提供三个选项来测试应用程序，确保预览应用程序尽可能轻松高效：（1）基于Chrome的名为Ripple的模拟器，（2）平台供应商提供的本地模拟器，以及（3）部署到实际的系留设备。
除非你是一个超凡脱俗的开发人员，可以在不运行应用程序的情况下让应用程序完美运行，否则你最终需要在每个平台的设备或模拟器上部署和测试它。然而，这不一定是你想要开始的地方。我们的一般指导如下：
- 对于基本布局和早期调试，请使用Ripple。Ripple是一个在Chrome中运行的开源模拟器。当您安装我们的工具时，Visual Studio会自动下载并安装Ripple和Chrome。因为Ripple使用谷歌的V8引擎和基于闪烁的渲染，所以它非常适合在iOS或Android设备上模拟行为。事实上，目前Chrome和IE11之间只有少量实质性的渲染差异，因此它也是Windows平台的一个很好的代理。很高兴在Ripple中进行早期开发，因为坦率地说，它对web开发人员来说既快又熟悉。Ripple受益于您桌面上的所有CPU资源，以及数千种旨在使桌面浏览更加快捷的微小性能优化。
- 对于最终验证和全保真调试，请使用设备。尽管我们非常喜欢在桌面浏览器中进行调试，但它与移动浏览器之间存在一些微小但显著的差异。不幸的是，CSS呈现或JavaScript解释中的微小差异可能会产生很大的影响，因此在实际应用中测试应用程序很重要。真实的来源永远是设备。使用本机构建系统（即Xcode、Android和Windows SDK），Visual Studio可以构建并部署到通过USB连接到开发机器的设备。
- 如果设备不可用，请使用模拟器。考虑到现有设备和平台版本的范围，尤其是Android版本，不可能总是有完整的测试设备库。在我们的办公室里，我们有一个小型的代表性设备库，包括：运行iOS7-8的iPod、运行安卓4.0的三星Galaxy、运行安卓4.4的Nexus 7、运行Windows Phone 8.1的诺基亚1520和运行Windows 8.1的开发机器。对于其他一切，我们使用模拟器。
有关可用预览选项及其在Android、iOS和Windows上的支持级别的更多信息，请查看我们的文件.
在客户发现并修复Bug之前
最后，有时您的JavaScript或TypeScript代码中会出现一些难以发现的错误。在这段时间里，你需要调用你信任的朋友，调试器。
您可以获得Windows应用商店开发人员已经熟悉的所有调试工具，包括DOM资源管理器、JavaScript控制台、断点、监视、局部变量、仅我的代码等。其他诊断工具尚不可用。
在我们的初始版本中，我们将调试支持集中在Android 4.4和Windows Store上。但在听取了像您这样的开发人员的意见后，今年夏天我们增加了对Android 2.3.3及以上版本的调试支持。对Android 4.4以下版本的调试支持需要使用调试代理，其中最流行的是jsHybugger公司.
如果你还没有，请下载并安装工具或尝试Azure中托管的一个试用虚拟机。示例应用程序使用三种当今流行的框架提供：安格拉尔JS,骨干和WinJS+类型脚本。一旦你开始行动：
直到下一次，编码快乐！瑞安·J·萨尔瓦
 |
瑞安·J·萨尔瓦，Visual Studio客户端工具团队主要程序经理推特：@瑞安·贾萨尔瓦
Ryan是Visual Studio客户端工具团队的首席程序经理，负责HTML、CSS和JavaScript开发。他从事了15年的网络标准开发和倡导工作，是一名企业家、开发人员和图形设计师。如今，他主要专注于使用web技术和Apache Cordova开发移动应用程序。 |
帖子面向Web开发人员的移动应用程序首次出现于Visual Studio博客.
]]>