Cordova 教程学习步骤-从零基础开始

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?NoYou 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.1blackberry10 ~3.8.0browser ~4.1.0firefoxos ~3.6.3webos ~3.7.0windows ~4.4.0wp8 ~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\androidPackage: com.example.helloName: helloWorldActivity: MainActivityAndroid 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 androidThis 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 exitFAILURE: 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

View Code

那么这时候你就去仓库下载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.

View Code

好了，这就是我的运行过程及其结果如下（第一次下载后很慢，可能会有很多......................................................这个慢慢等待，国情问题）

$ 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-DATEBUILD SUCCESSFULTotal 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，点击“同步”即可。

至此工程建立完成

转载于:https://www.cnblogs.com/Amos-Turing/p/6373419.html