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

时间  2019-12-01
标签 cordova 教程 学习 步骤 零基础 开始 栏目 Cordova 繁體版
原文   原文链接

Cordova的技术交流新群html

微信公众号:(若有cordova问题请关注微信公众号,回复"cordova",我会及时回复 )java

 

1、下载并安装Node.jsnode

2、下载并安装Gitandroid

3、配置Android开发平台环境ios

（1）下载安装最新JDKgit

（2）下载安装AndroidSDKweb

安装环境详细步骤改天再添加，或加群咨询shell

1：安装cordovaapache

$ 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

 

建立项目：npm

//进入项目目录
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
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-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放到你本身的手机里就能够安装了 ，安装后如图

http://img.blog.csdn.net/20160122235033207?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

 

 将代码倒入到Android Studio

http://www.cnblogs.com/Amos-Turing/p/6385660.html

========================================

接下来开始研究代码了：

 参考博客http://www.cnblogs.com/taoshengyujiu/p/5902506.html

 

C:\Users\用户名> npm install - cordova

四、在项目目录下执行

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

五、配置ionic

一、打开Node.js命令行
二、输入C:\Users\用户名>npm install -g cordova ionic 
三、创建工程输入$ionic start myApp tabs
四、若是工程已经创建过，会出现would you like to overwrite the directory with this new project?yes
五、运行添加不一样平台，若是为android，直接将ios替换成android便可。
$ cd myApp
$ ionic platform add ios
编译$ ionic build ios
运行在模拟器上$ ionic emulate

运行在浏览器上$ ionic serve

运行在真机上$ionic run

六、移植到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文件 八、若是编译报错，提示Task '' not found in root project 'android'，则打开android.iml，点击“同步”便可。

至此工程创建完成

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程