科尔多瓦简介：示例

最新推荐文章于 2024-09-15 19:46:31 发布

cunjie3951

最新推荐文章于 2024-09-15 19:46:31 发布

阅读量384

点赞数

文章标签： java javascript vue python web ViewUI

在此Cordova简介的第一篇教程中，您了解了Cordova是什么，它在幕后如何工作，以及可以使用它构建什么类型的应用程序。在本教程中，您将继续实践部分，并通过构建您的第一个Cordova应用程序真正动手。

首先，我将向您展示如何安装使用Cordova启动和运行所需的一切。然后，您将构建一个利用两个插件，一个用户界面框架和Crosswalk Web视图的hello world应用程序。在本教程的最后，您将把应用程序部署到Android设备上。

1.安装依赖项

步骤1：Git

Git是一个版本控制系统。它用于拉出要添加到Cordova项目中的插件。要安装Git，请访问下载页面，然后为您的操作系统选择安装程序。

步骤2：Node.js

Node.js是由JavaScript驱动的Web应用程序的运行时环境。它带有一个名为Node Package Manager或npm的软件包管理器，开发人员可以使用它来分发工具和库。 Cordova及其插件使用npm分发，这就是我们需要安装它的原因。

如果您使用的是Windows或OS X，则可以使用其下载页面上提供的安装程序来安装Node.js。如果您使用Ubuntu或其他Linux发行版，则可以使用操作系统随附的软件包管理器来安装node。对于Ubuntu，可以使用以下命令安装Node.js：

sudo apt-get install python-software-properties python g++ make
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs

步骤3：Java

我们需要安装的下一个组件是Java。我们需要Java，因为我们会将hello world应用程序部署到Android设备。本机Android应用程序是用Java编写的，这就是为什么我们需要安装Java。

要安装Java，请访问Java下载页面，然后单击“ 免费Java下载”按钮以显示适用于您的操作系统的安装程序列表。下载适用于您的操作系统的安装程序并安装Java。

步骤4：Android SDK

由于我们要将应用程序部署到Android设备，因此我们需要安装适用于Android的软件开发套件（SDK）。访问Android Studio和SDK工具，然后在“ 仅SK工具”下 ，为您的操作系统下载相应的软件包。

对于Windows，已经有一个安装程序，您可以用来选择要安装的软件包。对于OS X和Linux，您必须解压缩存档。解压缩后，打开位于主目录中的.bashrc文件，然后将路径添加到Android SDK和SDK工具：

export ANDROID_HOME=/media/wern/Files/downloads/android-sdk-linux/sdk
PATH=$PATH:/media/wern/Files/downloads/android-sdk-linux/sdk/tools
export PATH

将/media/wern/Files/downloads/替换为计算机上Android SDK的实际路径。然后，您可以使用source命令重新加载.bashrc文件：

source ~/.bashrc

这样做可以让您从命令行执行android命令，启动Android SDK Manager。这使您可以选择要在计算机上安装的软件包。科尔多瓦只需要以下软件包：

Android SDK工具
Android SDK平台工具
最新的Android API的SDK平台
适用于最新Android API的Android SDK构建工具（撰写本文时为Android 6.0）

选择以上软件包后，它在您的计算机上应如下所示：

单击安装按钮以开始安装过程。这将打开一个窗口，要求您确认要安装的软件包。单击接受许可证单选按钮进行确认，然后单击安装按钮。这可能需要一段时间，具体取决于您的Internet连接。

步骤5：Cordova

在计算机上安装必要的依赖项之后，就可以安装Cordova了。从命令行执行以下命令：

sudo npm install -g cordova

-g选项告诉npm全局安装Cordova，这意味着您可以在任何地方使用Cordova命令行工具。

2.构建应用

现在，我们准备使用Cordova构建一个简单的hello world应用程序。我们将创建一个应用程序，使用户可以使用相机插件拍照并通过PhoneGap社交共享插件共享照片。最后，我们还将使用Crosswalk 。

要创建一个新的Cordova应用程序，请打开一个新的终端窗口并执行cordova create命令：

cordova create photosharer com.yourname.photosharer PhotoSharer

cordova create命令接受以下参数：

目录：这是将创建以包含您的应用程序文件的目录。
标识符：这是您为应用提供的标识符。通用的命名约定是反向域名表示法，suc为com.companyname.appname 。
title：这是您的应用程序的标题。

命令执行完毕后，您将看到一个photosharer以下内容的photosharer文件夹：

