标签：
欢迎加群学习：457351423 这里有4000多部学习视频，涵盖各种技术，有需要的欢迎进群学习！
一、创建空白Cordova应用
打开VS，选择【新建项目】，选择其它语言JavaScript或者TypeScript，语言的话就按个人喜好，喜欢JS就用JS，喜欢TS就用TS，推荐使用TS书写，代码结构和可读性相对更强。本文演示使用JS来书写，方便不会TS的用户阅读。
创建完项目后，项目结构如下：
www目录为我们本地应用程序目录，和一般静态网站类似。默认主页为index.html。脚本对应为scripts/index.js
config.xml为项目配置文件，该文件在VS中是可视化操作的。
包括项目配置，平台配置，以及Cordova插件管理，Cordova插件可以在此处添加。
打开index.html修改body内容为：
<div class="app">
<p id="deviceready" class="event">Hello Word!</p>
</div>
并把index.js中自动生成的代码注释掉：
function onDeviceReady() {
// 处理 Cordova 暂停并恢复事件
document.addEventListener( ‘pause‘, onPause.bind( this ), false );
document.addEventListener( ‘resume‘, onResume.bind( this ), false );
// TODO: Cordova 已加载。在此处执行任何需要 Cordova 的初始化。
//var element = document.getElementById("deviceready");
//element.innerHTML = ‘Device Ready‘;
//element.className += ‘ ready‘;
};
注意：Update7 之前版本中没有上述标签和代码，将显示文本改为HelloWord后，直接启动默认程序即可。
二、启动Android预览
选择安卓和默认的Ripple模拟器来预览程序。同时点开VS输出面板，查看输出内容。
第一次F5启动程序的话，由于缺少部分组件和插件等，VS会自动联网使用node下载，所以点开输出面板查看输出信息，如果提示正在应用第三方包，请稍等，或者信息输出卡在某一个点，那么就是在下载对应的内容，此时VS无法停止编译，也无法编译成功，须等部分包下载完成后才能编译成功，该过程视网络环境影响，需耐心等待（一般情况在5-10分钟即可完成，其它情况在1小时以上也有，甚至几小时也有，具体视网络情况而定了，开VPN貌似有一定的帮助，但是帮助不是很大）。建议F5启动后如果编译不通过，那么就把VS开着，让它下载直到编译成功，看到结果为止。如果长时间没有反应，建议结束VS进程，重启项目，重新F5编译。反复几次就行了。
首次启动项目和编译成apk都会有这样问题，包下载完成后，以后再启动预览项目和编译生成apk都会在一瞬间完成，就无须等待了。
1.Ripple-Android模拟器预览结果如下：
Ripple模拟器是一个网页版模拟器，开发建议使用，快速预览界面，功能和兼容性，建议使用模拟器或者真机调试。
2.Android模拟器预览：
首先启动：AVD Manager.exe
安卓SDK的模拟器管理工具。一般在：C:\Program Files (x86)\Android\android-sdk\AVD Manager.exe
创建一个模拟器，分辨率适中即可：
确定后，启动模拟器。由于模拟器启动速度，运行效率都比较差，建议开启Intel硬件加速功能，提升模拟器运行效率。
开启硬件加速方式：
打开SDK Manager.exe 和AVD Manager.exe在同一目录下：
勾选后下载下来。
示例机器目录在：
C:\Program Files (x86)\Android\android-sdk\extras\intel\Hardware_Accelerated_Execution_Manager
安装完成即可实现模拟器硬件加速效果。如果安装过程中失败，那么重启电脑进入BIOS设置界面，将Intel硬件加速功能设为Enable，保存后重新进入系统安装。即可安装成功，硬件加速可以带来性能的大幅度提升，效果不错，模拟器主要针对不同机型用作适应性测试，正常开发直接使用Ripple或真机为好。
模拟器效果如下：
3.Android真机预览
连接手机到PC上，安装手机对应的驱动程序。开启手机USB调试模式。确认手机和PC已经正确连接后：
将项目启动改为【设备】,F5启动即可：
手机画面如下：
三、IOS预览
1.IOS-Ripple预览：
将设备改为IOS，模拟器选择Ripple F5启动预览后如下：
预览效果和安卓无差别。
2.IOS模拟器预览
首先确定Mac电脑已经启动，remotebuild服务已经运行（配置方式见前文）。
确定无误，F5启动模拟器运行
运行结果如下：
remotebuild服务输出信息：
Xcode模拟器显示输出：
由于IOS手机暂时没有越狱，开发者账户已经停用了，暂时没有真机测试的结果，理论上模拟器成功了，真机上跑问题不是很大。
四、打包APK文件
VS2015中很多人对于打包APK可能不会操作，其实很简单：
右击项目【在文件资源管理中打开文件夹】打开项目文件夹，找到build.bat文件。路径如下：
项目路径\platforms\android\cordova\build.bat
执行build.bat，执行成功后会在对应目录中生成build文件夹。路径如下：
项目路径\platforms\android\build
APK路径为：
项目路径\platforms\android\build\outputs\apk
此APK文件可以直接安装使用了。
五、创建Ionic项目
目前主流的开发框架就是Cordova+Ionic+Angular。所以使用Ionic框架也是必不可少的。在VS上创建Ionic项目很简单。
打开VS联机模板，索搜并下载并安装Ionic的VS模板
打开【新建项目】对话框，创建一个Ionic项目：
以创建一个侧边栏的Ionic项目为例，创建完成，项目结构如下：
F5运行预览结果如下：
结束语：至此基本的Hello Word程序开发就结束了，VS开发整体来说效果很好，很多地方很人性化，除了加载包有点慢的让我抓狂以外，其它都很好。喜欢此文的，可以加关注。后续会继续更新该系列文章。
欢迎加群学习：457351423 这里有4000多部学习视频，涵盖各种技术，有需要的欢迎进群学习！
Cordova+angularjs+ionic+vs2015开发（二）
标签：
原文地址：http://www.cnblogs.com/ssk-bak/p/5767574.html
