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教程