Cordova on Win7

时间  2021-01-06 标签 物联网 跨平台开发 Cordova

陈拓 [email protected] 2019.11.18/2019.11.21

0. 概述

官方网址：https://cordova.apache.org/

中文网址：http://cordova.axuer.com/

Apache Cordova是一个开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。 也就是说Android、iOS、Windows以及其他的移动操作系统可以共用一套代码。

https://images0.cnblogs.com/blog/136197/201508/040914044235574.png

利用Cordova API，移动应用能够通过JavaScript访问摄像头、麦克风和传感器等设备。

1. 快速上手

https://cordova.apache.org/#getstarted

1.0 安装NodeJS和npm

  • nodejs下载

https://nodejs.org/en/

node-v12.13.0-x86.msi

  • nodejs安装

双击下载的node-v12.13.0-x86.msi，可自定义安装路径，安装模块部分直接next即可安装。默认安装在C:\Program Files\nodejs

  • 检查安装版本

win+R输入cmd，打开命令行

C:\>cd C:\Program Files\nodejs

输入node -v返回版本号即安装成功

C:\Program Files\nodejs>node -v

v12.13.0

输入npm -v返回版本号即安装成功

C:\Program Files\nodejs>npm -v

6.12.0

1.1 安装Cordova

Cordova命令行在Node.js上运行，并且在NPM上可用。请遵循特定于平台的指南来安装其他平台依赖项。打开命令提示符或终端，然后键入npm install -g cordova。

或npm i -g cordova

测试：

C:\Users\Administrator>cordova -v

9.0.0 ([email protected])

1.2 创建项目

使用命令行工具创建一个空白的Cordova项目。

  • 先导航到要创建项目的目录

E:\gateway

  • 然后键入cordova create <path>

例如，E:\gateway>cordova create cordovaTest

Creating a new cordova project.

  • 要看完整的选项集，请键入cordova help create。

1.3 添加平台

  • 创建Cordova项目后，进入项目目录

E:\gateway>cd cordovaTest

  • 在项目目录中，您需要添加一个要为其构建应用程序的平台，键入cordova platform add <platform name>

例如我们要为浏览器构建一个应用程序，可以键入：

E:\gateway\cordovaTest>cordova platform add browser

在platforms目录中生成browser目录：

  • 要获取完整的平台列表，请运行cordova platform。

E:\gateway\cordovaTest>cordova platform

Installed platforms:

  browser 6.0.0

Available platforms:

  android ^8.0.0

  electron ^1.0.0

  ios ^5.0.0

  osx ^5.0.0

  windows ^7.0.0

1.4 运行app

在命令行中，运行cordova run <platform name>。

我们的例子就是：cordova run browser

1.5 常见的后续步骤

  • 阅读文档
  • 添加插件
  • 自定义应用程序图标
  • 配置您的应用

2. Android平台指南

https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html

本指南说明如何设置SDK环境来为Android设备部署Cordova应用程序，以及如何在开发工作流程中有选择地使用以Android为中心的命令行工具。无论您是要使用这些以平台为中心的Shell工具还是跨平台的Cordova CLI进行开发，都需要安装Android SDK。有关两种开发路径的比较，请参见 概述。
（https://cordova.apache.org/docs/en/latest/guide/overview/index.html#development-paths）

有关CLI的详细信息，请参阅《Cordova CLI参考》。

（https://cordova.apache.org/docs/en/latest/reference/cordova-cli/index.html）

2.1 要求和支持

适用于Android的Cordova需要使用可在OS X、Linux或Windows上安装的Android SDK。请参阅Android SDK的 系统要求。Cordova最新的Android包最多支持到Android API级别 28。过去几年发行的Cordova -Android支持的Android API级别和Android版本可以在这个表中找到：

请注意，此处列出的版本适用于Cordova的Android软件包 cordova-android，而不适用于Cordova CLI。要确定Cordova项目中安装了哪个版本的Cordova Android软件包，请在项目的目录中运行命令cordova platform ls。