钩子：钩子是您在使用Cordova构建应用程序时要在特定点执行的代码段。这个文件夹是您放置钩子的地方。由于我们不需要钩子，因此在本教程中将不再使用它们。现在，请记住，您可以使用挂钩执行特定的代码，这些代码可以在执行特定的cordova命令之前或之后处理，复制或删除文件。
平台：这是所有目标平台所需的文件的存储位置。平台的示例包括浏览器，Android，iOS和Windows Phone。
插件：这是您为应用安装的插件的存储位置。
www：此文件夹包含应用程序用户界面的源代码。您将在此文件夹中花费大部分时间。
config.xml：这是用于控制应用程序的基本方面和行为的配置文件。

既然您知道了Cordova应用程序中的每个文件夹的用途，现在是时候移动并开始构建该应用程序了。打开位于www目录中的index.html 。这是Cordova服务的默认页面。最好将Cordova应用程序编写为单页应用程序，这样，每次访问该应用程序中的页面时，用户就不会看到页面正在重新加载。单个页面应用程序无非是仅使用一个HTML页面的Web应用程序。然后，根据需要使用模板来注入应用程序的不同状态。

默认情况下， index.html包含以下代码：

<!DOCTYPE html>
   
   
        
   
   
        
   
   
        
   
   

         rel="stylesheet" type="text/css" href="css/index.css">
        Hello World
    
    
        
   
   
            
    
    Apache Cordova
            
    
    
                
     
     Connecting to Device
                
     
     Device is Ready

您可以看到没有什么特别的。这是一个简单HTML文件。唯一不同的是meta标签。让我带您了解其中的一些。

第一个meta标记指定内容安全策略。这使Cordova应用程序免受跨站点脚本（XSS）攻击的侵害。攻击者设法将任何脚本注入到页面中，都将拒绝使用该meta标签进行加载。

format-detection meta标记会自动将电话号码转换为链接。然后，用户可以单击链接以拨打该电话号码。

msapplication-tap-highlight meta标记禁用Windows Phone 8和更高版本上的灰色水龙头突出显示。如果您不打算在Windows Phone设备上进行部署，则可以安全地删除此标签。

下一个标签是viewport meta标签。让我们从左到右浏览该标签的属性。标签首先指定用户不应放大或缩小页面。接下来，将initial-scale设置为1。这意味着将以100％的比例加载内容。 maximum-scale和minimum-scale均设置为1。这将设置用户可以为缩放级别设置的最小值和最大值。 width属性指定最大设备宽度用于内容。

接下来是默认样式表。此样式表包含应用程序的基本样式。

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

body标签内有用于显示Cordova状态的标记。当设备API尚未完全加载时，将显示带有listening类的p元素。当设备API准备就绪时，它是隐藏的。此时，将显示其下方的p元素。此标记特定于默认的Cordova应用程序，因此我们以后可以安全地将其删除。


   
   
    
    
    Apache Cordova
    
    
    
        
     
     Connecting to Device
        
     
     Device is Ready

然后，我们遇到两个script标签。第一个包括cordova.js 。该文件提供了用于访问本机设备功能的统一API。您不会在www目录下找到此文件，因为在构建应用程序时会将其注入到特定平台。这意味着根据应用程序运行的平台，存在不同版本的cordova.js 。

第二个script标签包括index.js 。该文件特定于启动新的Cordova项目时创建的默认应用程序。它所做的就是在发生特定事件时执行特定代码。

如果打开文件，您会注意到， receivedEvent函数负责隐藏和显示我们前面遇到的两个p元素。它是由onDeviceReady事件触发的。所以这是传递给事件标识符receivedEvent功能deviceready 。

onDeviceReady: function() {
    app.receivedEvent('deviceready');
},

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);
        
}

您已经等待了足够长的时间。现在该弄脏你的手了。首先，通过使用Ratchet （用于构建移动Web应用程序的前端框架）确保一切看起来都不错。您可以从他们的主页下载它，或通过执行以下命令在Bower中安装它：

bower install ratchet

将文件复制到Cordova项目的www / lib目录，然后将样式表链接到index.html文件。

 rel="stylesheet" type="text/css" href="lib/ratchet/css/ratchet.min.css">

删除body标记内的默认标记：


   
   
    
    
    Apache Cordova
    
    
    
        
     
     Connecting to Device
        
     
     Device is Ready

并将其替换为以下内容：


   
   
  
    
    Hello Cordova

上面的标记添加了一个用于拍照的按钮。在它下面是用于共享照片的div标签。它具有用于输入标题的文本字段和用于共享的按钮。

获取jQuery的副本并将其保存到www / lib目录。

