前言

  Apache Cordova是一个开源的移动开发框架。允许使用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。 应用在每个平台的具体执行被封装了起来,并依靠符合标准的API绑定去访问每个设备的功能,比如说:传感器、数据、网络状态等。

  使用Apache Cordova的人群:

  1.移动应用开发者,想扩展一个应用的使用平台,而不通过每个平台的语言和工具集重新实现。

  2.web开发者,想包装部署自己的web App将其分发到各个应用商店门户。

  3.移动应用开发者,有兴趣混合原生应用组建和一个WebView(一个特别的浏览器窗口) 可以接触设备A级PI,或者你想开发一个原生和WebView组件之间的插件接口。

  —— 摘自《Cordova官网》

  Cordova虽然可以用来开发APP,但cordova并不能把H5代码变成IOS或者Android的原生代码。cordova只是将我们的Html文件通过相应的API,显示在HTML Rendering Engine(即WebView)中,同时 Cordova支持丰富的插件,这些插件提供了Cordova和原生组件相互通信的接口并绑定到了标准的设备API上。这就使开发者可以通过JS去调用原生代码,比如:照相机、联系人、热更新和打开第三方APP应用等。

  接下来,本文会一步步的介绍如何使用Cordova开发我们的第一个APP应用(本文主要介绍Android平台应用,IOS平台不做介绍)!

  使用Cordova的基本要求

  1.首先要会基本的HTML + CSS + JS(否则的话你开发个毛线的app)

  2.不需要太高深的android开发经验,但起码的开发流程要了解

  3.需要自行搭建Android开发环境:比如SDK

  4.需要下载安装Node(自行百度)

  5.需要安装Cordova(npm install -g cordova)

  创建APP

  # cordova create <项目名> <包名> <app名(可选)>

  cordova create cordova-study com.zyd.cordova

  复制代码

  创建完成后的文件夹目录结构:

  hooks:存放自定义cordova命令的脚本文件。每个project命令都可以定义before和after的Hook,比如:before_build、after_build

  platforms:平台目录,各自的平台代码就放在这里,可以放一下平台专属的代码

  plugins:Cordova插件目录,安装的插件会放在这里,cordova提供的原生API也是以插件的形式提供的

  www:源代码目录。在cordova prepare的时候会被copy到各个平台工程的assets\www目录中

  config.xml:主要是cordova的一些配置,比如:项目使用了哪些插件、应用图标icon和启动页面

  添加Android开发平台

  xx\cordova-study\platforms>cordova platform add android

  Using cordova-fetch for cordova-android@~7.0.0

  Adding android project...

  Creating Cordova project for the Android platform:

  Path: platforms\android

  Package: com.zyd.cordova

  Name: HelloCordova

  Activity: MainActivity

  Android target: android-26

  Subproject Path: CordovaLib

  Subproject Path: app

  Android project created with cordova-android@7.0.0

  Android Studio project detected

  Android Studio project detected

  Discovered plugin "cordova-plugin-whitelist" in config.xml. Adding it to the project

  Installing "cordova-plugin-whitelist" for android

  This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version

  , you do *not* need this plugin since the whitelist will be built in.

  Adding cordova-plugin-whitelist to package.json

  Saved plugin info for "cordova-plugin-whitelist" to config.xml

  --save flag or autosave detected

  Saving android@~7.0.0 into config.xml file ...

  复制代码

  注:cordova在添加平台时,已自动安装了一个白名单(cordova-plugin-whitelist)插件

  导入Android Studio

  File --> Open --> 选择platforms-android下的build.gradle,确定

  等待IDE自动构建...

  构建完成后的目录结构如下:(我已切换到Android视图模式,图中箭头位置)

  目录内容解释:

  AndroidManifest.xml:Android应用的入口文件,负责配置applaction和activity等

  java:Java文件,当前主要为Cordova项目默认的启动类(一般不需要关心,除非涉及到使用原生代码开发功能)

  assets:资源文件(H5应用的html、js、css等文件),需要注意的是,www中的cordova开头的文件或文件夹(如果使用到了自定义插件,会有个plugins文件目录),切记不可删除!切记不可删除!切记不可删除!

  res:app的配置:启动图标、应用图标、应用名称等。注意:xml中的config.xml是app打包用的配置文件,可配置如:启动主页面、权限、白名单等

  使用cordova打包APP

  xx\platforms\android>cordova build android

  Android Studio project detected

  ANDROID_HOME=F:\AndroidSDK

  JAVA_HOME=D:\server\Java\jdk1.8\jdk1.8.151

  studio

  Subproject Path: CordovaLib

  Subproject Path: app

  Starting a Gradle Daemon, 1 busy and 1 incompatible and 1 stopped Daemons could not be reused, use --status for details

  publishNonDefault is deprecated and has no effect anymore. All variants are now published.

  The Task.leftShift(Closure) method has been deprecated and is scheduled to be removed in Gradle 5.0. Please use Task.doLast(Action) instead.

  at build_dm9mufthcbtehnxb8j3px6xr.run(xx\platforms\android\app\build.gradle:143)

  :CordovaLib:preBuild UP-TO-DATE

  中间省略......

  :app:cdvBuildDebug

  BUILD SUCCESSFUL in 1m 1s

  47 actionable tasks: 47 executed

  Built the following apk(s):

  xx\platforms\android\app\build\outputs\apk\debug\app-debug.apk

  复制代码

  提示BUILD SUCCESSFUL则表示打包完成,根据指定路径,获取apk后安装即可。

  常用的命令:

  cordova install android //将编译好的应用程序安装到模拟器上。

  cordova emulate android //在模拟器上运行(前提是创建好AVD)

  cordova serve android //在浏览器运行

  cordova build android //打包cordova项目到android平台。

  cordova run android //通过USB直接安装到真机(该语句已经包括了build命令)

  复制代码

  使用AndroidStudio打包APP

  参考资料

  1.Cordova入门系列(一)创建项目

  2.Cordova之如何用命令行创建一个项目(完整示例)

  3.Cordova中文文档

  源码地址

  1.我的github

  2.我的码云

  欢迎关注,欢迎Star。当然,如果你直接下载了源码并不star,我也没办法(手动滑稽o(╯╰)o)。

  (编辑:雷林鹏 来源:网络)

