VS2015 Cordova Ionic移动开发(二)

一、创建空白Cordova应用

打开VS,选择【新建项目】,选择其它语言JavaScript或者TypeScript,语言的话就按个人喜好,喜欢JS就用JS,喜欢TS就用TS,推荐使用TS书写,代码结构和可读性相对更强。本文演示使用JS来书写,方便不会TS的用户阅读。

VS2015 Cordova Ionic移动开发(二)

创建完项目后,项目结构如下:

VS2015 Cordova Ionic移动开发(二)

www目录为我们本地应用程序目录,和一般静态网站类似。默认主页为index.html。脚本对应为scripts/index.js

config.xml为项目配置文件,该文件在VS中是可视化操作的。

VS2015 Cordova Ionic移动开发(二)

包括项目配置,平台配置,以及Cordova插件管理,Cordova插件可以在此处添加。

VS2015 Cordova Ionic移动开发(二)

打开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预览

VS2015 Cordova Ionic移动开发(二)

选择安卓和默认的Ripple模拟器来预览程序。同时点开VS输出面板,查看输出内容。

VS2015 Cordova Ionic移动开发(二)

第一次F5启动程序的话,由于缺少部分组件和插件等,VS会自动联网使用node下载,所以点开输出面板查看输出信息,如果提示正在应用第三方包,请稍等,或者信息输出卡在某一个点,那么就是在下载对应的内容,此时VS无法停止编译,也无法编译成功,须等部分包下载完成后才能编译成功,该过程视网络环境影响,需耐心等待(一般情况在5-10分钟即可完成,其它情况在1小时以上也有,甚至几小时也有,具体视网络情况而定了,开VPN貌似有一定的帮助,但是帮助不是很大)。建议F5启动后如果编译不通过,那么就把VS开着,让它下载直到编译成功,看到结果为止。如果长时间没有反应,建议结束VS进程,重启项目,重新F5编译。反复几次就行了。

首次启动项目和编译成apk都会有这样问题,包下载完成后,以后再启动预览项目和编译生成apk都会在一瞬间完成,就无须等待了。

1.Ripple-Android模拟器预览结果如下:

VS2015 Cordova Ionic移动开发(二)

Ripple模拟器是一个网页版模拟器,开发建议使用,快速预览界面,功能和兼容性,建议使用模拟器或者真机调试。

2.Android模拟器预览:

首先启动:AVD Manager.exe

安卓SDK的模拟器管理工具。一般在:C:\Program Files (x86)\Android\android-sdk\AVD Manager.exe

VS2015 Cordova Ionic移动开发(二)

创建一个模拟器,分辨率适中即可:

VS2015 Cordova Ionic移动开发(二)

确定后,启动模拟器。由于模拟器启动速度,运行效率都比较差,建议开启Intel硬件加速功能,提升模拟器运行效率。

开启硬件加速方式:

打开SDK Manager.exe 和AVD Manager.exe在同一目录下:

VS2015 Cordova Ionic移动开发(二)

勾选后下载下来。

示例机器目录在:

C:\Program Files (x86)\Android\android-sdk\extras\intel\Hardware_Accelerated_Execution_Manager

VS2015 Cordova Ionic移动开发(二)

安装完成即可实现模拟器硬件加速效果。如果安装过程中失败,那么重启电脑进入BIOS设置界面,将Intel硬件加速功能设为Enable,保存后重新进入系统安装。即可安装成功,硬件加速可以带来性能的大幅度提升,效果不错,模拟器主要针对不同机型用作适应性测试,正常开发直接使用Ripple或真机为好。

模拟器效果如下:

VS2015 Cordova Ionic移动开发(二)

VS2015 Cordova Ionic移动开发(二)

3.Android真机预览

连接手机到PC上,安装手机对应的驱动程序。开启手机USB调试模式。确认手机和PC已经正确连接后:

将项目启动改为【设备】,F5启动即可:

VS2015 Cordova Ionic移动开发(二)

手机画面如下:

VS2015 Cordova Ionic移动开发(二)

三、IOS预览

1.IOS-Ripple预览:

VS2015 Cordova Ionic移动开发(二)

将设备改为IOS,模拟器选择Ripple F5启动预览后如下:

VS2015 Cordova Ionic移动开发(二)

预览效果和安卓无差别。

2.IOS模拟器预览

首先确定Mac电脑已经启动,remotebuild服务已经运行(配置方式见前文)。

确定无误,F5启动模拟器运行

VS2015 Cordova Ionic移动开发(二)

运行结果如下:

remotebuild服务输出信息:

VS2015 Cordova Ionic移动开发(二)

Xcode模拟器显示输出:

VS2015 Cordova Ionic移动开发(二)

由于IOS手机暂时没有越狱,开发者账户已经停用了,暂时没有真机测试的结果,理论上模拟器成功了,真机上跑问题不是很大。

四、打包APK文件

VS2015中很多人对于打包APK可能不会操作,其实很简单:

右击项目【在文件资源管理中打开文件夹】打开项目文件夹,找到build.bat文件。路径如下:

项目路径\platforms\android\cordova\build.bat

执行build.bat,执行成功后会在对应目录中生成build文件夹。路径如下:

项目路径\platforms\android\build

APK路径为:

项目路径\platforms\android\build\outputs\apk

VS2015 Cordova Ionic移动开发(二)

此APK文件可以直接安装使用了。

五、创建Ionic项目

目前主流的开发框架就是Cordova+Ionic+Angular。所以使用Ionic框架也是必不可少的。在VS上创建Ionic项目很简单。

打开VS联机模板,索搜并下载并安装Ionic的VS模板

VS2015 Cordova Ionic移动开发(二)

打开【新建项目】对话框,创建一个Ionic项目:

VS2015 Cordova Ionic移动开发(二)

以创建一个侧边栏的Ionic项目为例,创建完成,项目结构如下:

VS2015 Cordova Ionic移动开发(二)

F5运行预览结果如下:

VS2015 Cordova Ionic移动开发(二)

VS2015 Cordova Ionic移动开发(二)

结束语:至此基本的Hello Word程序开发就结束了,VS开发整体来说效果很好,很多地方很人性化,除了加载包有点慢的让我抓狂以外,其它都很好。喜欢此文的,可以加关注。后续会继续更新该系列文章。

上一篇:一鼓作气 博客--第一篇 note1


下一篇:VS2015 Cordova Ionic移动开发(一)