在www / js目录中创建一个events.js文件，并向其中添加以下代码：

(function(window){

    $('#take-picture').click(function(){

        var camerOptions = { 
            quality: 90,
            destinationType: Camera.DestinationType.FILE_URI,
            encodingType: Camera.EncodingType.JPEG,
            targetWidth: 200,
            targetHeight: 350
        };

        navigator.camera.getPicture(function(imageURI){

            var image = $('#photo');
            image.attr('src', imageURI);
            $('#share-container').show();
            
        }, function(errorMessage){
            alert('The following error occured: ' + errorMessage)
        }, camerOptions);

    });

    $('#share').click(function(){
        var photo_src = $('#photo').attr('src');
        var caption = $('#caption').val();
        window.plugins.socialsharing.share(caption, null, photo_src, null);
    });

})(window);

在jQuery的下面添加一个event.js的script标签。

让我们来看看到目前为止。我们首先将所有内容包装在立即调用的函数表达式中。这样，该脚本就不会与以后可能包含的其他脚本冲突。

(function(window){

})(window);

接下来，我们将click事件监听器添加到用于拍照的按钮。

$('#take-picture').click(function(){
    ...
});

里面是相机插件的选项。

var camerOptions = { 
    quality: 90,
    destinationType: Camera.DestinationType.FILE_URI,
    encodingType: Camera.EncodingType.JPEG,
    targetWidth: 200,
    targetHeight: 350
};

这是我们使用的每个选项的简要说明：

质量：此选项使我们可以指定要保存的照片质量，最高为100，最低为0。
destinationType：使用此选项，我们指定生成的照片的类型。它的值可以是DATA_URL ，该值返回base64编码的字符串，或者FILE_URI ，该值返回本地文件系统上文件的路径。
encodingType：此选项定义照片的编码方式。可能的值为JPEG和PNG 。
targetWidth：使用此选项可以指定照片的宽度。
targetHeight：使用此选项可以指定照片的高度。

接下来，我们有启动设备默认相机应用程序的代码。它具有两个回调函数。第一个是成功回调，当成功捕获照片时执行。图像的URL作为参数传递。然后将其用作img元素的src属性的值。如果发生错误，则执行第二个回调函数。如果出了什么问题，我们会显示一条警报，通知用户有关错误。

navigator.camera.getPicture(function(imageURI){

    var image = $('#photo');
    image.attr('src', imageURI);
    $('#share-container').show();
    
}, function(errorMessage){
    alert('The following error occured: ' + errorMessage)
}, camerOptions);

捕获照片后，将向用户显示#share-container div 。这包含我们向其添加点击事件的共享按钮。这使用社交共享插件。在下面的代码中，我们传递在标题文本字段中输入的值以及照片的文件路径。然后，社交共享插件将启动操作系统的默认共享窗口。此时，用户可以选择要在其中共享照片的应用程序。

$('#share').click(function(){
    var photo_src = $('#photo').attr('src');
    var caption = $('#caption').val();
    window.plugins.socialsharing.share(caption, null, photo_src, null);
});

3.安装插件

在上一节中，我们已经使用了两个插件，即照相机插件和社交共享插件。但是您可能已经注意到我们还没有安装它们。在本节中，我们将这样做。

如果您已经知道要安装的特定插件，则安装插件很简单。您要做的就是确定插件标识符。这通常是给GitHub存储库的名称或npm网站上的软件包名称。

相机插件的标识符是cordova-plugin-camera 。安装插件非常简单， cordova plugin add执行cordova plugin add命令并传入插件的标识符即可：

cordova plugin add cordova-plugin-camera

对于社交共享插件，由于不符合命名约定，因此有所不同：

cordova plugin add cordova-plugin-x-socialsharing

如果不确定要安装哪个插件，则只需将其谷歌搜索即可。您还可以使用Cordova插件网站搜索Cordova插件。在下面的屏幕截图中，我正在寻找一个社交共享插件。默认情况下，结果按质量排序。这意味着插件的排列方式从最酷到最不酷。我不太确定他们为此使用了什么指标。除此之外，您还可以过滤结果以仅显示支持特定平台的插件。它还具有不错的复制到剪贴板功能，允许您复制用于安装插件的命令。

关于安装插件的最后一点是，每次安装新插件时都必须构建应用程序。安装插件不会自动将其复制到您要部署到的不同平台上。

4.添加人行横道

Crosswalk是基于Chromium和Blink的Cordova应用程序的可插入Web视图。通过使用Crosswalk，可以替换Cordova使用的默认Web视图。这使您可以在应用程序中使用浏览器功能，例如WebRTC，WebAudio和Web组件。它还可以提高应用程序的性能。唯一已知的缺点是增加的内存占用量和安装程序文件的大小。

