cordova入门

发表于 更新于 分类于

什么是 Cordova

  • 一个移动应用开发框架
  • 本质是在 html，css，js 外面包装个原生的壳
  • 出自于 Adobe 11 年收购的 PhoneGap,是驱动 PhoneGap 的核心引擎
  • 是 apache 的顶级开源项目

Cordova 提供了一系列设备相关的 API, 通过这组 API，移动应用能够以 JavaScript 访问原生的设备功能， 如摄像麦克风等。

常见的移动端开发的三大分类

  1. 原生 App
  2. web App
  3. 混合 App (Hybrid App)

cordova 的优缺点

  • 优点：跨平台，便于移植，开发快速，成本低
  • 缺点：执行速度相对原生会慢一些，一次编写，要处处调试

预装环境

下载并安装 Node.js

在安装时，您应该能够在命令行上调用节点和 npm。

nodejs 的安装

nodejs 官网：http://nodejs.cn/download/
查看版本：

1
node -v

安装 Cordova CLI，下载并安装 Cordova 全局模块

1
npm install -g cordova

查看版本：

1
cordova -v

安装 Java JDK

下载地址：https://www.oracle.com/java/technologies/javase-jdk14-downloads.html

查看版本：

1
2
java -version
javac -version

创建第一个 APP

创建 App

1
cordova create [projectName] [packageName]
1
2
3
4
5
eg: cordova create hello com.example.hello HelloWorld

hello：cordova目录名
com.example.hello： 包名
HelloWorld： 项目名（在config.xml中查看）

进入项目

1
cd hello

添加平台

给你的 App 添加目标平台

1
2
3
cordova platform add ios --save
cordova platform add android --save
cordova platform add browser --save

检查你当前平台设置状况

1
cordova platform ls
1
2
3
4
5
6
7
8
Installed platforms:
  android 8.1.0
  ios 5.1.1
Available platforms:
  browser ^6.0.0
  electron ^1.0.0
  osx ^5.0.0
  windows ^7.0.0

移除 android 平台

1
cordova platform rm android

检查打包条件

1
cordova requirements

编译 App，打包 app

1
cordova build android

测试 App，打包 cordova 项目到 Android/iOS 平台

1
cordova run android
1
2
3
Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio

安装 gradle

点击下载 gradle：https://gradle.org/releases/
配置环境变量：系统变量–Path–编辑

1
gradle -v

指定模拟器

1
2
cordova emulate ios --target='iPhone-11'
cordova emulate ios --target iPhone-6s

cordova 应用启动流程

Html 页面加载流程

  1. 原生代码启动
  2. splashscreen
  3. load html
  4. 顺序执行 javascript => cordova.js 也执行
  5. $(document).ready()执行，cordova 中的事件不一定可用 6.注册 deviceready 事件

插件

添加插件

1
cordova plugin add [plugin-full-name]

删除插件

1
cordova plugin rm [plugin-full-name]

查看已添加的插件

1
cordova plugin ls

插件列表

插件描述
cordova plugin add cordova-plugin-device基本设备信息
cordova-plugin-device基本设备信息
cordova-plugin-network-information网络连接信息
cordova-plugin-battery-status电池状态信息
cordova-plugin-device-motion加速度信息
cordova-plugin-device-orientation指南针信息
cordova-plugin-geolocation定位数据
cordova-plugin-camera相机
cordova-plugin-media-capture媒体捕获
cordova-plugin-media媒体播放器
cordova-plugin-file访问文件
cordova-plugin-file-transfer文件传递
cordova-plugin-dialogs消息提示对话框
cordova-plugin-vibration振动提醒
cordova-plugin-contacts联系人
cordova-plugin-globalization全球化
cordova-plugin-splashscreen闪屏(启动画面)
cordova-plugin-inappbrower浏览器
cordova-plugin-console控制台
cordova-plugin-statusbar状态栏

手机电池状态

该插件可以用于监视设备电池的变化，全局提供了三个事件

安装电池插件

1
cordova plugin add cordova-plugin-battery-status

添加事件监听

1
2
3
4
5
document.addEventListener("deviceready", function () {
  window.addEventListener("batterystatus", onBatterystatus, false);
  window.addEventListener("batterycritical", onBatterycritical, false);
  window.addEventListener("batterylow", onBatterylow, false);
});

回调函数性

