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 tab效果的实现代码
Dec 26 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
Jun 24 Javascript
jQuery 判断元素整理汇总
Feb 28 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
Jul 24 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
详解vue 数据传递的方法
Apr 19 Javascript
微信小程序url传参写变量的方法
Aug 09 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
Dec 17 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 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设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
PHP加密解密类实例代码
2016/07/20 PHP
YII框架模块化处理操作示例
2019/04/26 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
IE无法设置短域名下Cookie
2010/09/23 Javascript
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
详解JS对象封装的常用方式
2016/12/30 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
2018/02/26 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
flask中的wtforms使用方法
2018/07/21 Python
Python基础教程之异常详解
2019/01/10 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
Python爬取豆瓣数据实现过程解析
2020/10/27 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
易程科技软件测试笔试
2013/03/24 面试题
表彰先进集体通报
2014/01/12 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
《秦兵马俑》教学反思
2016/02/24 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
MySQL sql_mode的使用详解
2021/05/08 MySQL