通常，Cordova不支持的Android版本在Google的发布信息中心上降至5％以下。

2.2 安装需求

2.2.1 Java开发套件（JDK）

安装Java开发工具包Java Development Kit (JDK) 8。

https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

我是32位的win 7，选择：

Windows x86   200.22 MB     jdk-8u231-windows-i586.exe

我安装在D:盘下面：D:\Program Files\Java\jdk1.8.0_231

配置环境变量：

  • JAVA_HOME：用鼠标右击桌面“我的电脑”，选择“属性”>“高级”>“环境变量”>“系统变量”>“新建”。如下配置，确定。

  • 在PATH系统变量中加上%JAVA_HOME%\bin;
  • 测试：JDK的环境变量配置完成后可以打开命令提示符窗口，输入命令“java -version”和“javac -version”，通过查看Java版本的信息来确定安装是否成功。

C:\Users\Administrator>java -version

java version "1.8.0_231"

Java(TM) SE Runtime Environment (build 1.8.0_231-b11)

Java HotSpot(TM) Client VM (build 25.231-b11, mixed mode, sharing)

 

C:\Users\Administrator>javac -version

javac 1.8.0_231

 

C:\Users\Administrator>

2.2.2 Gradle

从Cordova-Android 6.4.0开始需要安装Gradle才能构建Android。

https://gradle.org/install/

手动安装

步骤1. 下载最新的Gradle发行版

https://gradle.org/releases/

当前的Gradle版本是6.0.1版，于2019年11月18日发布。发行版zip文件有两种版本：

  • 仅二进制
  • 完整，提供文件和资料

如有疑问，请选择仅二进制版本并在线浏览文档和资源。

下载二进制版本binary-only：gradle-6.0.1-bin.zip

步骤2. 解压缩

Windows用户

创建一个新目录C:\Gradle

将gradle-6.0.1解压到C:\Gradle

步骤3. 配置您的系统环境

开始 -> 控制面板 -> 系统 -> 高级系统设置 -> 环境变量：

在系统变量中选择Path，然后单击编辑。

为添加一个条目C:\Gradle\gradle-6.0.1\bin。单击确定保存。

步骤4. 验证安装

重新打开一个cmd：

C:\Users\Administrator>gradle -v

Welcome to Gradle 6.0.1!

2.2.3安装Android Studio 和Android SDK

  • 下载Android Studio

请按照链接的Android Developer网站上的说明进行操作。

https://developer.android.google.cn/studio/

选择Windows (32-bit) android-studio-ide-191.5977832-windows32.zip

  • 解压

我解压到D:\android-studio

  • 运行

在D:\android-studio\bin目录中双击studio.exe

https://img-blog.csdn.net/20160726114025710?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

点击Cancel，以后再进行SDK相关的下载。

  • 进入Welcome页面
  • 点击Next进入Install Type页面

选择Standard

  • 点击Next进入Select UI Theme页面

选择UI主题，使用默认的Light，白底黑字

  • 点击Next进入Verify Settings页面

检查设置

  • Finish，开始下载组件

  • Finish，进入android studio

  • Configure

选择SDK Manager

查看已经安装的SDK平台。

查看已经安装的SDK工具。

  • 点击Cancel

2.3 做个练习体验一下

http://www.noobyard.com/article/p-zztvwkwp-et.html

2.3.1 创建App

E:\nrfCloud>cordova create hello com.example.hello HelloWorld

Creating a new cordova project.

让我们来一起剖析下 cordova create 到底做了些什么？根据官方描述该命令支持四个参数：

1) path：这里是hello，也就是项目的目录名称

2) ID：项目的ID，用于写入config.xml的widget中，通常格式为 com.example.hello

3) name：应用程序的显示名称，这里是HelloWorld

4) options：项目的可选配置项

--template：可执行项目的模版文件

