文章 六月 10, 2020

cordova免费开源的移动app开发

文章字数 8.1k 阅读约需 7 mins. 阅读次数 0

​ 近期接手了一个app的开发,因为项目是需要在手持机终端设备来进行的,有打印、NFC等功能。打印功能是厂家封装好的cordova插件,由于第一次接触,于是开始了边学边做的开发过程。

什么是 cordova

官网定义如下:

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

安装 cordova

cordova的命令运行在node.js上面并且可以通过npm进行安装。没有下载node的必须先下载node

npm install -g cordova

安装完成后,可以使用cmd输入cordova回车,如果不报找不到,那么恭喜你第一步完成了。

创建cordova工程

跳转到你项目的根目录,使用cmd或其他终端执行:

cordova create path [id [name [config]]] [options]

cordova create hello com.example.hello HelloWorld
参数 说明
path 不应该存在的目录。 Cordova将创建此目录
id 默认:io.cordova.hellocordova
项目id,安卓中的java包名,ios的bundleID都需要用到这个,该值可以修改
name 默认:HelloCordova
项目的name,安卓平台可能会使用该值作为类名,该值可以修改
config json字符串,其键/值将包含在 /.cordova/config.json中

这会为你的cordova应用创建必须的目录

myapp/
|-- config.xml  ~~~~~~~~配置文件
|-- hooks/    ~~~~~~~~~~一些build时的特殊脚本
|-- www/   ~~~~~~~~~~~web内容
|-- platforms/   ~~~~~~~原生平台代码
| |-- android/
| |-- windows/
| |-- ios/
|-- plugins/  ~~~~~~~~~~插件
  |--cordova-plugin-camera/

添加平台

给你的App添加目标平台。我们将会添加’ios’和’android’平台,并确保他们保存在了config.xml中:

cordova platform add ios --save
cordova platform add android --save

检查你当前平台设置状况:

cordova platform ls

注意:在你使用CLI创建应用的时候, 不要 修改/platforms/目录中的任何文件。当准备构建应用或者重新安装插件时这个目录通常会被重写。

安卓平台安装要求(ios不做介绍)

Cordova支持Android需要Android SDK,它可以安装在OS X, Linux和Windows上。查看 Android SDK的 系统要求. Cordova最新的Android包支持的是AndroidAPI-级别 23。 最近几年 cordova-android支持的Android API-级别可以在下面这个表中看到:

cordova-android 版本 支持的 Android API-级别
5.X.X 14 - 23
4.1.X 14 - 22
4.0.X 10 - 22
3.7.X 10 - 21

Java开发工具包(JDK)

安装Java Development Kit (JDK) 7或者最新的。

当在Windows上安装的时候需要根据JDK路径设置JAVA_HOME环境变量(参见设置环境变量)

Android SDK

安装Android Stand-alone SDK或者Android Studio。如果你计划开发一个新的Cordova Android插件或者使用Android平台原生的工具去运行和调试,那么就使用Android Studio吧。否则,Android Stand-alone SDK Tools就足够构建和部署Android应用程序了。

添加SDK包

在安装完Android SDK后,你需要安装任何你希望的目标API级别的SDK包。建议你安装cordova-android(参见上面)支持的最高级别的SDK包。

打开Android SDK Manager (例如,在终端上运行`android),并确保下面已经安装:

  1. 目标Android版本的Android Platform SDK
  2. Android SDK build-tools,版本19.1.0或者之上
  3. Android Support Repository (在”Extras”查找)

设置环境变量

为了使功能正常使用Cordova的CLI工具需要设置一些环境变量。CLI会尝试为你设置这些变量,但在某些情况下你需要手动设置。下面这些变量需要更新:

  1. 设置JAVA_HOME环境变量,指定为JDK安装路径
  2. 设置ANDROID_HOME环境变量,指定为Android SDK安装路径
  3. 同时也建议你添加Android SDK的toolsplatform-tools目录到你的PATH

Windows

这些步骤可能会因你安装的Windows版本而不同。在更改后,关闭并重新打开命令行提示符窗口,来看看他们的反应

  1. 点击桌面左下角的开始菜单
  2. 在搜索栏中,搜索环境变量并从出现的选项中选择编辑系统的环境变量
  3. 在出现的窗口中,点击环境变量按钮

创建一个新的环境变量:

  1. 点击新建… 并输入变量的名字和值

T设置你的PATH:

  1. 选择PATH变量并点击编辑

  2. 添加条目到PATH相关的位置。 例如(用你本地的Android SDK安装路径替代路径):

    C:\Development\android-sdk\platform-tools
    C:\Development\android-sdk\tools

添加插件

添加插件可以通过插件id和Git repo的url来添加:

cordova plugin add cordova-plugin-xyprogress //通过插件id
cordova plugin add https://github.com/cheerszhou/CordovaPulginForTest.git //通过Git url添加

添加完插件后, 在项目目录的下plugins/会显示你添加的插件,而且config.xml中也会注册这些插件。

cordova plugin rm cordova-plugin-xyprogress  // 插件删除

cordova plugin ls  // 列举安装得插件

构建和运行

在构建之前,你需要检查你的开发环境是否搭建好了?

cordova requirements

使用 Cordova build 构建所有平台,也可以指定构建平台:

cordova build android

使用 cordova run 来构建并运行所有平台,也可以使用下面带选项得命令:

  • 在Android平台上,名为Nexus_5_API_23_x86模拟器上运行的当前cordova项目的发布版本. 运行时使用特定构建配置:
cordova run android --release --buildConfig=..\myBuildConfig.json --target=Nexus_5_API_23_x86
  • 使用真机或模拟器(如果没有连接设备)在Android平台上运行当前cordova项目的调试版本. 跳过构建:
cordova run android --nobuild
  • 在ios设备上运行当前cordova项目的调试版本:
cordova run ios --device
  • 枚举可用于运行此应用程序的所有连接设备和可用模拟器的名称:
cordova run ios --list
  • 或者模拟器中运行:
cordova emulate ios
//指定模拟器使用的模拟设备:
cordova emulate ios --target iPhone-6s
cordova emulate ios --target iPhone-6s-Plus

调式和测试

由于app安装在安卓设备里,无法像浏览器一样使用控制台进行输出调试。但是可以使用谷歌的手机调式:

点击这个链接进入谷歌界面,手机USB连接你的电话,要打开USB调式模式,使用运行或者打包就可以在这个界面看到我们的设备,并显示要调式的app,这样就可以查看控制台进行调试了!

0%