Crosswalk是作为插件分发的。您可以使用以下命令进行安装：

cordova plugin add cordova-plugin-crosswalk-webview

下次构建该应用程序时，它应为要部署到的平台安装Web视图。可能需要一段时间，具体取决于您的Internet连接。但是，只有在安装Crosswalk之后第一次构建应用程序时，才执行此操作。这是因为它必须从远程服务器下载所有必需的文件，然后执行编译。

在构建过程之后，它将为Android生成两个单独的apk文件，一个用于armv7体系结构，一个用于x86。 Crosswalk为这些体系结构中的每种体系结构制作了一个单独的打包文件，因为如果将apk文件打包为一个，则该文件会变得很大。幸运的是，Google的Play商店允许开发人员为同一应用上传不同版本的apk文件。

5.配置应用

如果要在某个时候更新应用程序的配置，则可以编辑位于项目根目录的config.xml 。缺省情况下，这是config.xml的样子：


   
   

   
   
    
    
    
     
     PhotoSharer
    
    
    
    
    
     
     
        An app that allows users to capture photos and share them using the default sharing application
    
    
    
    
    
    
     
     
        Wern Ancheta

您可以更新应用的标识符：

版本控制使用语义版本控制约定（major.minor.patch）：

更新name标签以更新您的应用程序的名称：


   
   
    
    PhotoSharer

或说明：


   
   
    
    
   A Cordova app for sharing photos.

您也可以指定打开应用程序时在Web视图中呈现HTML文件。

配置文件还定义了允许该应用访问的域。默认情况下，Cordova应用程序配置为允许访问所有（*）域。

不建议这样做。它使应用程序的安全性降低，因为它可以向可能包含恶意内容的外部域发出请求。这就是默认情况下安装白名单插件的原因。这使开发人员可以更好地控制应用程序中允许哪些域或意图（电话，地理，短信）。

有关应用程序配置的更多信息，请查阅config.xml文件的文档。

6.部署应用

在本部分中，我将引导您完成准备和部署Cordova应用程序到Google Play商店所涉及的步骤。

步骤1：添加平台

您需要做的第一件事是添加您要定位的平台。要列出您可以使用Cordova定位的平台，请执行cordova platform list命令。此命令列出了已安装的平台以及可用于发布的平台：

Installed platforms: android 4.0.0, browser 3.5.2
Available platforms: amazon-fireos, blackberry10, firefoxos, ubuntu

如您所见，我已经安装了两个平台， 浏览器和android 。您可以通过执行以下命令来执行相同的操作：

cordova platform add browser
cordova platform add android

浏览器平台主要用于在浏览器中测试您的应用。这是通过执行cordova serve命令完成的。此命令创建一个在特定端口上为您的应用程序提供服务的服务器。默认情况下，它在端口8000上为您的应用提供服务。您可以通过打开浏览器并浏览到http：// localhost：8000 / browser / www来查看它。

您可以在浏览器中使用模拟器在较小的屏幕上显示应用程序。例如，在Google Chrome浏览器中，您可以单击开发人员工具左上方的移动图标。

cordova serve命令会将您的源文件复制到platform / browser目录。这意味着，无论何时对www目录中的文件进行更改，都必须重新启动服务器才能使更改生效。如果您想了解有关此主题的更多信息，那么我建议您查看Grunt或Gulp，这两个自动化工具可在您每次对源代码进行更改时帮助您将文件复制到浏览器平台。以下是该应用在浏览器中的外观：

接下来，我们有Android平台。如果打开platform / android目录，将会看到很多文件夹和文件。其中大多数是Cordova在构建期间使用的文件，因此您不必担心这些。实际上，除非确实需要，否则您实际上并不想弄乱此目录中的文件。但是，您必须记住以下文件和文件夹的用途，因为以后可能需要使用它们。

资产：这是www目录中文件被复制到的位置。
build：构建应用程序后，将在其中存储构建文件。对于Android，它们保存在build / outputs / apk目录下。
AndroidManifest.xml：此文件特定于Android平台。这是应用程序配置。您已将config.xml中包含的所有内容复制到此文件中。当您安装插件时，该插件会为其使用的特定权限向该文件添加一个条目。如果特定的插件存在问题，通常可以在这里查看一下，因为该插件可能没有为此文件添加必要的权限。
res：您的应用程序使用的所有资产都将复制到此目录。这包括图像，声音文件，欢迎屏幕等。
src：此文件夹包含来自已安装插件的特定于平台的代码。