--copy-from 指定src

--link-to 可将一个前端资源目录链接到项目的www目录下而不是一个副本

通过部分 Cordova cli 源码我们可以大致知道Cordova是如何帮我们创建一个初始化工程的……（看原文）

项目创建成功之后我们将得到如下目录结构：

2019/11/21  11:05               984 config.xml  项目配置文件

2019/11/21  11:05    <DIR>          hooks          存放Cordovr的钩子，即自定义cordova命令的脚本

2019/11/21  11:05               419 package.json

2019/11/21  11:05    <DIR>          www         存放html前端页面的源码

2019/11/21  11:05    <DIR>          platforms      存放各个平台编译后的文件，注意每次build都会覆盖修改该目录下文件

2019/11/21  11:05    <DIR>          plugins     插件目录

可能还有：

Res 存放一些各平台的icon或者首屏图等资源

查看目录结构：

E:\nrfCloud\hello>tree

2.3.2 添加 Android 平台及插件

初始化项目有了，接下来就是添加我们需要支持的平台了，例如：Android 、 iOS 这里以 Android 为例。

# 切换到项目目录下

E:\nrfCloud>cd hello

# 添加Android平台

E:\nrfCloud\hello>cordova platform add android --save

在platforms目录中生成browser目录：

查看：

E:\nrfCloud\hello>cordova platform

Installed platforms:

  android 8.1.0

Available platforms:

  browser ^6.0.0

  electron ^1.0.0

  ios ^5.0.0

  osx ^5.0.0

  windows ^7.0.0

进入android目录下，可以看到很多.java文件，而ios目录下是很多的object-c文件，browser目录下则是熟悉的web工程。

并且可以看到，每个平台下都有一个cordova目录，初步猜想，这应该是负责和不同平台通讯交互的cordova核心。

# 添加摄像头插件

E:\nrfCloud\hello>cordova plugin add cordova-plugin-camera

Installing "cordova-plugin-camera" for android

Subproject Path: CordovaLib

Subproject Path: app

Adding cordova-plugin-camera to package.json

cordova platform add、cordova plugin add 原理其实和cordova create 都差不多，cordova cli 的模板文件夹如下：感兴趣的读者可以深究下！

我们可以检查相关环境是否安装正常。

E:\nrfCloud\hello>cordova requirements

需要安装：API level android-28

根据提示：

可以通过运行

C:\Users\Administrator\AppData\Local\Android\Sdk\tools\android.bat

打开SDK 管理器。

我已经安装了Android Studio

下拉Configure->SDK Manager

需要安装：

  1. "SDK Platform" for API level android-28
  2.  "Android SDK Platform-tools (latest)
  3.  "Android SDK Build-tools" (latest)

再检查：

2.3.3 用Cordova 编译打包 Android APP 生成APK安装包

现在我们就可以用Cordova编译android的APK安装包了。

虽然Cordova 官网说明了Cordova在编译android的时候用的是Gradle，但是Cordova cli 都帮我们处理，编译一个debug版本的APK安装包只需要执行如下：

#编译一个可调试的安装包(第一次编译用时较长务必耐心等待)：

C:\Users\Administrator>cd E:\nrfCloud\hello

C:\Users\Administrator>e:

E:\nrfCloud\hello>cordova build android

 

Checking Java JDK and Android SDK versions

ANDROID_SDK_ROOT=undefined (recommended setting)

配置环境变量：

用鼠标右击桌面“我的电脑”，选择“属性”>“高级”>“环境变量”>“系统变量”>“Path”>“编辑”

将相关位置的条目添加到PATH中。

C:\Users\Administrator\AppData\Local\Android\Sdk\platform-tools

C:\Users\Administrator\AppData\Local\Android\Sdk\tools

 

关闭当前的命令行窗口，新打开一个cmd窗口再试：

E:\nrfCloud\hello>cordova build android

错误依旧！