[Android教程] Cordova开发App入门(一)创建android项目的更多相关文章

  1. Cordova开发App入门之创建android项目

    Apache Cordova是一个开源的移动开发框架.允许使用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 应用在每个平台的具体执行被封装了起来,并依靠符合标准的API绑 ...

  2. [Android教程] Cordova开发App入门(二)使用热更新插件

    前言 不知各位遇没遇到过,刚刚发布的应用,突然发现了一个隐藏极深的“碧油鸡(BUG)”,肿么办!肿么办!肿么办!如果被老板发现,一定会让程序员哥哥去“吃鸡”.但是想要修复这个“碧油鸡”,就必须要重新打 ...

  3. Cordova开发App使用USB进行真机调试

    在使用cordova开发app时,不像浏览器中可以直接使用浏览器的开发者工具进行调试.为了看到app的显示效果, 一种是使用模拟器进行展示,一种是使用真机进行展示. 模拟器:可以使用Android s ...

  4. Laravel 教程 - Web 开发实战入门 ( Laravel 5.5 )购买链接

      Laravel 教程 - Web 开发实战入门 ( Laravel 5.5 )购买链接: 推荐给你高品质的实战课程 https://laravel-china.org/courses?rf=158 ...

  5. Vue+cordova开发App

    Vue+cordova开发App https://www.imooc.com/article/70062

  6. Cordova 开发环境搭建及创建第一个app

    整理记录使用cordova创建app应用程序并将其部署至Android系统移动设备上操作过程,具体如下: 一.前期安装环境 1. 安装JDK(java开发工具包) 2. 安装gradle 3. 安装A ...

  7. Cordova 开发 App

    Cordova 是一个开源的移动开发框架.允许你用标准的 Web 技术——HTML5,CSS3 和 JavaScript 做跨平台开发.应用在每个平台的具体执行被封装了起来,并依靠符合标准的 API ...

  8. Android教程2020 - RecyclerView使用入门

    本文介绍RecyclerView的使用入门.这里给出一种比较常见的使用方式. Android教程2020 - 系列总览 本文链接 想必读者朋友对列表的表现形式已经不再陌生.手机上有联系人列表,文件列表 ...

  9. 使用cordova开发app

    前言 公司之前用的app就是一个套壳挂个链接就能用的app,后来需要添加微信分享方便传播,没办法只好做成混合式的app了, 因为之前做.net用vs可以创建cordova项目也试着玩过,就决定用cor ...

