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

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文件,配置环境变量.png

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


配置环境变量.png

2.Cordova环境

安装cordova命令行工具:
2.1 下载和安装Node.js (地址:https://nodejs.org/en/download/)。
安装完成后你可以在命令行中使用nodenpm

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环境版本,如下图:


cordova环境版本.png

更多环境配置信息,请参考官网:
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 项目名称

项目创建成功,如下图:


image.png
  1. 添加Android平台
    通过上图,我们可以看到平台目录中(plantforms)是空的,因为我们还没有添加任何平台。
    输入进入项目目录命令:
cd myapp

输入添加android平台命令:

cordova platform add android --save

-- ios平台类似:cordova platform add ios --save
添加Android平台命令.png

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


项目目录.png

至此,项目创建完成。
安卓端开发,使用/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版本:


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


    运行效果.jpg

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

//www.greatytc.com/p/058a0dd7f809

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

//www.greatytc.com/p/8fcbf06a4c3a

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

//www.greatytc.com/p/e306ae0f1f03

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

//www.greatytc.com/p/447d41a1299d

第五篇:Android H5混合开发(5):封装Cordova View

//www.greatytc.com/p/13a0fbaa3227

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,290评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,107评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,872评论 0 347
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,415评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,453评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,784评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,927评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,691评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,137评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,472评论 2 326
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,622评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,289评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,887评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,741评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,977评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,316评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,490评论 2 348

推荐阅读更多精彩内容