cordova入门基础教程及使用中遇到的一些问题总结


Posted in Javascript onNovember 14, 2017

前言

现在做项目为了节约成功,适配多平台 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   

本地下载地址:http://xiazai.3water.com/201711/yuanma/cordova-ios(3water.com).rar

使用 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 最基本的用法了;

使用 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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js 新浪的一个图片播放图片轮换效果代码
Jul 15 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
node.js中的fs.open方法使用说明
Dec 17 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
使用vue-resource进行数据交互的实例
Sep 02 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
Aug 30 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 Javascript
基于vue的video播放器的实现示例
Feb 19 Vue.js
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 #Javascript
JS中图片压缩的方法小结
Nov 14 #Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 #jQuery
Node.js使用Express.Router的方法
Nov 14 #Javascript
js精确的加减乘除实例
Nov 14 #Javascript
JavaScript插件Tab选项卡效果
Nov 14 #Javascript
vue中如何创建多个ueditor实例教程
Nov 14 #Javascript
You might like
用PHP和ACCESS写聊天室(四)
2006/10/09 PHP
php处理复杂xml数据示例
2016/07/11 PHP
PHP实现图片压缩
2020/09/09 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
javascript基本语法
2016/05/31 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
在pycharm中显示python画的图方法
2019/08/31 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
信息专业大学生自我评价分享
2014/01/17 职场文书
护士毕业实习感言
2014/03/05 职场文书
中华魂演讲稿
2014/05/13 职场文书
应届大学生自荐书
2014/06/17 职场文书
工会趣味活动方案
2014/08/18 职场文书
道德模范事迹材料
2014/12/20 职场文书
退休欢送会主持词
2015/07/01 职场文书
《风娃娃》教学反思
2016/02/18 职场文书