Cordova是什么

Apache Cordova是一个开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。



以移动平台为例,安卓、IOS平台设备的常用功能,被Apache封装成一个个插件,如摄像头、传感器、网络、数据等。H5端通过调用插件,即可使用设备的这些功能。而项目具体的业务功能,也可封装成自定义的插件,供H5端调用,如:App端分享功能、支付功能、扫码、定位、自定义键盘等。

Cordova提供了完整的机制,使得H5、安卓、IOS等平台混合开发不再复杂。

Cordova的项目可包含多个平台,各平台操作自己的代码即可,与H5端通过插件通信:
www:H5的工作目录
/platforms/android/:安卓项目的工作目录
/platforms/ios/:IOS项目的工作目录
....

更多信息,请参考官网:

https://cordova.apache.org/docs/en/latest/

Cordova环境

1.平台环境

用Cordova构建和运行App,需要安装每个你需要平台的SDK,以安卓为例:

1.1 Java开发工具包(JDK)

安装[Java Development Kit (JDK) 7]或者最新的版本

1.2 Android SDK

安装[Android Stand-alone SDK]或者[Android Studio]

1.3 设置环境变量 JAVA_HOME 和 ANDROID_HOME

为了使功能正常使用Cordova的CLI工具,需要设置一些环境变量。

以Mac平台为例:

1.3.1 打开终端Terminal
1.3.2 输入创建命令(如果不存在):touch .bash_profile
1.3.3 打开文件命令:open .bash_profile



打开.bash_profile,配置环境变量(根据自己的目录,修改即可),如下图:

2.Cordova环境

安装cordova命令行工具:

