Visual Studio 2015 和 Apache Cordova

时间 2019-11-24

标签 visual studio apache cordova 栏目 Visual Studio 繁體版

原文原文链接

原文: Visual Studio 2015 和 Apache Cordova

在开始前，问一下本身下面这些问题：css

熟练掌握web技术的开发者比例是多少？（占全部开发者的比例）html
熟练掌握移动开发技术（而且使用跨平台开发工具）的开发者比例是多少？前端
熟练掌握web技术和移动开发技术的开发者比例是多少？git
在以上的开发者中，可以胜任跨移动平台开发的开发者比例又是多少？github

因为学习时间和职业范围限制，最后一个问题中符合条件的开发者，少之又少。事实上，在就业市场不多有公司招聘那些多面手（掌握不少技术的人），由于他们要的薪水很高可是又不能一次执行多个任务。随着专业知识不断增加，一名顾问提出的理论也相应增多。相似 Apache Cordova（一套跨平台的移动设备API）的跨平台工具每每理智地增长最后一个数字。web

跨平台解决方案概述

在web浏览器和手机操做系统上开发应用时，咱们可使用3个主要的开发工具。Unity（一个专业游戏引擎、多平台游戏开发工具），被认为在视频游戏中最接近原生性能的开发工具。它有高性能的优势，可是它也有一个相对困难的学习过程。Xamarin（一个跨平台开发框架，旨在使移动开发变得简单），一个基于Mono（Novell公司开发的跨平台·NET运行环境）项目的开发工具，性价比较高，尤为对于.NET开发者而言。它帮助把.NET框架的优点带到微软国外平台上。最后一个是Cordova，它的学习成本几乎为0，使用相似面向移动应用的web开发技术实现移动和跨平台应用。apache

一些发展历史

Cordova 项目源于3年前Adobe公司贡献出的PhoneGap项目（前者是从后者中抽出的核心代码，是驱动后者的核心引擎），Adobe公司以它在多媒体处理方面的套装软件闻名于世：PhotoShop，Illustrator（一个矢量图像编辑软件），Premiere（一个非线性视频编辑软件），等等。Cordova 是 Adobe 公司在2011年贡献给Apache后的开源项目，它于2012年10月从Apache孵化器毕业，正式成为Apache的顶级项目。浏览器

回到2014年4月，微软发布了Visual Studio 2013的第2个更新包，在此次更新中，出现了一个全新的扩展应用"Multi-Device Hybrid App（支持多设备应用）"。经过使用一个新的项目类型和一个依赖安装工具，它可使Visual Studio更好地集成Apache Cordova。第1个更新包发布后，在微软社区反馈良好，以后第2个更新包便出现了这个功能，带着新特性、更好的集成效果...前端框架

更近一些的时间，在2014年11月，Visual Studio 2015 预览版发布，Cordova扩展被改进并改名为"Tools for Apache Cordova"。如今能够经过Visual Studio安装包的一个选项直接安装Cordova。若是相关选项被选中，会触发另外一个安装步骤，它容许你自定义想要安装的工具：Ant，Android，Java，NodeJS，等等。框架

Cordova 实现了什么？

对于一个典型的网站而言，经过（过去那种附加功能）只有短信和邮件的标准手机来获取用户是不可能的事情。Cordova为web开发者提供了一个新的视野：可运行应用的设备的多样性，这在以前几乎是不可实现的。消息提醒、地理定位、振动、摄像头、存储...全部这些功能，超出了移动开发的范围，但它们又是必要的，（Cordova）以一种很是高效的方式帮助你实现产品的这些功能。

为了在本地环境使用web开发技术，Cordova在编译时会生成一个应用程序，它主要处理两件事：

集成WebView组件和浏览器
打包包含web应用程序文件的一系列资源

在一个web页面中调用Cordova API，只需添加很是少的代码：引入一个虚拟的js文件，编译后js才可用：

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

