cordova入门基础教程

小云云原创: 2018-01-19 10:54:402497浏览

本文主要给大家介绍了关于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 behavior. This platform-agnostic XML file is arranged 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 in The Command-Line Interface), this file can 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入门基础教程

相关文章