Cordova+angularjs+ionic+vs2015开发（二）

欢迎加群学习：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多部学习视频，涵盖各种技术，有需要的欢迎进群学习！