你的位置:首页 > ASP.net教程

[ASP.net教程]VS2015+cordova+ionic安装配置


VS2015已经出了正式版,想用来试一下cordova方面的开发。最近在看ionic这个框架,于是想能在VS2015里编辑js就好了。

下面说一下蛋疼的安装配置过程。

一、安装VS2015及Android SDK

首先Android的SDK最好提前下好,我是从另一个电脑上把已经下好的sdk复制到D盘Android目录下,这样安装VS2015的时候就不用选择SDK下载了,速度会快点。

安装VS2015的时候最好网络FQ一下,不然有些组件有可能会下载失败。安装的组件我没选Xamarin,这玩意太贵用不起。安装了cordova的相关组件,也要安装nodejs。当然也可以单独安装nodejs,貌似VS2015里的nodejs版本比现在官方最新版本要低。

cordova可以在VS2015里装。

二、安装ionic

然后安装ionic,打开nodejs命令行,输入

npm install -g ionic

如果在VS2015例安装过cordova这里就不用加cordova参数了。很不幸,有警告信息:

npm WARN engine cordova-js@4.0.0: wanted: {"node":"~0.10.x"} (current: {"node":"0.12.7","npm":"2.11.3"})npm WARN engine npm@1.3.4: wanted: {"node":">=0.6","npm":"1"} (current: {"node":"0.12.7","npm":"2.11.3"})npm WARN engine 

应该版本不太一致,不影响使用。

我准备分别用ionic的命令行和VS2015建立两个cordova项目,比较一下异同。

三、使用ionic命令行建立项目

先用ionic命令行建个项目试试:

ionic start myApp tabs

Creating Ionic app in folder E:\Workspaces\Cordova\myApp based on tabs projectDownloading: https://github.com/driftyco/ionic-app-base/archive/master.zip[=============================] 100% 0.0sDownloading: https://github.com/driftyco/ionic-starter-tabs/archive/master.zip[=============================] 100% 0.0sUpdated the hooks directory to have execute permissionsUpdate Config.

会自动从github上下载项目模板。切换到该目录,添加android平台支持:

E:\Workspaces\Cordova\myApp>ionic platform add androidUpdated the hooks directory to have execute permissionsDownloading Default Ionic ResourcesDownloading: https://github.com/driftyco/ionic-default-resources/archive/master.zip[=============================] 100% 0.0sDone adding default Ionic resourcesAdding icons for platform: androidnpm http GET https://registry.npmjs.org/cordova-androidnpm http 200 https://registry.npmjs.org/cordova-androidnpm http GET https://registry.npmjs.org/cordova-androidnpm http 200 https://registry.npmjs.org/cordova-androidnpm http GET https://registry.npmjs.org/cordova-android/-/cordova-android-4.0.2.tgznpm http 200 https://registry.npmjs.org/cordova-android/-/cordova-android-4.0.2.tgzAdding android project...Creating Cordova project for the Android platform:    Path: platforms\android    Package: com.ionicframework.myapp183819    Name: myApp    Activity: MainActivity    Android target: android-22Copying template files...Android project created with cordova-android@4.0.2Running command: "C:\Program Files\nodejs\node.exe" E:\Workspaces\Cordova\myApp\hooks\after_prepare\010_add_platform_class.js E:\Workspaces\Cordova\myAppadd to body class: platform-androidInstalling "com.ionic.keyboard" for androidInstalling "cordova-plugin-console" for androidInstalling "cordova-plugin-device" for androidInstalling "cordova-plugin-splashscreen" for androidInstalling "cordova-plugin-whitelist" for androidSaving platform to package.json file

自动添加了几个cordova的组件。然后编译一下:

E:\Workspaces\Cordova\myApp>ionic build androidRunning command: "C:\Program Files\nodejs\node.exe" E:\Workspaces\Cordova\myApp\hooks\after_prepare\010_add_platform_class.js E:\Workspaces\Cordova\myAppadd to body class: platform-androidRunning command: cmd "/s /c "E:\Workspaces\Cordova\myApp\platforms\android\cordova\build.bat""[Error: ANDROID_HOME is not set and "android" command not in your PATH. You must fulfill at least one of these conditions.]ERROR building one of the platforms: Error: cmd: Command failed with exit code 2You may not have the required environment or OS to build this projectError: cmd: Command failed with exit code 2  at ChildProcess.whenDone (C:\Users\Xiaodi\AppData\Roaming\npm\node_modules\cordova\node_modules\cordova-lib\src\cordova\superspawn.js:134:23)  at ChildProcess.emit (events.js:110:17)  at maybeClose (child_process.js:1015:16)  at Process.ChildProcess._handle.onexit (child_process.js:1087:5)

报错了,ANDROID_HOME没有配置,需要说明的是,如果先安装了Android Studio等Android的开发环境,这些变量是应该已经配置好的,因为本机没有装Android Studio所以没有配置,那在环境变量里补上。

我把Android的SDK放在了D:\Android\sdk目录下,在环境变量里添加:

ANDROID_HOME=D:\Android\sdk

还要添加java的环境变量:

JAVA_HOME=C:\Program Files (x86)\Java\jdk1.7.0_55

然后在PATH里添加:

%ANDROID_HOME%;%JAVA_HOME%\bin;

然后一定要关闭当前的nodejs窗口再重新打开,不然新配置的不会起作用。

重新编译一下:

E:\Workspaces\Cordova\myApp>ionic build androidRunning command: "C:\Program Files\nodejs\node.exe" E:\Workspaces\Cordova\myApp\hooks\after_prepare\010_add_platform_class.js E:\Workspaces\Cordova\myAppadd to body class: platform-androidRunning command: cmd "/s /c "E:\Workspaces\Cordova\myApp\platforms\android\cordova\build.bat""ANDROID_HOME=D:\Android\sdkJAVA_HOME=C:\Program Files (x86)\Java\jdk1.7.0_55Running: E:\Workspaces\Cordova\myApp\platforms\android\gradlew cdvBuildDebug -b E:\Workspaces\Cordova\myApp\platforms\android\build.gradle -Dorg.gradle.daemon=trueDownloading http://services.gradle.org/distributions/gradle-2.2.1-all.zip...........................................................................

到这个地方用了很久,在下载gradle,这里有点失误了,应该先把Android完整的开发环境配置好,应该就会省略这一步了。到现在只能慢慢等了。

后面又是一大堆下载:

