[Android教程] Cordova开发App入门(一)建立android项目

  前言css

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

  使用Apache Cordova的人群:java

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

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

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

  —— 摘自《Cordova官网》web

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

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

  使用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)。

图片描述

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

相关文章
相关标签/搜索