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 相关文章推荐
javascript 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
Aug 02 Javascript
js数组循环遍历数组内所有元素的方法
Jan 18 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 Javascript
js图片预加载示例
Apr 30 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 Javascript
微信小程序实现tab切换效果
Nov 21 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
使用vue实现多规格选择实例(SKU)
Aug 23 Javascript
js实现上传图片并显示图片名称
Dec 18 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 Javascript
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
Yii2主题(Theme)用法详解
2016/07/23 PHP
laravel入门知识点整理
2020/09/15 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
浅谈javascript中new操作符的原理
2016/06/07 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
react中fetch之cors跨域请求的实现方法
2018/03/14 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
Python实现堆排序的方法详解
2016/05/03 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
浅谈python常用程序算法
2019/03/22 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
求职信的正确写法
2014/07/10 职场文书
农村门前三包责任书
2014/07/25 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
项目合作协议书
2014/09/23 职场文书
大学生实训报告总结
2014/11/05 职场文书
运动会开幕式致辞
2015/07/29 职场文书
干部外出学习心得体会
2016/01/18 职场文书
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript