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 跨域和ajax 跨域问题小结
Jul 01 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
Javascript仿PHP $_GET获取URL中的参数
May 12 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
Mar 18 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 Javascript
详解Vue中watch的详细用法
Nov 28 Javascript
微信小程序实现顶部导航特效
Jan 28 Javascript
微信小程序实现商品属性联动选择
Feb 15 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 Javascript
js实现随机点名
Jan 19 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
PHP和XSS跨站攻击的防范
2007/04/17 PHP
PHP获取网站域名和地址的代码
2008/08/17 PHP
如何用php获取程序执行的时间
2013/06/09 PHP
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
php获取YouTube视频信息的方法
2015/02/11 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
javascript的几种写法总结
2016/09/30 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python设计模式大全
2016/06/27 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
python 爬虫如何实现百度翻译
2020/11/16 Python
CSS3教程:边框属性border的极致应用
2009/04/02 HTML / CSS
校园门卫岗位职责
2013/12/09 职场文书
小学红领巾中秋节广播稿
2014/01/13 职场文书
信息专业大学生自我评价分享
2014/01/17 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
捐赠仪式主持词
2014/03/19 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
招标保密承诺书
2015/01/20 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
综合素质自我评价评语
2015/03/06 职场文书
教师节表彰会主持词
2015/07/06 职场文书
高三语文教学反思
2016/02/16 职场文书