2.1 下载和安装Node.js (地址:https://nodejs.org/en/download/)。

安装完成后你可以在命令行中使用node 和 npm 。

node.js是javascript的一种运行环境,是一个服务器端的javascript的解释器。
npm其实是Node.js的包管理工具(package manager)。
nodejs中包含npm,安装完成nodejs,npm也就安装好了。 通过命令node --version 可查看nodejs版本;
通过命令npm --version 可查看npm版本;

2.2 安装cordova 模块使用Nodejs的npm工具。

cordova模块会被npm工具自动下载。

2.2.1 打开终端

2.2.2 执行命令安装cordova:
sudo npm install -g cordova 2.2.3 执行命令安装插件管理器:
sudo npm install -g plugman 注释:
sudo OS X和Linux上的命令,可以被安装在权限受限的目录中(windows平台上去掉sudo即可)
-g 标志是告诉 npm 我们全局安装 cordova;
为避免安装时出现权限相关问题,也可先启用超级用户,命令:sudo -s ,这样就可直接通过 npm install -g cordova进行安装。

2.3 cordova环境验证

打开终端,输入以下命令,检查cordova环境版本,如下图:

更多环境配置信息,请参考官网:

https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html

https://cordova.apache.org/docs/en/latest/guide/cli/index.html

plugman工具用于管理插件,如查看插件列表、新增插件、删除插件、添加到指定平台等。

plugman create --name ....
cordova plugin remove....
cordova plugin list
plugman platform add --platform_name android

创建Cordova项目

接下来,我们使用Cordova开始搭建一个Cordova项目

  1. 新建准备存放Cordova项目的目录,我的本地目录名:TestCordova
  2. 打开终端,进入TestCordova目录
  3. 输入创建项目的命令:
cordova create myapp com.qxc.app MyApp

-- myapp 目录名称
-- com.qxc.app 包名/工程id
-- MyApp 项目名称

项目创建成功,如下图:



4. 添加Android平台

通过上图,我们可以看到平台目录中(plantforms)是空的,因为我们还没有添加任何平台。

输入进入项目目录命令:

cd myapp

输入添加android平台命令:

cordova platform add android --save

-- ios平台类似:cordova platform add ios --save



添加Android平台成功后,项目目录如下图:

至此,项目创建完成。

安卓端开发,使用/platforms/android目录;

IOS端开发,使用/plantforms/ios目录;(当前示例demo没有添加)

H5端开发,使用www目录;

具体安卓与H5端如何通信,我们后续再介绍。

测试Android项目

  1. 启动AndroidStudio,打开项目/platforms/android。
  2. 根据本地Gradle版本(我的是3.3和3.5),修改项目的Gradle。

    打开项目的/gradle/wrapper/gradle-wrapper.properties文件,修改gradle版本:

  3. 编译项目(如果编译有问题,一般是Gradle版本的问题,请根据本地gradle进行调整)
  4. 运行到手机


Android H5混合开发(1):构建Cordova 项目

https://www.cnblogs.com/qixingchao/p/11654454.html

Android H5混合开发(2):自定义Cordova插件

https://www.cnblogs.com/qixingchao/p/11652418.html

Android H5混合开发(3):原生Android项目里嵌入Cordova

https://www.cnblogs.com/qixingchao/p/11652424.html

Android H5混合开发(4):构建Cordova Jar包

https://www.cnblogs.com/qixingchao/p/11652431.html

Android H5混合开发(5):封装Cordova View, 让Fragment、弹框、Activity自由使用Cordova

https://www.cnblogs.com/qixingchao/p/11652438.html

Android H5混合开发(1):构建Cordova 项目的更多相关文章

  1. Android H5混合开发(3):原生Android项目里嵌入Cordova

    前言 如果安卓项目已经存在了,那么如何使用Cordova做混合开发? 方案1(适用于插件会持续增加或变化的项目): 新建Cordova项目并添加Android平台,把我们的安卓项目导入Android平 ...

  2. Android H5混合开发(4):构建Cordova Jar包

    前言 上一节,介绍了原生项目如何嵌入Cordova,我们对Cordova的依赖使用的是CordovaLib Module,这也是安卓项目常用的方式. 但是,也有项目希望以Jar包的方式依赖Cordov ...

  3. Android H5混合开发(2):自定义Cordova插件

    前言 Cordova虽然定义了很多基础的插件,供H5端使用原生设备的功能. 但是,如果业务相关的功能,需要提供给H5端使用,那么,就需要我们自定义插件了. 这个"自定义"不是指由A ...

  4. Android H5混合开发(5):封装Cordova View, 让Fragment、弹框、Activity自由使用Cordova

    近期,有同事咨询如何在Fragment中使用Cordova,看了下Cordova源码,官方并没有提供包含Cordova Webview的Fragment,以供我们继承. 上网查询了一下,也有几篇文章讲 ...

  5. Android + HTML5 混合开发

    摘要: 对于 Android + HTML5 混合开发以下的观点仅仅是我的个人观点,如果有什么不对的地方请指正 简介: 混合开发的 App(Android + HTML5)就是在一个 App 中内嵌一 ...

  6. 移动端H5混合开发设置复盘与总结

    此篇接上一篇: 移动端H5混合开发,Touch触控,拖拽,长按, 滑屏 实现方案 https://www.cnblogs.com/buoge/p/9346699.html app 场布设置已经上线了, ...

  7. H5混合开发问题总结

    1.This application is modifying the autolayout engine from a background thread, which can lead to en ...

  8. 能挣钱的微信JSSDK+H5混合开发

    H5喊了那么久,有些人都说不实用,有些人却利用在微信中开发H5应用赚得盆满钵满.微信JSSDK + HTML 5,让移动Web开发与微信结合轻而易举!跨平台.零成本,让大众创业变得更方便. 我觉得现在 ...

  9. 移动web、webApp、混合APP、原生APP、androd H5混合开发 当无网络下,android怎么加载H5界面

    PhoneGap是一个采用HTML,CSS和JavaScript的技术,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够在网页中调用IOS,Android,Palm,Symbian,WP7,W ...

随机推荐

  1. WebGL简易教程(五):图形变换(模型、视图、投影变换)

    [toc] 1. 概述 通过之前的教程,对WebGL中可编程渲染管线的流程有了一定的认识.但是只有前面的知识还不足以绘制真正的三维场景,可以发现之前我们绘制的点.三角形的坐标都是[-1,1]之间,Z值 ...

  2. java基础之循环遍历List和Map

    List和Map是在编程中使用的最频繁的集合类型了,每天都不知道要见它们多少面.在这里介绍下这两种类型的循环遍历,以供学习参考和使用. 一.List 遍历List一般有三种方法,如下: List< ...

  3. Linux之修改系统密码

    目录 Linux之修改系统密码 参考 RHEL6修改系统密码 RHEL7修改系统密码 Linux之修改系统密码

  4. Nginx的基本安装配置

    Centos7安装nginx 升级nginx 升级可能遇到问题(我没有遇到, 参考的另一篇文章描述的) 检查nginx版本, 确认安装成功 nginx配置文件 虚拟主机配置 配置文件中可以用的全局变量 ...

  5. 【从刷面试题到构建知识体系】Java底层-synchronized锁-1

    在技术论坛中,经常看到一种言论:面试造火箭,干活拧螺丝.我们平时写的大部分代码的确是CRDU,再提一个层次,也无非就是揉进去复杂一些的业务逻辑,把一堆的CRDU组合起来. 那么问题来了:我们提倡的研究 ...

  6. python编程基础之十九

    字符串判断常用函数: str.isalpha()  # 判断是否是全字母 str.isdigit()   # 判断是否是全数字 str.isalnum()  # 判断是否是字母和数字组合 str.is ...

  7. 小白学 Python(5):基础运算符(上)

    人生苦短,我选Python 前文传送门 小白学 Python(1):开篇 小白学 Python(2):基础数据类型(上) 小白学 Python(3):基础数据类型(下) 小白学 Python(4):变 ...

  8. MFC日期显示

    一.使用MFC的CTime类来得到时间: CTime必须调用赋值函数,使用其静态函数来初始化 例如: CTime time=CTime::GetCurrentTime(): 这样就可以直接调用time ...

  9. HDU 6112 今夕何夕 (预处理 枚举)

    中文题意都看的懂啦~ 思路很简单,就是通过前一天推出当天是星期几,直接枚举所有2017-9999年的每一天就好了.ㄟ( ▔, ▔ )ㄏ 代码: #include <cstdio> #def ...

  10. C# Halcon联合编程问题(二)

    避免重复编辑同一篇随笔,有问题就开一个新的,哪怕会很短. 还是之前那个问题,halcon中的HObject转换为Bitmap的问题,在全网找相关的办法,三通道图像的HObject转换为C#中的Bitm ...