Unzipping e:\Users\Xiaodi\.gradle\wrapper\dists\gradle-2.2.1-all\2m8005s69iu8v0oiejfej094b\gradle-2.2.1-all.zip to e:\Users\Xiaodi\.gradle\wrapper\dists\gradle-2.2.1-all\2m8005s69iu8v0oiejfej094bDownload https://repo1.maven.org/maven2/com/android/tools/build/gradle/1.0.0/gradle-1.0.0.pomDownload https://repo1.maven.org/maven2/com/android/tools/build/builder/1.0.0/builder-1.0.0.pomDownload https://repo1.maven.org/maven2/com/android/tools/lint/lint/24.0.0/lint-24.0.0.pomDownload https://repo1.maven.org/maven2/net/sf/proguard/proguard-gradle/5.1/proguard-gradle-5.1.pomDownload https://repo1.maven.org/maven2/net/sf/proguard/proguard-parent/5.1/proguard-parent-5.1.pomDownload https://repo1.maven.org/maven2/com/android/tools/sdk-common/24.0.0/sdk-common-24.0.0.pomDownload https://repo1.maven.org/maven2/org/bouncycastle/bcprov-jdk15on/1.48/bcprov-jdk15on-1.48.pomDownload https://repo1.maven.org/maven2/com/squareup/javawriter/2.5.0/javawriter-2.5.0.pomDownload https://repo1.maven.org/maven2/org/sonatype/oss/oss-parent/7/oss-parent-7.pomDownload https://repo1.maven.org/maven2/com/android/tools/common/24.0.0/common-24.0.0.pomDownload https://repo1.maven.org/maven2/com/android/tools/build/builder-test-api/1.0.0/builder-test-api-1.0.0.pomDownload https://repo1.maven.org/maven2/com/android/tools/ddms/ddmlib/24.0.0/ddmlib-24.0.0.pomDownload https://repo1.maven.org/maven2/com/android/tools/build/manifest-merger/24.0.0/manifest-merger-24.0.0.pomDownload https://repo1.maven.org/maven2/com/android/tools/build/builder-model/1.0.0/builder-model-1.0.0.pomDownload https://repo1.maven.org/maven2/com/android/tools/sdklib/24.0.0/sdklib-24.0.0.pomDownload https://repo1.maven.org/maven2/org/bouncycastle/bcpkix-jdk15on/1.48/bcpkix-jdk15on-1.48.pomDownload https://repo1.maven.org/maven2/com/android/tools/lint/lint-checks/24.0.0/lint-checks-24.0.0.pomDownload https://repo1.maven.org/maven2/org/eclipse/jdt/core/compiler/ecj/4.2.2/ecj-4.2.2.pomDownload https://repo1.maven.org/maven2/net/sf/proguard/proguard-base/5.1/proguard-base-5.1.pomDownload https://repo1.maven.org/maven2/com/google/guava/guava/17.0/guava-17.0.pomDownload https://repo1.maven.org/maven2/com/google/guava/guava-parent/17.0/guava-parent-17.0.pomDownload https://repo1.maven.org/maven2/net/sf/kDownload https://repo1.maven.org/maven2/com/android/tools/layoutlib/layoutlib-api/24.0.0/layoutlib-api-24.0.0.pomDownload https://repo1.maven.org/maven2/org/apache/httpcomponents/httpclient/4.1.1/httpclient-4.1.1.pomDownload https://repo1.maven.org/maven2/org/apache/httpcomponents/httpcomponents-client/4.1.1/httpcomponents-client-4.1.1.pomDownload https://repo1.maven.org/maven2/org/apache/httpcomponents/project/4.1.1/project-4.1.1.pomDownload https://repo1.maven.org/maven2/org/apache/httpcomponents/httpmime/4.1/httpmime-4.1.pomDownload https://repo1.maven.org/maven2/org/apache/httpcomponents/httpcomponents-client/4.1/httpcomponents-client-4.1.pomDownload https://repo1.maven.org/maven2/com/android/tools/dvlib/24.0.0/dvlib-24.0.0.pomDownload https://repo1.maven.org/maven2/org/apache/commons/commons-compress/1.8.1/commons-compress-1.8.1.pomDownload https://repo1.maven.org/maven2/org/apache/commons/commons-parent/33/commons-parent-33.pomDownload https://repo1.maven.org/maven2/org/apache/apache/13/apache-13.pomDownload https://repo1.maven.org/maven2/com/android/tools/lint/lint-api/24.0.0/lint-api-24.0.0.pomDownload https://repo1.maven.org/maven2/org/ow2/asm/asm-analysis/4.0/asm-analysis-4.0.pomDownload https://repo1.maven.org/maven2/org/ow2/asm/asm-parent/4.0/asm-parent-4.0.pomDownload https://repo1.maven.org/maven2/org/ow2/ow2/1.3/ow2-1.3.pomDownload https://repo1.maven.org/maven2/org/apache/httpcomponents/httpcore/4.1/httpcore-4.1.pomDownload https://repo1.maven.org/maven2/org/apache/httpcomponents/httpcomponents-core/4.1/httpcomponents-core-4.1.pomDownload https://repo1.maven.org/maven2/commons-logging/commons-logging/1.1.1/commons-logging-1.1.1.pomDownload https://repo1.maven.org/maven2/org/apache/commons/commons-parent/5/commons-parent-5.pomDownload https://repo1.maven.org/maven2/org/apache/apache/4/apache-4.pomDownload https://repo1.maven.org/maven2/commons-codec/commons-codec/1.4/commons-codec-1.4.pomDownload https://repo1.maven.org/maven2/org/apache/commons/commons-parent/11/commons-parent-11.pomDownload https://repo1.maven.org/maven2/org/ow2/asm/asm/4.0/asm-4.0.pomDownload https://repo1.maven.org/maven2/com/android/tools/external/lombok/lombok-ast/0.2.2/lombok-ast-0.2.2.pomDownload https://repo1.maven.org/maven2/org/ow2/asm/asm-tree/4.0/asm-tree-4.0.pomDownload https://repo1.maven.org/maven2/com/android/tools/build/gradle/1.0.0/gradle-1.0.0.jarDownload https://repo1.maven.org/maven2/com/android/tools/build/builder/1.0.0/builder-1.0.0.jarDownload https://repo1.maven.org/maven2/com/android/tools/lint/lint/24.0.0/lint-24.0.0.jarDownload https://repo1.maven.org/maven2/net/sf/proguard/proguard-gradle/5.1/proguard-gradle-5.1.jarDownload https://repo1.maven.org/maven2/com/android/tools/sdk-common/24.0.0/sdk-common-24.0.0.jarDownload https://repo1.maven.org/maven2/org/bouncycastle/bcprov-jdk15on/1.48/bcprov-jdk15on-1.48.jarDownload https://repo1.maven.org/maven2/com/squareup/javawriter/2.5.0/javawriter-2.5.0.jarDownload https://repo1.maven.org/maven2/com/android/tools/common/24.0.0/common-24.0.0.jarDownload https://repo1.maven.org/maven2/com/android/tools/build/builder-test-api/1.0.0/builder-test-api-1.0.0.jarDownload https://repo1.maven.org/maven2/com/android/tools/ddms/ddmlib/24.0.0/ddmlib-24.0.0.jarDownload https://repo1.maven.org/maven2/com/android/tools/build/manifest-merger/24.0.0/manifest-merger-24.0.0.jarDownload https://repo1.maven.org/maven2/com/android/tools/build/builder-model/1.0.0/builder-model-1.0.0.jarDownload https://repo1.maven.org/maven2/com/android/tools/sdklib/24.0.0/sdklib-24.0.0.jar

我现在已经后悔了,没有先装Android Studio。

:preBuild:compileDebugNdk:preDebugBuild:checkDebugManifest:CordovaLib:compileLint:CordovaLib:copyDebugLint UP-TO-DATE:CordovaLib:mergeDebugProguardFiles:CordovaLib:preBuild:CordovaLib:preDebugBuild:CordovaLib:checkDebugManifest:CordovaLib:prepareDebugDependencies:CordovaLib:compileDebugAidl:CordovaLib:compileDebugRenderscript:CordovaLib:generateDebugBuildConfig:CordovaLib:generateDebugAssets UP-TO-DATE:CordovaLib:mergeDebugAssets:CordovaLib:generateDebugResValues:CordovaLib:generateDebugResources:CordovaLib:packageDebugResources:CordovaLib:processDebugManifest:CordovaLib:processDebugResources:CordovaLib:generateDebugSources:CordovaLib:compileDebugJavaע: ijЩ�����ļ�ʹ�û�����ѹ�ʱ�� API��ע: �й���ϸ��Ϣ, ��ʹ�� -Xlint:deprecation ���±��롣:CordovaLib:processDebugJavaRes UP-TO-DATE:CordovaLib:packageDebugJar:CordovaLib:compileDebugNdk:CordovaLib:packageDebugJniLibs UP-TO-DATE:CordovaLib:packageDebugLocalJar UP-TO-DATE:CordovaLib:packageDebugRenderscript UP-TO-DATE:CordovaLib:bundleDebug:prepareAndroidCordovaLibUnspecifiedDebugLibrary:prepareDebugDependencies:compileDebugAidl:compileDebugRenderscript:generateDebugBuildConfig:generateDebugAssets UP-TO-DATE:mergeDebugAssets:generateDebugResValues:generateDebugResources:mergeDebugResources:processDebugManifest:processDebugResources:generateDebugSources:compileDebugJavaע: ijЩ�����ļ�ʹ�û�����ѹ�ʱ�� API��ע: �й���ϸ��Ϣ, ��ʹ�� -Xlint:deprecation ���±��롣:preDexDebug:dexDebug:processDebugJavaRes UP-TO-DATE:validateDebugSigning:packageDebug:zipalignDebug:assembleDebug:cdvBuildDebugBUILD SUCCESSFULTotal time: 23 mins 56.923 secsBuilt the following apk(s):  E:\Workspaces\Cordova\myApp\platforms\android\build\outputs\apk\android-debug.apk

