cordova入門基礎教程

本文主要為大家介紹了關於cordova的入門基礎教程以及在使用中遇到的一些問題，文中通過示例代碼一步步介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。希望能幫助大家。

前言

現在做專案為了節省成功，適配多平台 cordova不為是一個很好的選擇。個人覺得以後也許是個趨勢！像一些知名的APP  例如支付寶  淘寶 好多都大量整合了HTML5 頁面！像我們公司現在的APP 大多都是h5頁面 感覺原生都沒什麼事做了。可想而知學習cordova的重要性！

簡介

Cordova提供了一組裝置相關的API，透過這組API，行動應用程式能夠以JavaScript存取原生的裝置功能，如相機、麥克風等。 Cordova也提供了一組統一的JavaScript類別庫，以及為這些類別庫所使用的裝置相關的原生後台程式碼。 Cordova支援以下行動作業系統：iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。

入門第一步：下載資源庫並整合到專案中來

去下載cordova 庫的原始碼 可以去github上下載 也可以去官網下載。其實官網上的程式碼也是放到github上的！

官方網站：http://cordova.apache.org/

github資源下載網址：https://github.com/apache/cordova-ios   

#使用CocoaPods進行第三方函式庫的管理我之前用的是cordova3.8.0 前幾天不久更新到了4.0.1 。 4.0.1 只支援8.0以上  以下的你用CocoaPods 更新會提示錯誤！注意一下就可以了！

platform :ios, '8.0'

pod 'Cordova', '~> 4.0.1'

入門第二步：如何在專案中正確的集成cordova4.0.1 函式庫

1. 配置Config.xml   很重要

Config.xml is a global configuration file that controls many aspects of a cordova application's be小. This plathavior. Thinosz XML based on the W3C'sPackaged Web Apps (Widgets)specification, and extended to specify core Cordova API features, plugins, and platform-specific settings.For projects created with the Cordova CLI (described inface inface infaces Interfacefile be found in the top-level directory:

大致意思是: config.xml 是一個全域設定文件，控制一個cordova應用程式行為的許多面向。這種平台無關的XML檔案是基於w3c'spackaged Web應用程式設定（widgets）規範，並擴展到指定核心cordovaAPI功能，插件和平台的具體設定。與科爾多瓦CLI創建的專案（描述在命令列介面)

http://cordova.apache.org/docs/en/6.x/config_ref/index.html 官方詳解

2. 顯示html5頁面需要一個容器在這裡使用CDVViewController類別進行html5的顯示以及控制當然也可以自訂一個容器繼承CDVViewController類別做一些自訂功能。

如何使用如下:

self.cordovaManageVC= [[CordovaManageVCalloc]init];

self.cordovaManageVC.startPage=@"http://www.baidu.com";

[self.navigationControllerpushViewController:self.cordovaManageVCanimated:YES];

3. 設定使用者代理程式

- (instancetype)init {

self= [superinit];

if(self!=nil) {

//设置用户代理 如不设置无法调用与H5定制的JavaScript方法进行交互

NSString* original = [CDVUserAgentUtiloriginalUserAgent];

NSString* userAgent = [originalstringByAppendingString:@"delegateUserName"];

self.baseUserAgent= userAgent;

}

returnself;

}

4. 自訂外掛程式需要使用到cordova的CDVPlugin類別用子類別來整合CDVPlugin 

/**

*返回控件

*

*@param command

*/

- (void)back:(CDVInvokedUrlCommand*)command;

定製完成之後需要在confing.xml 進行設定 

#以上就是cordova 最基本的用法了；

使用Cordova 遇到的一些問題

問題一

問題

[Error: Failed to find 'ANDROID_HOME' environment variable. Try setting setting it manually. Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to inclde path to valid SDK directory.]
ERROR building one of the platforms: Error: cmd: Command failed with exit code

解決方法

ANDROID_HOME=D:\apps\Android\sdk
PATH=%PATH%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

問題二

##問題

Error: Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio

解決辦法

從https://services.gradle.org/distributions/ 下載最新gradle套件並安裝。

ANDROID_HOME=/home/kongxx/Android/Sdk
GRADLE_HOME=/apps/gradle-3.2.1
PATH=$PATH:$ANDROID_HOME/tools/:$ANDROID_HOME/platform-tools:$GRADLE_HOME/bin

問題三

問題

使用「cordova build android」 打包的時候報錯：Error: Could not find gradle wrapper within Android SDK.

$ cordova build android
CHCP plugin after prepare hook:
 config-file set to http://www.tjdr.info/EWT/chcp.json
ANDROID_HOME=/home/kongxx/Android/Sdk
JAVA_HOME=/opt/jdk8
Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK.
Looked here: /home/kongxx/Android/Sdk/tools/templates/gradle/wrapper

解決方法

查看了一下/home/kongxx/Android/Sdk/tools/templates/gradle/wrapper 目錄，目錄確實不存在，於是檢查了一下android-studio 環境，發現可以在plugins/android /lib/templates 目錄下包含上面的內容，於是，果斷copy之。

$ cp -rf android-studio/plugins/android/lib/templates /home/kongxx/Android/Sdk/tools/

問題四

問題

使用Cordova打包時報錯誤：Error: spawn EACCES

$ cordova build android
CHCP plugin after prepare hook:
 config-file set to http://www.tjdr.info/EWT/chcp.json
ANDROID_HOME=/home/kongxx/Android/Sdk
JAVA_HOME=/opt/jdk8
Subproject Path: CordovaLib
Error: spawn EACCES

解決方法

sudo chmod -Rf 755 ~/Android

問題五

問題

在cordova 中使用瀏覽器測試的時候，預設啟動的是google-chrome 瀏覽器，例如：

cordova run browser

解決方法

可以使用–target 來指定想使用的瀏覽器。

cordova run browser --target=opera
cordova run browser --target=firefox

相關推薦：

Cordova如何打包Vue專案

cordova 基本指令

cordova打包成webapp方法詳解#

以上是cordova入門基礎教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！