最后，你能够添加一个具体的事件触发器来监测API是否可用、设备是否可用：

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

Visual Studio有什么新特性？

为了提升Cordova跨平台开发的效率，Visual Studio在Javascript和Typescript目录下添加了一个新的项目类型。

此外，Visual Studio使用一个基础文件树来初始化开发环境，它也添加了两个新的模拟器。

daxiang
翻译于 6个月前

0人顶

顶翻译的不错哦!

Android 模拟器

第一个（模拟器）是全新的功能，它是Android SDK 模拟器的翻版：这就是Visual Studio的Android 模拟器。如今咱们能够直接经过Visual Studio在一台Android设备上运行和debug应用程序，而不用安装Android SDK模拟器。在全部的优化中，咱们发现一点：Android 模拟器启动时间比Android SDK模拟器快不少。固然，Android模拟器也能够启动模拟设备上的一些API，好比GPS加速度计。

Ripple 模拟器

第二个（模拟器）是 Ripple，也是Apache的一个产品。Ripple最初是Chrome的一个扩展应用，用来快速测试和启用Cordova API。（后来）Ripple单独放在Chrome一个窗口中，Visual Studio并未止步于此。一旦启动了模拟器，编辑应用程序的源代码后，让模拟器自动更新应用程序以减小一般重置debug环境耗费的时间，这种效果是有可能实现的。

Visual Studio应当会走得更远：帮助你把应用程序部署到一台物理移动设备上，容许你对它进行debug，就像debug模拟器上的应用同样简单。目前，在一台激活的物理移动设备上保持debug模式仍然存在一个问题。可是应用程序确实已经发布到移动设备上，而且已启动。这个bug已经公开，相信不久它就会被修复。Android，iOS和Windows Phone，任何级别的web开发人员都要考虑，且不只仅是这些。Cordova不只仅适用于移动应用，它也能够用来建立Windows应用和Ubuntu应用，这一点很重要。

关注点

Cordova极大地帮助了web开发者的工做，它容许开发者首次进入移动开发环境而不用下降本身的忍耐度。顺便提一点，开发者能够保持本身的大部分工做习惯，尤为是交互式设计方面，Cordova为开发者提供了一个比"布局"更灵活的技术来绘制每个所需的方案。

另外，动画效果也是须要着重关注的，它通常用JavaScript实现，以兼容多数web浏览器。对于一个本地应用程序来讲，不再必这么作。你能够指定一个具体的操做系统版原本肯定先决条件，可是不要指定可能使用IE6或者IE7的操做系统。另外一方面，对于移动设备而言，CPU性能和内存大小再也不像对于电脑那样重要了。

咱们应该把"内置"的JavaScript实现的动画替换为CSS transition（Apache基金会的作法）。更进一步，为了不"reflow"现象（重载或更新DOM树致使页面性能下降），最好使用CSS3的新特性来调用GPU。咱们能够观察到当一个DOM 元素大小变化时，因为浏览器会计算这个元素大小变化对页面其它元素的影响，此时浏览器会忽然变慢。使用CSS3过渡属性里的过渡效果（用translate定义），而不是top和left等坐标属性，页面性能会提升不少。最后，在桌面端优化DOM树时，通常不要使用JavaScript，这一点在移动设备上更重要。

例如，下面的CSS能够兼容不少的浏览器，但它的性能较低：

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

下面一个，相反，兼容性略差，可是性能更好，由于它不会引发reflow现象：

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

为了走得更远，咱们应当使用相似Iconic的前端框架进行测试。Iconic有一句自我介绍比较有意思：

追求性能速度很重要。只有当你没有这个东西的时候才会发现它的重要性。Iconic在最新的移动设备上表现很是好。最少的DOM操做次数、彻底不使用jQuery、硬件加速转换，有一件事很肯定：Iconic会给你留下深入的印象。

做为结束语，介绍一个 Cordova实现的相似PowerPoint应用，它的源码保存在一个GitHub库里。