中间貌似乱码了,不过好在编译成功。中间下载花了20多分钟。

运行一下看看:

E:\Workspaces\Cordova\myApp>ionic run androidRunning command: "C:\Program Files\nodejs\node.exe" E:\Workspaces\Cordova\myApp\hooks\after_prepare\010_add_platform_class.js E:\Workspaces\Cordova\myAppadd to body class: platform-androidRunning command: cmd "/s /c "E:\Workspaces\Cordova\myApp\platforms\android\cordova\run.bat""ANDROID_HOME=D:\Android\sdkJAVA_HOME=C:\Program Files (x86)\Java\jdk1.7.0_55E:\Workspaces\Cordova\myApp\platforms\android\cordova\node_modules\q\q.js:126          throw e;             ^Error executing "adb devices": ADB server didn't ACK* failed to start daemon *error: unknown host serviceERROR running one or more of the platforms: Error: cmd: Command failed with exit code 1You may not have the required environment or OS to run this project

很不幸,又报错了。不过既然已经编译成功,可以直接安装apk试试。在E:\Workspaces\Cordova\myApp\platforms\android\build\outputs\apk目录下找到apk直接安装。

具体截图就不贴了,是可以直接运行的。

以上是用ionic命令行建立项目的过程。为了减少问题产生建议大家先按照Android官方文档把Android Studio装好,这样可以少很多问题。

 

四、使用VS2015建立项目

下面用VS2015来建立一个cordova项目。注意如果安装VS2015的时候没有安装Android SDK,那么使用前就要先配置一下。菜单工具-选项-Tools For Apache Cordova:

有一个Run Dependency Checker,检测一下依赖项是否已经成功配置,如果之前没有自动下载Android SDK的话,肯定会报错的,点击第二项,手动配置一下ADK_HOME即可。在这里也可以看到如果ANT、Git、JAVA SDK都是由VS2015自动安装的话,这个地方就自动配置好了,如果自己手动安装就要手动配置。

用VS2015新建项目的过程就不细说了,项目模板里有。建好后可以用Ripple模拟器在Chrome里跑一下看看。

 

现在可以比较一下这两种方式建好的项目目录,可以看到目录结构基本是一样的:

左边为ionic命令行建立的项目,右边为VS2015建立的项目。www里面就是html+js+css,platforms目录是Android平台支持。

其实有一个更方便的方式,ionic已经提供了VS2015的项目模板:

https://visualstudiogallery.msdn.microsoft.com/b26474d5-c14d-4d69-bad5-37954538c506

然后用这个模板建个项目,可以看到项目目录基本跟空白的cordova项目是类似的,但自动增加了ionic支持,相当于根据https://github.com/driftyco/ionic-starter-tabs这个模板建了个项目。这样就方便多了。

但用这种方式建立的项目和ionic命令行建立的项目也有区别,命令行建立的项目,已经把依赖的ionic框架及Anjular框架下载到本地了,而项目模板建立的项目,页面里引用的js还是服务器上的。

时间关系没有深入研究。但终于可以用VS2015写Cordova了。希望能尽快写出一个可以运行的小app来。