事件状态
batterystatus表示电池状态发生改变（至少 1%电量变化） 或者 充电状态改变 触发
batterycritical表示电池电量进入临界值，快关机了
batterylow表示电池电量比较低，触发
1
2
3
4
5
6
7
8
9
10
11
function onBatterystatus(status) {
  log("当前电量：Level: " + status.level + "是否充电中：isPlugged: " + status.isPlugged);
}

function onBatterycritical(status) {
  log("当前电量已经进入临界值，当前电量：Level: " + status.level + "是否充电中： isPlugged: " + status.isPlugged);
}

function onBatterylow(status) {
  log("当前电量已经比较低了，当前电量：Level: " + status.level + " isPlugged: " + status.isPlugged);
}

每个事件都会返回一个 status 对象，有两个属性

  • level: 当前电量的百分比值，范围(0-100). (Number 数值类型)
  • isPlugged: 标记当前手机是否在充电 (Boolean 类型)

照相机

该插件提供了一个全局对象 navigator.camera，提供了一系列的 api，这些 api，可以帮助我们拍照，或者从相册中读取图片

注意：需要在 deviceready 完成后，才能获取 navigator.camera 对象

安装照相机插件

1
cordova plugin add cordova-plugin-camera

添加事件监听

1
2
3
4
5
document.addEventListener("deviceready", function () {
  window.addEventListener("batterystatus", function () {
    console.log(navigator.camera);
  });
});

在 navigator.camera 对象中，提供了一个方法，getPicture(success, error, options);
getPicture 可以用于拍照 或者 从相册中读取图片

  1. quality：表示图片质量
  2. destinationType：表示返回的图片格式（路径/base64 格式的字符串）
    默认值：FILE_URL 返回文件路径
  3. sourceType：设置使用摄像头还是从相册读取

常用参数说明

Camera.DestinationType

参数名描述
DATA_URL返回 base64 编码的字符串。DATA URL 可能占用大量内存，并导致应用程序崩溃或内存不足错误。尽可能使用 FILE URI 或 NATIVE_URI
FILE_URI返回文件 uri（适用于 Android 的 content：//media/external/images/media /2）
NATIVE_URI返回本地 uri（例如，iOS 的 asset-library：//…）

Camera.PictureSourceType

参数名描述
CAMERA从图片库中选择图片（与 Android 的 SAVEDPHOTOALBUM 相同）
PHOTOLIBRARY配置图片源为相册
SAVEDPHOTOALBUM从图片库中选择图像（与 Android 的 PHOTOLIBRARY 相同）（配置相机拍照保存的照片为相册）

Camera.Direction

参数名描述
BACK使用后置摄像头
FRONT使用前置摄像头

示例

拍照–返回图片 url

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<button id="btn1">点击拍照--返回图片url</button>
<img style="display: block; max-width: 100%;" alt="" />
<script>
  var img = document.querySelector("img");
  document.addEventListener("deviceready", function () {
    document.getElementById("btn1").addEventListener("click", function () {
      navigator.camera.getPicture(success, error, {
        quality: 50, // 表示图片的质量，默认值50  范围 0-100
        destinationType: Camera.DestinationType.FILE_URL, // 表示显示时，返回图片url
        sourceType: Camera.PictureSourceType.CAMERA // 默认值表示通过相机进行拍照
      });
      function success(fileUrl) {
        // 默认success返回的是文件路径
        img.src = fileUrl;
        log("拍照成功");
      }
      function error() {
        log("拍照失败");
      }
    });
  });
</script>

拍照–返回 base64 编码的字符串

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<button id="btn2">点击拍照--返回base64编码的字符串</button>
<img style="display: block; max-width: 100%;" alt="" />

<script>
  var img = document.querySelector("img");

  document.addEventListener("deviceready", function () {
    document.getElementById("btn2").addEventListener("click", function () {
      navigator.camera.getPicture(success, error, {
        quality: 50, // 表示图片的质量，默认值50  范围 0-100
        destinationType: Camera.DestinationType.DATA_URL, // 表示显示时，返回base64编码的字符串
        sourceType: Camera.PictureSourceType.CAMERA // 默认值表示通过相机进行拍照
      });
      function success(base64Str) {
        // 默认读取的base64编码后的图片，是没有前面的格式说明的
        img.src = "data:image/jpeg;base64," + base64Str;
        log("拍照成功");
      }
      function error() {
        log("拍照失败");
      }
    });
  });