随机推荐

  1. VC++文件操作之最全篇

    一.剖析VC中的文件操作 各种关于文件的操作在程序设计中是十分常见,如果能对其各种操作都了如指掌,就可以根据实际情况找到最佳的解决方案,从而在较短的时间内编写出高效的代码,因而熟练的掌握文件操作是十分 ...

  2. uva12206 后缀数组

    这题说的是给了一串字符 我们要将这个字符 中找出至少出现m次的最长字符串 一个字符课多次使用 利用后缀数组计算最长的lcp 这里有一个点 记得将后缀数组中加入一个空串 如果遇到全部相同的字符时 没办法 ...

  3. ELK学习笔记之ElasticSearch的索引详解

    0x00 ElasticSearch的索引和MySQL的索引方式对比 Elasticsearch是通过Lucene的倒排索引技术实现比关系型数据库更快的过滤.特别是它对多条件的过滤支持非常好,比如年龄 ...

  4. Python Web学习笔记之WebSocket原理说明

    众所周知,Web应用的通信过程通常是客户端通过浏览器发出一个请求,服务器端接收请求后进行处理并返回结果给客户端,客户端浏览器将信息呈现.这种机制对于信息变化不是特别频繁的应用可以良好支撑,但对于实时要 ...

  5. Python入门之用Python统计代码行

    Pycharm每天都要写很多代码,如何统计每天的代码行数呢?作为一个目标十万行的coder,要想想办法! 题目:有个目录,里面是你自己写过的程序,统计一下你写过多少行代码.包括空行和注释,但是要分别列 ...

  6. P3498 [POI2010]KOR-Beads

    P3498 [POI2010]KOR-Beads 题解 hash+hash表+调和级数 关于调和级数(from baidu百科): 调和级数发散的速度非常缓慢.举例来说,调和序列前10项的和还不足10 ...

  7. Linux查看文件大小命令

    Linux查看文件大小命令 du命令 (1)du -b filepath 参数-b表示以字节计数 du -b filepath 参数-b表示以字节计数 #示例: $ du -b ~/Downloads ...

  8. 20145335郝昊《网络攻防》Exp4 MS11_050

    20145335郝昊<网络攻防>Exp4 MS11_050 实验内容 初步掌握平台matesploit的使用 了解漏洞MS11_050漏洞:use-after-free漏洞,即对象被释放之 ...

  9. Timer,TimerTask,Handler

    新建一个定时器线程,通过此线程每一秒发送数据到Handler,然后通过Handler来修改UI. 1.获得Handler,Timer,TimerTask对象. Handler handler=new ...

  10. P3216 [HNOI2011]数学作业 (矩阵快速幂)

    P3216 [HNOI2011]数学作业 题目描述 小 C 数学成绩优异,于是老师给小 C 留了一道非常难的数学作业题: 给定正整数 NN 和 MM ,要求计算 Concatenate (1 .. N ...