何须苦等VS2015？来看看VS2013下实现移动端的跨平台开发

前一天准备下载VS2015预览版，到VisualStudio官网一看，发现微软发布了VisualStudio2013的插件——Visual Studio Tools for Apache Cordova，实现跨平台的开发。官网下载地址：http://www.microsoft.com/en-us/download/details.aspx?id=42675，下面是截图：

点击下载扩展插件，双击开始安装，第一次打开出现以下错误：

这个是缺乏了Windows Management Framework 3.0,下载地址：http://www.microsoft.com/en-us/download/details.aspx?id=42675，下载后安装，重启安装程序便可。

安装界面如图，你们根据本身的电脑环境安装，还要安装Android SDK、Java环境、iTunes，这些建议都单独安装，网速不给力，还不知道安装到何时，其余的全选，点击next，完成安装。不过，貌似微软官方的ANdroid SDK包含了新的安卓模拟器，你们谁网速快，有时间，任性的，能够看看。我这里用的是以前如今的Android SDK，因此模拟器仍是旧的。

1、编写Hello，world

打开VS2013，新建项目，选择TypeScrip项目,如图：

若是前面你都安装成功的话，应该会看到如下界面：

有的会出现以下界面：

可是这个错误并不影响编译，仍然能够编译成功，直接关闭便可。

你们能够先看一下如今的项目结构，如图：

看上去很像一个web项目，里面能够看到Android、ios、windows、wp8等几种应用。

因为个人电脑配置是AMD CPU + WIN7 64位系统，因此没法安装苹果虚拟机和WP8的模拟器(必须win8系统及以上)，这里只能演示Android模拟器的运行效果。你们有条件的能够试试。

既然要写Hello，world，那么打开index.html，咱们看到以下代码：

修改Hello，your ... is ready!为Hello，world便可。下面来看看如何运行：

咱们能够看到调试选项不少，咱们就用默认的第一个，后面说Android Emulator.点击运行，会看到打开谷歌浏览器，如图：

到这里，咱们的hello，world就完成了。下面来看看在Android模拟器上面是什么效果，咱们选择Android Emulator，而后点击运行，注意这里5037端口被占用会出现错误，因此错误的请先看看是否是端口被占用了，模拟器启动不了。能够参考 Android Studio 1.0.2项目实战——从一个APP的开发过程认识Android Studio 这篇博客模拟器启动不了的处理办法。

通过长久的等待，Android模拟器终于启动了。来看看效果如何吧，如图：

来看看应用的图标是什么，如图：

是一个很难看的图片，因为项目面向的是三大移动平台，因此默认图标不会是Android，咱们来看看如何修改默认图标。

如图，替换掉对应目录的图片便可，注意图片尺寸要同样。我这里也没什么好的图标，就用默认Android的了。ios和wp8同样，替换图标便可。同理，替换对应图片，能够修改程序的启动画面，如图：

2、引入BootStrap,构建APP

既然使用html + css + js进行开发移动应用，那么一些第三方的css和js库就是能够用的，下面来写一个综合的实例来看一下。如图：

哈哈，看到了吧，BootStrap风格的按钮。下面咱们来看看添加了哪些代码：

看到了吧，就像写html页面同样，添加js方法，绑定便可。固然咱们还能够看scripts下面的index.ts,还能够在里面添加js代码，实现点击事件的绑定,如图：

看这个js代码，是否是有种模块化的感受。而且在VS2013中，addEventListener方法，有很详细的提示，如图：

看到了吧，type:"click",就是单机事件，一共122个事件，咱们能够选择须要的进行绑定便可。

我又添加了一个html页面，经过超连接来实现页面跳转，从而达到Android中相似Activity的切换。

项目部署到Android模拟器上后，会在debug目录下面生成apk，咱们能够安装到本身的手机进行测试，我已经在本身的手机上面测试过，和在模拟器上面的效果相同。

关于更多的功能如何实现，我想大概和下面这些ts有关，开来还要学习一下TypeScript~~

3、生成ios和wp8

咱们刚刚看了Android的开发流程，下面咱们看看咱们的项目如何发布为其余平台的APP，在项目上面点击右键，打开项目属性窗口：

点击配置管理器按钮，打开配置管理器，咱们选择ios，点击肯定，如图：

接下来，咱们看到调试选项变成了以下列表：

为了看到明显的效果，咱们选择Ripple-iPad3,运行，如图：

是个iPad的画面吧，忽然发现这里发现按钮还能够点击，不过弹出的消息框都在网页里面。你们有iPhone的能够真机测试一下。

总结：

用Html + Js + Css来开发移动端APP，能够将现有的前端框架用到移动端的APP中，如AngularJS、BackboneJS和JQuery，固然还有BootStrap，从而UI的开发和设计变的十分简单和灵活。在VS2015中，微软除了 Apache Cordova，还提供了Xamarin的跨平台方案，你们能够试一试。

关于项目的测试，若是你们用的Intel的CPU和win8系统，能够安装苹果虚拟机，在苹果虚拟机上安装ios的模拟器进行测试。win8系统能够安装WP8模拟器，固然支持Android，这样就实现了多平台的开发和测试环境。

可能有人会说这样开发的APP性能很差，可是APP是在客户端上面运行的，慢那么一点又有什么关系，又不是在服务器上面，存在大访问量，要处理大数据。固然作游戏开发，有专业的游戏引擎，还用不到这个。

若是你们感受这篇文章写的不错，请点个赞，给我协做的动力。 欢迎你们能够加入到下面的QQ群进行讨论和学习。

在这里提早祝你们平安夜快乐！