新增一项系统变量ANDROID_SDK_ROOT，变量值与ANDROID_HOME一样

关闭当前的命令行窗口，新打开一个cmd窗口再试：

E:\nrfCloud\hello>cordova build android

 

Checking Java JDK and Android SDK versions

ANDROID_SDK_ROOT=C:\Users\Administrator\AppData\Local\Android\Sdk (recommended setting)

ANDROID_HOME=C:\Users\Administrator\AppData\Local\Android\Sdk (DEPRECATED)

Starting a Gradle Daemon (subsequent builds will be faster)

 

FAILURE: Build failed with an exception.

 

* What went wrong:

Unable to start the daemon process.

This problem might be caused by incorrect configuration of the daemon.

For example, an unrecognized jvm option is used.

Please refer to the User Manual chapter on the daemon at https://docs.gradle.org/6.0.1/userguide/gradle_daemon.html

Process command line: D:\Program Files\Java\jdk1.8.0_231\bin\java.exe -Xmx2048m

-Dfile.encoding=GBK -Duser.country=CN -Duser.language=zh -Duser.variant -cp C:\Gradle\gradle-6.0.1\lib\gradle-launcher-6.0.1.jar org.gradle.launcher.daemon.boot

strap.GradleDaemon 6.0.1

Please read the following process output to find out more:

-----------------------

Error occurred during initialization of VM

Could not reserve enough space for 2097152KB object heap

系统内存不够用，创建VM失败。查询网上的解决办法：

https://blog.csdn.net/u012426959/article/details/78566221

开始->控制面板->系统->高级设置->环境变量->系统变量

新建变量：

变量名: _JAVA_OPTIONS  

变量值: -Xmx512M

关闭当前的命令行窗口，新打开一个cmd窗口再试：

E:\nrfCloud\hello>cordova build android

耐心等待几分钟！

……

BUILD SUCCESSFUL in 5m 48s

42 actionable tasks: 42 executed

Built the following apk(s):

        E:\nrfCloud\hello\platforms\android\app\build\outputs\apk\debug\app-debug.apk

成功了！欧耶！

#编译一个release版本的APK安装包：

E:\nrfCloud\hello>cordova build android --release

……

BUILD SUCCESSFUL in 1m 23s

42 actionable tasks: 40 executed, 2 up-to-date

Built the following apk(s):

        E:\nrfCloud\hello\platforms\android\app\build\outputs\apk\release\app-release-unsigned.apk

成功！

2.3.4 运行app

E:\nrfCloud\hello>cordova run android

…….

No target specified and no devices found, deploying to emulator

No emulator images (avds) found.

1. Download desired System Image by running: "C:\Users\Administrator\AppData\Local\Android\Sdk\tools\android.bat" sdk

2. Create an AVD by running: "C:\Users\Administrator\AppData\Local\Android\Sdk\tools\android.bat" avd

HINT: For a faster emulator, use an Intel System Image and install the HAXM device driver

 

在下载好的sdk里面有一个/home/app/Android/Sdk/platform-tools 文件夹 里面有adb命令

可以把adb添加到环境变量里面，就可以直接使用了

 

另外，要将手机连用有数据功能的USB线接到PC，并且打开开发者选项，允许USB调试。

 

荣耀手机打开开发者选项，允许USB调试：

设置 > 系统 > 关于手机 >

找到关于手机界面中的【版本号】那一项连续点击七次

显示：您正处于开发者模式

返回，就可以看到开发者选项，我们点击进入。

打开USB调试。

用命令查看已经连接的设备：

E:\nrfCloud\hello>adb devices

List of devices attached

在Windows中查看设备管理器：

点击扫描检查硬件改动，自动安装相关驱动。

驱动装上了：

查看adb设备：

C:\Users\Administrator>adb devices

List of devices attached

JJR7N17320001276        device

再次尝试：

E:\nrfCloud\hello>cordova run android

……

