Cordova的技術交流新群
微信公眾號:(如有cordova問題請關注微信公眾號,回復"cordova",我會及時回復 )
1、下載並安裝Node.js
2、下載並安裝Git
3、配置Android開發平台環境
(1)下載安裝最新JDK
(2)下載安裝AndroidSDK
安裝環境詳細步驟改天再添加,或加群咨詢
1:安裝cordova
$ npm install -g cordova
運行結果如下:
npm WARN deprecated node-uuid@1.4.7: use uuid module instead C:\Users\Peng\AppData\Roaming\npm\cordova -> C:\Users\Peng\AppData\Roaming\npm\n ode_modules\cordova\bin\cordova cordova@6.5.0 C:\Users\Peng\AppData\Roaming\npm\node_modules\cordova ├── underscore@1.7.0 ├── q@1.0.1 ├── nopt@3.0.1 (abbrev@1.0.9) ├── update-notifier@0.5.0 (is-npm@1.0.0, semver-diff@2.1.0, repeating@1.1.3, chalk@1.1.3, string-length@1.0.1, configstore@1.4.0, latest-version@1.0.1) ├── insight@0.8.4 (object-assign@4.1.1, async@1.5.2, uuid@3.0.1, lodash.debou nce@3.1.1, tough-cookie@2.3.2, chalk@1.1.3, configstore@1.4.0, os-name@1.0.3, re quest@2.79.0, inquirer@0.10.1) ├── cordova-common@2.0.0 (q@1.4.1, cordova-registry-mapper@1.1.15, underscore @1.8.3, unorm@1.4.1, semver@5.3.0, ansi@0.3.1, osenv@0.1.4, minimatch@3.0.3, she lljs@0.5.3, glob@5.0.15, bplist-parser@0.1.1, elementtree@0.1.7, plist@1.2.0) └── cordova-lib@6.5.0 (valid-identifier@0.0.1, cordova-registry-mapper@1.1.15 , opener@1.4.1, unorm@1.3.3, properties-parser@0.2.3, semver@4.3.6, nopt@3.0.6, shelljs@0.3.0, dep-graph@1.1.0, glob@5.0.15, elementtree@0.1.6, aliasify@1.9.0, tar@1.0.2, xcode@0.9.1, request@2.47.0, cordova-fetch@1.0.2, plist@1.2.0, init-p ackage-json@1.9.4, cordova-serve@1.0.1, npm@2.15.11, cordova-js@4.2.1, cordova-c reate@1.0.2) 查看版本:
$ cordova -v ? May Cordova anonymously report usage statistics to improve the tool over time? ? May Cordova anonymously report usage statistics to improve the tool over time? No You have been opted out of telemetry. To change this, run: cordova telemetry on. 6.5.0 安裝成功過: Peng@PENG-PC ~ $ cordova -v 6.5.0
創建項目:
//進入項目目錄
Peng@PENG-PC /D/home/cordova-workspace
//在命令窗口打開項目根目錄(執行cd 目錄名),執行cordova create 子項目名 package包名 應用名
(例如 cordova create mycordova com.example.hello helloWorld)
$ cordova create mycordova com.example.hello helloWorld Creating a new cordova project.
//項目創建好了,那么cd到項目根目錄下
Peng@PENG-PC /D/home/cordova-workspace $ cd mycordova/ Peng@PENG-PC /D/home/cordova-workspace/mycordova
//執行cordova platforms ls,檢查你的電腦支持的平台
$ cordova platforms ls Installed platforms: Available platforms: amazon-fireos ~3.6.3 (deprecated) android ~6.1.1 blackberry10 ~3.8.0 browser ~4.1.0 firefoxos ~3.6.3 webos ~3.7.0 windows ~4.4.0 wp8 ~3.8.2 (deprecated) Peng@PENG-PC /D/home/cordova-workspace/mycordova
//在命令窗口打開項目目錄(例如 cd hello),執行cordova platform add android $ cordova platform add android Adding android project... Creating Cordova project for the Android platform: Path: platforms\android Package: com.example.hello Name: helloWorld Activity: MainActivity Android target: android-25 Subproject Path: CordovaLib Android project created with cordova-android@6.1.2 Discovered plugin "cordova-plugin-whitelist" in config.xml. Adding it to the pro ject Fetching plugin "cordova-plugin-whitelist@1" via npm Installing "cordova-plugin-whitelist" for android This plugin is only applicable for versions of cordova-android gr eater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in. Peng@PENG-PC /D/home/cordova-workspace/mycordova //構建應用:
$ cordova build android
//報錯信息,原因是我的ANDROID_HOME沒有配置,這里需要在環境變量里配置好,也就是你的android-sdk的安裝目錄即可,配置后,最好重起一下電腦 Error: Failed to find 'ANDROID_HOME' environment variable. Try setting setting i t manually. Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to inclu de path to valid SDK directory.
執行 $ cordova build android后正確的結果如下:
(可能有些jar下載不下來,沒關系,只要是maven倉庫有的就在http://search.maven.org這里下載)
我的是一直卡在這里(國情問題,自行FQ):我直接在倉庫里通過pom下載到了本地就ok了
Subproject Path: CordovaLib Download https://repo1.maven.org/maven2/org/bouncycastle/bcprov-jdk15on/1.48/bcp rov-jdk15on-1.48.jar
當你遇到jar下載不下來如下:

FAILURE: Build failed with an exception. * What went wrong: A problem occurred configuring root project 'android'. > Could not resolve all files for configuration ':classpath'. > Could not download jimfs.jar (com.google.jimfs:jimfs:1.1) > Could not get resource 'https://jcenter.bintray.com/com/google/jimfs/jimfs/1.1/jimfs-1.1.jar'. > Could not GET 'https://jcenter.bintray.com/com/google/jimfs/jimfs/1.1/jimfs-1.1.jar'. > Connect to akamai.bintray.com:443 [akamai.bintray.com/23.42.190.84] failed: Connection timed out: connect > Could not download lombok-ast.jar (com.android.tools.external.lombok:lombok-ast:0.2.3) > Could not get resource 'https://jcenter.bintray.com/com/android/tools/external/lombok/lombok-ast/0.2.3/lombok-ast-0.2.3.ja > Could not GET 'https://jcenter.bintray.com/com/android/tools/external/lombok/lombok-ast/0.2.3/lombok-ast-0.2.3.jar'. > Connect to akamai.bintray.com:443 [akamai.bintray.com/23.42.190.84] failed: Connection timed out: connect > Could not download antlr4.jar (org.antlr:antlr4:4.5.3) > Could not get resource 'https://jcenter.bintray.com/org/antlr/antlr4/4.5.3/antlr4-4.5.3.jar'. > Could not GET 'https://jcenter.bintray.com/org/antlr/antlr4/4.5.3/antlr4-4.5.3.jar'. > Connect to akamai.bintray.com:443 [akamai.bintray.com/23.42.190.84] failed: Connection timed out: connect * Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. * Get more help at https://help.gradle.org BUILD FAILED in 4m 48s (node:2332) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: cmd: Command failed with exit FAILURE: Build failed with an exception. * What went wrong: A problem occurred configuring root project 'android'. > Could not resolve all files for configuration ':classpath'. > Could not download jimfs.jar (com.google.jimfs:jimfs:1.1) > Could not get resource 'https://jcenter.bintray.com/com/google/jimfs/jimfs/1.1/jimfs-1.1.jar'. > Could not GET 'https://jcenter.bintray.com/com/google/jimfs/jimfs/1.1/jimfs-1.1.jar'. > Connect to akamai.bintray.com:443 [akamai.bintray.com/23.42.190.84] failed: Connection timed out: connect > Could not download lombok-ast.jar (com.android.tools.external.lombok:lombok-ast:0.2.3) > Could not get resource 'https://jcenter.bintray.com/com/android/tools/external/lombok/lombok-ast/0.2.3/lombok-ast-0.2.3.ja > Could not GET 'https://jcenter.bintray.com/com/android/tools/external/lombok/lombok-ast/0.2.3/lombok-ast-0.2.3.jar'. > Connect to akamai.bintray.com:443 [akamai.bintray.com/23.42.190.84] failed: Connection timed out: connect > Could not download antlr4.jar (org.antlr:antlr4:4.5.3) > Could not get resource 'https://jcenter.bintray.com/org/antlr/antlr4/4.5.3/antlr4-4.5.3.jar'. > Could not GET 'https://jcenter.bintray.com/org/antlr/antlr4/4.5.3/antlr4-4.5.3.jar'. > Connect to akamai.bintray.com:443 [akamai.bintray.com/23.42.190.84] failed: Connection timed out: connect * Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. * Get more help at https://help.gradle.org BUILD FAILED in 4m 48s
那么這時候你就去倉庫下載jar如maven倉庫:http://search.maven.org/
然后把下載的jar放在你的
C:\Users\XXX\.gradle\wrapper\dists\gradle-4.1-all\bzyivzo6n839fup2jbap0tjew\gradle-4.1\lib
目錄下即可:
然后在運行cordova build android就可以運行了
如果遇到以下問題:
1:把你所配置的環境變量改為,studio安裝的SDK的目錄下,然后運行該目錄下的SDK manager,然后就開始安裝插件,等

Total time: 2.218 secs Error: cmd: Command failed with exit code 1 Error output: FAILURE: Build failed with an exception. * What went wrong: A problem occurred configuring root project 'android'. > You have not accepted the license agreements of the following SDK components: [Android SDK Platform 25]. Before building your project, you need to accept the license agreements and complete the installation of the missing components using the Android Studio SDK Manager. Alternatively, to learn how to transfer the license agreements from one workstation to another, go to http://d.android.com/r/studio-ui/export-licenses.html * Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
好了,這就是我的運行過程及其結果如下(第一次下載后很慢,可能會有很多......................................................這個慢慢等待,國情問題)
$ cordova build android ANDROID_HOME=F:\android-sdk JAVA_HOME=D:\Java\jdk1.8.0_45 Subproject Path: CordovaLib Incremental java compilation is an incubating feature. :preBuild UP-TO-DATE :preDebugBuild UP-TO-DATE :checkDebugManifest :CordovaLib:preBuild UP-TO-DATE :CordovaLib:preDebugBuild UP-TO-DATE :CordovaLib:checkDebugManifest :CordovaLib:prepareDebugDependencies :CordovaLib:compileDebugAidl UP-TO-DATE :CordovaLib:compileDebugNdk UP-TO-DATE :CordovaLib:compileLint UP-TO-DATE :CordovaLib:copyDebugLint UP-TO-DATE :CordovaLib:mergeDebugShaders UP-TO-DATE :CordovaLib:compileDebugShaders UP-TO-DATE :CordovaLib:generateDebugAssets UP-TO-DATE :CordovaLib:mergeDebugAssets UP-TO-DATE :CordovaLib:mergeDebugProguardFiles UP-TO-DATE :CordovaLib:packageDebugRenderscript UP-TO-DATE :CordovaLib:compileDebugRenderscript UP-TO-DATE :CordovaLib:generateDebugResValues UP-TO-DATE :CordovaLib:generateDebugResources UP-TO-DATE :CordovaLib:packageDebugResources UP-TO-DATE :CordovaLib:processDebugManifest UP-TO-DATE :CordovaLib:generateDebugBuildConfig UP-TO-DATE :CordovaLib:processDebugResources UP-TO-DATE :CordovaLib:generateDebugSources UP-TO-DATE :CordovaLib:incrementalDebugJavaCompilationSafeguard UP-TO-DATE :CordovaLib:compileDebugJavaWithJavac UP-TO-DATE :CordovaLib:processDebugJavaRes UP-TO-DATE :CordovaLib:transformResourcesWithMergeJavaResForDebug UP-TO-DATE :CordovaLib:transformClassesAndResourcesWithSyncLibJarsForDebug UP-TO-DATE :CordovaLib:mergeDebugJniLibFolders UP-TO-DATE :CordovaLib:transformNative_libsWithMergeJniLibsForDebug UP-TO-DATE :CordovaLib:transformNative_libsWithSyncJniLibsForDebug UP-TO-DATE :CordovaLib:bundleDebug UP-TO-DATE :prepareAndroidCordovaLibUnspecifiedDebugLibrary UP-TO-DATE :prepareDebugDependencies :compileDebugAidl UP-TO-DATE :compileDebugRenderscript UP-TO-DATE :generateDebugBuildConfig UP-TO-DATE :generateDebugResValues UP-TO-DATE :generateDebugResources UP-TO-DATE :mergeDebugResources UP-TO-DATE :processDebugManifest UP-TO-DATE :processDebugResources UP-TO-DATE :generateDebugSources UP-TO-DATE :incrementalDebugJavaCompilationSafeguard UP-TO-DATE :compileDebugJavaWithJavac UP-TO-DATE :compileDebugNdk UP-TO-DATE :compileDebugSources UP-TO-DATE :mergeDebugShaders UP-TO-DATE :compileDebugShaders UP-TO-DATE :generateDebugAssets UP-TO-DATE :mergeDebugAssets UP-TO-DATE :transformClassesWithDexForDebug UP-TO-DATE :mergeDebugJniLibFolders UP-TO-DATE :transformNative_libsWithMergeJniLibsForDebug UP-TO-DATE :processDebugJavaRes UP-TO-DATE :transformResourcesWithMergeJavaResForDebug UP-TO-DATE :validateSigningDebug :packageDebug UP-TO-DATE :assembleDebug UP-TO-DATE :cdvBuildDebug UP-TO-DATE BUILD SUCCESSFUL Total time: 2.708 secs Built the following apk(s)://apk生成位置 d:/home/cordova-workspace/mycordova/platforms/android/build/outputs/apk/ android-debug.apk
這樣的話找到這個apk放到你自己的手機里就可以安裝了 ,安裝后如圖
將代碼倒入到Android Studio
http://www.cnblogs.com/Amos-Turing/p/6385660.html
========================================
接下來開始研究代碼了:
參考博客http://www.cnblogs.com/taoshengyujiu/p/5902506.html
C:\Users\用戶名> npm install - cordova
4、在項目目錄下執行
a、創建工程
C:\Users\用戶名> cordova create myapp
C:\Users\用戶名\myapp>cd myapp
b、添加平台支持
> cordova platforms add ios > cordova platforms add android > cordova platforms ls
c、添加插件(在Android Studio 1.0可略去)
> cordova plugin add org.apache.cordova.device > cordova plugin add org.apache.cordova.console > cordova plugin ls
d、編譯代碼
> cordova build android
e、運行代碼
(1)在模擬器上
> cordova emulate android
(2)在瀏覽器上
> cordova serve android
瀏覽器訪問地址:http://localhost:8000/,就可以和調試頁面一樣調試app的布局了。如果app中使用了cordova的Native API調用,會彈出以下對話框: 這是因為瀏覽器無法提供@JavascriptInterface的接口,Cordova視圖通過prompt()和Native交互,這樣做是因為Android2.3 simulator的Bug。所以調試頁面布局,無視即可。
(3)在真機上
C:\Users\用戶名\myapp> cordova run android
或者C:\Users\用戶名\myapp> cordova run wp8/ios
cordova會自動建立my-app文件夾,不同平台的項目在platforms文件夾下面 緩存的內容在C:\Users\[用戶名]\.cordova\lib
5、配置ionic
1、打開Node.js命令行
2、輸入C:\Users\用戶名>npm install -g cordova ionic
3、建立工程輸入$ionic start myApp tabs
4、如果工程已經建立過,會出現would you like to overwrite the directory with this new project?yes
5、運行添加不同平台,如果為android,直接將ios替換成android即可。
$ cd myApp
$ ionic platform add ios
編譯$ ionic build ios
運行在模擬器上$ ionic emulate
運行在瀏覽器上$ ionic serve
運行在真機上$ionic run
6、移植到Android Studio 1.0
Android Studio 1.0:由於AndroidStudio 1.0默認安裝的是Android5.0,編譯器版本是21,gradle目前版本是2.2.1,所以要對相關文件做一些更改
(1)修改選擇my-app\platforms\android\build.gradle
第10行 classpath 'com.android.tools.build:gradle:1.0.+'
第40行 compileSdkVersion 21
第41行 buildToolsVersion "21.1.1"
第74行 gradleVersion = '2.2.1'
(2)修改my-app\platforms\android\project.properties
第13行 target=android-21
(3)修改my-app\platforms\android\AndroidManifest.xml
第13行 <uses-sdk android:minSdkVersion="10" android:targetSdkVersion="21" />
(4)修改my-app\platforms\android\CordovaLib\build.gradle
第28行 classpath 'com.android.tools.build:gradle:1.0.+'
第35行 compileSdkVersion 21
第36行 buildToolsVersion "21.1.1"
(5)修改my-app\platforms\android\CordovaLib\project.properties
第13行 target=android-21
(6)修改my-app\platforms\android\CordovaLib\
AndroidManifest.xml
第22行 <uses-sdk android:minSdkVersion="10" />
(7)導入工程import project->選擇build.gradle
位於my-app\platforms\android\build.gradle
gradle的下載路徑為C:\Users\[用戶名]\.gradle\wrapper\dists,可以用下載工具下載后拷到相應目錄下,並新建一個內容為空的gradle-2.2.1-all.zip.ok文件 8、如果編譯報錯,提示Task '' not found in root project 'android',則打開android.iml,點擊“同步”即可。