</script>

从相册中获取图片，并显示在页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<button id="btn3">从相册中获取图片</button>
<img style="display: block; max-width: 100%;" alt="" />

<script>
  var img = document.querySelector("img");
  document.addEventListener("deviceready", function () {
    document.getElementById("btn2").addEventListener("click", function () {
      navigator.camera.getPicture(success, error, {
        quality: 50, // 表示图片的质量，默认值50  范围 0-100
        destinationType: Camera.DestinationType.FILE_URL, // 表示显示时，返回图片路径
        sourceType: Camera.PictureSourceType.PHOTOLIBRARY // 配置图片源为相册
      });
      function success(fileurl) {
        // 默认读取的base64编码后的图片，是没有前面的格式说明的
        img.src = fileurl;
        log("从相册中读取成功");
      }
      function error() {
        log("从相册中读取失败");
      }
    });
  });
</script>

震动插件

该插件符合 W3C 振动规范http://www.w3.org/TR/vibration/

该插件提供了一种振动设备的方法。

该插件定义了包括的全局对象 navigator.vibrate。

尽管是全局的方法，但直到 deviceready 事件发生后才可用。

安装震动插件

1
cordova plugin add cordova-plugin-vibration

添加事件监听

navigator.vibrate 有两种调用方式

  1. navigator.vibrate(3000); 表示震动一次，震动 3s
  2. navigator.vibrate([3000, 1000, 3000, 1000]); 表示震动 3s，停顿 1s，再震动 3s，再停 1s
1
2
3
4
5
6
7
8
9
<button id="vibrate1">点击震动3s</button>

<script>
  document.addEventListener("deviceready", function () {
    document.getElementById("vibrate1").addEventListener("click", function () {
      navigator.vibrate(3000);
    });
  });
</script>
1
2
3
4
5
6
7
8
<button id="vibrate2">表示震动3s，停顿1s，再震动3s，再停1s</button>
<script>
  document.addEventListener("deviceready", function () {
    document.getElementById("vibrate2").addEventListener("click", function () {
      navigator.vibrate([3000, 1000, 3000, 1000]);
    });
  });
</script>

停止震动

让震动停止，给方法传 0 即可

  1. navigator.vibrate(0);
  2. navigator.vibrate([]);
1
2
3
4
5
6
7
8
<button id="stopVibrate">停止震动</button>
<script>
  document.addEventListener("deviceready", function () {
    document.getElementById("stopVibrate").addEventListener("click", function () {
      navigator.vibrate(0);
    });
  });
</script>

使用 plugman 开发 Cordova 插件

首先安装 plumam 命令行工具

1
npm install -g plugman

安装完之后，创建 plugin

1
plugman create --name pluginName --plugin_id pluginID --plugin_version version [--path path] [--variable NAME=VALUE]

参数说明

参数描述
pluginName插件名称，如 MyToast；
pluginID插件 id, 如:cordova-plugin-mytoast；
version版本号, 如:0.0.1；
path插件存放的绝对或相对路径；
variable NAME=VALUE扩展参数，如说明或作者，如 woodstream
1
eg: plugman create --name MyToast --plugin_id cordova-plugin-mytoast --plugin_version 0.0.1

从签名到发布流程

尽量不使用命令行发布，与 app 端沟通后完善
使用 ==android studio== 可以快捷生成签名文件

命令行生成 keystore

cmd 进入项目里面

1
cd hello

运行命令

1
cordova build --release android

会在 hello\platforms\android\build\outputs\apk 目录下生成一个 android-release-unsigned.apk(这是一个测试版本，要是想测试，无需下面步骤，可直接安装手机测试即可)

1
2
3
4
5
6
What went wrong:
Execution failed for task ':app:lintVitalRelease'.
> Could not resolve all files for configuration ':app:lintClassPath'.
   > Could not download groovy-all.jar (org.codehaus.groovy:groovy-all:2.4.15)
      > Could not get resource 'https://jcenter.bintray.com/org/codehaus/groovy/groovy-all/2.4.15/groovy-all-2.4.15.jar'.
         > Read timed out

解决方法：

1
2
3
4
5
6
7
进入目录：[path]\hello\platforms\android\app\build.gradle
Android {
    lintOptions {
      checkReleaseBuilds false
      abortOnError false
    }
}