Using apk: E:\nrfCloud\hello\platforms\android\app\build\outputs\apk\debug\app-d

ebug.apk

Package name: com.example.hello

LAUNCH SUCCESS

 

已经可以看到界面了。

2.4 插件Dialog的使用

我们来试试调用一些原生API，比如调用原生Dialog， 调用相机等。我们先试下Dialog。

首先需要插件：

E:\nrfCloud\hello>cordova plugin add cordova-plugin-dialogs

Installing "cordova-plugin-dialogs" for android

Adding cordova-plugin-dialogs to package.json

修改下面的index.js文件

我用EditPlus修改。

在deviceready事件之后调用Dialog

找到：

onDeviceReady: function() {

        this.receivedEvent('deviceready');

},

修改后的index.js

var app = {

    // Application Constructor

    initialize: function() {

        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);

    },

 

    // deviceready Event Handler

    //

    // Bind any cordova events here. Common events are:

    // 'pause', 'resume', etc.

    onDeviceReady: function() {

        //this.receivedEvent('deviceready');

this.dialogComfirm();

    },

 

dialogComfirm: function(){

        var dom = document.getElementById('confirm');

        dom.onclick = function(){

            navigator.notification.confirm(

                '这是一个confirm弹窗!',      // 对话的消息

                onConfirm,                    // 回调函数

                '提示',                        // 标题

                ['确认','取消']                // 按钮文字

            );

        }

        function onConfirm(buttonIndex){

            console.log("你选择的按钮是："+ buttonIndex);

        }

    }

 

    // Update DOM on a Received Event

    receivedEvent: function(id) {

        var parentElement = document.getElementById(id);

        var listeningElement = parentElement.querySelector('.listening');

        var receivedElement = parentElement.querySelector('.received');

 

        listeningElement.setAttribute('style', 'display:none;');

        receivedElement.setAttribute('style', 'display:block;');

 

        console.log('Received Event: ' + id);

    }

};

 

app.initialize();

 

修改www下面的index.html文件

<!DOCTYPE html>

<html>

    <head>

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

        <meta name="format-detection" content="telephone=no">

        <meta name="msapplication-tap-highlight" content="no">

        <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">

        <link rel="stylesheet" type="text/css" href="css/index.css">

        <title>Hello World</title>

    </head>

    <body>

        <div class="app">

            <h1>Apache Cordova</h1>

            <div id="deviceready" class="blink">

                <p class="event listening">Connecting to Device</p>

                <p class="event received">Device is Ready</p>

            </div>

<h1>Dialog插件</h1>

            <ul id="ready">

                <li><button id="confirm">confirm</button></li>

            </ul>

        </div>

        <script type="text/javascript" src="cordova.js"></script>

        <script type="text/javascript" src="js/index.js"></script>

    </body>

</html>

 

运行前看看设备是否在线：

E:\nrfCloud\hello>adb devices

List of devices attached

JJR7N17320001276        offline     离线

打开手机再试：

E:\nrfCloud\hello>adb devices

List of devices attached

JJR7N17320001276        device   在线

运行：

E:\nrfCloud\hello>cordova run android

手机显示：

3. IDE开发环境

微软的Visual Studio 2015中已经集成了Cordova开发的相关工具Visual Studio Tools for Apache Cordova，可以很方便的开发Android, iOS以及Windows Phone的应用。但Visual Studio 2015需要在 Windows 10 中安装，我们的win7就安装不了了。

 

参考资料

  1. Hybrid APP混合开发的一些经验和总结
    http://www.noobyard.com/article/p-qacyuwlw-gh.html
  2. cordova-plugin-dialogs 使用详解
    https://www.jianshu.com/p/7d1e1872eb42
  3. cordova-plugin-dialogs
    https://github.com/apache/cordova-plugin-dialogs
  4. cordova-plugin-dialogs
    https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-dialogs/index.html
联系我们 沪ICP备2021010478号-7