步骤2：产生应用程式建立

添加Android平台之后，就该构建该应用了。此过程将为您添加到项目中的每个平台生成软件包或安装程序。对于Android，它将是.apk文件。您可以使用以下命令来启动Android平台的构建过程：

cordova build android

如果要针对多个平台进行构建，只需省略platform参数：

cordova build

请注意，以上两个命令不会生成可提交到Google Play商店的.apk文件。默认情况下， cordova build命令生成应用程序的调试版本。此版本的应用旨在供开发人员进行测试。两者之间的唯一区别是用于签署应用程序的证书。应用的调试版本使用android SDK中的证书签名，而应用的发行版本则使用开发人员生成的证书签名。这意味着，当您运行cordova build android命令时，它将自动为您签名生成的apk文件。如果要生成应用程序的发行版，则必须添加--release选项：

cordova build --release android

这告诉Cordova该应用程序将在以后由开发人员签名。

步骤3：签署应用程式

现在我们准备对应用程序进行签名。在做之前，我想确保我们在同一页面上。对应用进行签名实际上是做什么的，为什么需要它？简而言之，您需要对应用进行签名，以便可以将您标识为应用的作者。这证明该应用来自您。

在Android上，可以使用密钥库文件来完成此操作。您可以使用此文件对您的应用进行签名。要生成密钥库，请使用可在Android SDK安装路径的sdk / tools目录中找到的keytool 。由于我们已经在前面添加了SDK工具的路径，因此我们应该能够从命令行执行keytool命令。

keytool -genkey -v -keystore photosharer.keystore -alias photosharer -keyalg RSA -keysize 2048 -validity 10000

这是我们传入的每个选项和参数的明细。选项是带破折号的选项，参数是不带破折号的参数。

genkey：生成密钥的命令
密钥库：密钥库的文件名
别名：您要赋予密钥的别名
keyalg：用于生成密钥的算法
keysize：密钥的大小（以字节为单位）
有效性：密钥库有效期 （以天为单位）

接下来，我们使用另一个名为jarsigner的工具来使用已生成的密钥库对应用程序进行签名。导航到您拥有应用程序未签名发行版的目录：

cd platforms/android/build/outputs/apk

接下来，执行以下命令：

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore photosharer.keystore android-release-unsigned.apk photosharer

该命令将询问您生成密钥库时输入的密码。输入密码以开始签名过程。

让我们分解一下命令：

-verbose：指定命令在对apk文件签名时应输出所有信息
sigalg：要使用的签名算法，在这种情况下，我们使用SHA1withRSA
摘要：要使用的消息摘要算法
密钥库：密钥库文件的路径
android-release-unsigned.apk apk文件的未签名发行版本的路径
photosharer：您先前在生成密钥库文件时指定的别名

最后，我们需要确保该应用程序以最佳状态运行。为此，我们使用Zipalign工具。 Zipalign安装在Android SDK安装路径的build-tools目录中。您可以继续并将其复制到Android SDK安装路径的tools目录中。这使我们可以在任何终端窗口中使用它，因为我们之前已经将tools目录添加到了.bashrc文件中。完成后，您可以执行以下命令。 -v选项为我们提供了详细的输出。 4是定义字节对齐边界的整数。应始终将其设置为4 。 android-release-unsigned.apk是我们要优化的apk文件的路径。 photosharer.apk是输出文件的名称。

zipalign -v 4 android-release-unsigned.apk photosharer.apk

执行完毕后，您应该可以将photosharer.apk文件上传到Play商店。如果您使用了Crosswalk，则需要对armv7和x86版本的应用程序执行相同的过程。

在我们的科尔多瓦课程中了解更多

如果您想了解有关Cordova的更多信息，请查看Reggie Dawson的Cordova课程。 Reggie向您介绍了该平台，并帮助您从头开始创建Cordova应用程序。观看下面的视频，以了解本课程。

结论

在本教程中，您学习了如何开始使用Cordova进行移动项目。如您所见，Cordova允许您使用Web技术构建移动应用程序，但是它也使您可以访问本机设备功能。由于您不需要为计划支持的每个平台开发单独的应用程序，因此可以减少开发时间。

继续前进，我建议您去探索可用于Cordova的一些框架。这包括Ionic ， Onsen UI ， Mobile Angular UI和Framework7 。框架为您带来了一些繁重的工作，因此您不必自己实施。诸如路由，用户界面，动画以及代码库的整体结构之类的事情都由这些框架之一处理。这样，您就可以专注于应用程序的功能。