如何添加cordova插件和平台 [英] How to add cordova plugins and platforms

问题描述

我使用 this cordova教程尝试设置一个cordova / phonegap应用程序。我在Windows上开发，我安装了node.js，我在Node.js命令提示符下工作。我已下载并安装：

Andorid SDK from here and 已将其添加到 PATH ，

下载ant 和安装它，

Java JDK还下载并安装。

我的 PATH 包含以下内容：

％ANT_HOME％ \\ bin;％JAVA_HOME％\bin; C：\Program Files（x86）\Android\android-sdk\tools

键入 android into cmd打开Android SDK管理器。

键入 java 显示java帮助命令。

键入 ant -version 显示Ant版本（1.9.6）。

键入 cordova 显示cordova帮助命令。

我已成功安装cordova与 npm install -g cordova ，并创建了我的车间目录。然后我试着添加本教程建议的平台和插件。这里是只是Android平台和设备插件的命令提示符输出：

  C：\Users\Roman\ All\Work\CriticalID\again> cordova平台添加android 
 npm http GET https://registry.npmjs.org/cordova-android/-/cordova-android-4.0.2.tgz 
 npm http 200 https://registry.npmjs.org/cordova-android/-/cordova-android-4.0.2.tgz 
 
 C：\Users\Roman\All\ Work \CriticalID\ workshop> cordova插件add cordova-plugin-device 
通过npm 
 np http获取插件cordova-plugin-devicehttp GET https://registry.npmjs.org/cordova- plugin-device 
 npm http 304 https://registry.npmjs.org/cordova-plugin-device 
 npm http GET https://registry.npmjs.org/cordova-plugin-device/-/ cordova-plugin-device-1.0.1.tgz 
 npm http 200 https://registry.npmjs.org/cordova-plugin-device/-/cordova-plugin-device-1.0.1.tgz 
  

检查平台和插件是否已安装：

  C：\Users\Roman\All\Work\CriticalID\ workhop> cordova平台ls 
安装的平台：
可用平台：amazon-fireos ，android，blackberry10，browser，firefoxos，windows，windows8，wp8 
 
 C：\Users\Roman\All\Work\CriticalID\ workshop> cordova plugin ls 
未添加插件。使用`cordova plugin add< plugin>`。 
 
 C：\Users\Roman\All\Work\CriticalID\ workshop> cordova build 
没有任何平台添加到此项目。请使用`cordova platform add< platform>`。 
  

我安装的所有平台或插件都没有显示为已安装。 workshop \plugins 和 workshop \platforms 文件夹都为空。

教程应用程序在我的浏览器和手机（通过PhoneGap桌面和手机应用程序放在那里），但是当我尝试一个更复杂的教程，如第12部分从这个PhoneGap教程，其中需要相机API，那么相机在浏览器（显然）和我的手机上不支持（错误：不支持Camera API

）。

EDIT b $ b

我已经通过添加Android平台和插件使用git解决了这个问题;解决方案如下。但是，如果我错过了一些东西，请让我知道。

看来 config.xml 应该处理一些功能，但我无法找出。

Cordova 5.1.1的一切

解决方案

我相信文档是老，这已经给我的问题。此外，从Cordova，或通过PhoneGap或PhoneGap构建从头创建应用程序时，一些config.xml和文件结构是不同的。

首先，这些代码行在使用Cordova构建应用程序时似乎不起作用：

  cordova平台添加android 
 cordova插件添加org.apache.cordova.device 
 cordova插件添加cordova插件设备
  

所有平台和插件都需要通过 Git 添加。 此处的Android平台和此处的插件列表。

因此，例如要获取默认的Cordova应用程序（点击，请参见上面的问题）复制并粘贴到CMD中：

 code> cd到你的工作目录
 cordova create workshop com.name.workshop Workshop 
 cd workshop 
 cordova平台添加https://github.com/apache/cordova-android。 git 
 cordova插件添加https://git-wip-us.apache.org/repos/asf/cordova-plugin-whitelist.git 
 cordova插件添加https：// git-wip-us。 apache.org/repos/asf/cordova-plugin-camera.git 
  

请注意，平台必须在插件之前添加。我添加了白名单，因为 config.xml 想要，我也添加了设备和 console ，因为教程告诉我。

现在，如果您键入 cordova platform ls 和 cordova plugin ls ，那么你应该有一个非空的列表返回给你。

为了完整起见，如果你现在想要使用你的相机：
1 ）将以下内容复制到 index.html 中：

 < img id ='image'src =''style =position：absolute; margin：5px; left：0px; top：0px;/> 
< button id =test_camera>相机测试< / button> 
< script type =text / javascriptsrc =js / test.js>< / script> 
  

2）创建一个新脚本 test.js ，然后将以下内容粘贴到其中。我不喜欢该教程创建这个函数的方法，这是更直接的方法：

  var changePicture = function ）{
 if（！navigator.camera）{
 alert（Camera API not supported，Error）; 
 return; 
} 
 var options = {quality：50，
 destinationType：Camera.DestinationType.DATA_URL，
 sourceType：1，// 0：照片库，1 =已保存的相册
 encodingType：0 // 0 = JPG 1 = PNG 
}; 
 
 navigator.camera.getPicture（
 function（imgData）{
 $（'＃image'）。attr（'src'，data：image / jpeg; base64， + imgData）; 
}，
 function（）{
 alert（'Error taking picture'，'Error'）; 
}，
 options）; 
 
 return false; 
}; 
 
 $（＃test_camera）。on（'click'，function（）{
 changePicture（）
}）
  

您可以单独在 index.js 中留下初始化代码。

现在使用PhoneGap桌面应用程序和PhoneGap手机应用程序在手机上测试您的应用程序。我很容易。我使用的是windows和Android，我不知道任何其他系统。

I am using this cordova tutorial to try and set up a cordova/phonegap app. I am developing on Windows, I have node.js installed and I am working inside the Node.js command prompt. I downloaded and installed:
Andorid SDK from here and have added it to PATH,
downloaded ant and installed it,
Java JDK is also downloaded and installed.

My PATH contains these:
%ANT_HOME%\bin;%JAVA_HOME%\bin;C:\Program Files (x86)\Android\android-sdk\tools

Typing android into cmd opens up the Android SDK manager.
Typing java shows java help on commands.
Typing ant -version shows the ant version (1.9.6).
Typing cordova shows cordova help commands.

I successfully installed cordova with npm install -g cordova, and created my workshop directory. Then I tried adding the platforms and plugins suggested by the tutorial. Here is the command prompt output for just the android platform and the device plugin:

C:\Users\Roman\All\Work\CriticalID\again>cordova platforms add android
npm http GET https://registry.npmjs.org/cordova-android/-/cordova-android-4.0.2.tgz
npm http 200 https://registry.npmjs.org/cordova-android/-/cordova-android-4.0.2.tgz

C:\Users\Roman\All\Work\CriticalID\workshop>cordova plugin add cordova-plugin-device
Fetching plugin "cordova-plugin-device" via npm
npm http GET https://registry.npmjs.org/cordova-plugin-device
npm http 304 https://registry.npmjs.org/cordova-plugin-device
npm http GET https://registry.npmjs.org/cordova-plugin-device/-/cordova-plugin-device-1.0.1.tgz
npm http 200 https://registry.npmjs.org/cordova-plugin-device/-/cordova-plugin-device-1.0.1.tgz

Checking if the platforms and plugins are installed:

C:\Users\Roman\All\Work\CriticalID\workshop>cordova platforms ls
Installed platforms:
Available platforms: amazon-fireos, android, blackberry10, browser, firefoxos, windows, windows8, wp8

C:\Users\Roman\All\Work\CriticalID\workshop>cordova plugin ls
No plugins added. Use `cordova plugin add <plugin>`.

C:\Users\Roman\All\Work\CriticalID\workshop>cordova build
No platforms added to this project. Please use `cordova platform add <platform>`.

None of the platforms or plugins I installed are showing as installed. Both the workshop\plugins and workshop\platforms folders are empty too.

The tutorial apps work in my browser and phone (put there by the PhoneGap desktop and phone apps), but when i try a more complicated tutorial, like part 12 from this PhoneGap tutorial where the camera API is required, then camera is unsupported in the browser (obviously) and on my phone (Error: Camera API is not supported).

EDIT

I have solved the problem by adding the Android platform and plugins using git; The solution to that is below. However, if I have missed something, please let me know.
It seems that config.xml is supposed to handle some functionality, but I've not been able to figure it out.
Everything for Cordova 5.1.1

解决方案

I believe the Documentation is old, which has been giving me problems. Additionally, some config.xml and file structure is different when creating the app from scratch with Cordova, or via PhoneGap or PhoneGap build.

First and foremost, these lines of code do not seem to work when building the app with Cordova:

cordova platforms add android
cordova plugin add org.apache.cordova.device
cordova plugin add cordova-plugin-device

All platforms and plugins need to be added via Git. Android platform here, and a list of plugins here.

So, for example to get the default Cordova app, (for instillation, see question above) copy and paste the following into CMD:

cd into your working directory
cordova create workshop com.name.workshop Workshop
cd workshop
cordova platform add https://github.com/apache/cordova-android.git
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-whitelist.git
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git

Note that the platforms have to be added before the plugins. I added whitelist because config.xml wanted to, and I also added device and console because the tutorial told me to.

Now, if you type cordova platform ls and cordova plugin ls, then you should have a non empty list returned to you.

For completeness sake, if you would now like to use your camera: 1) Copy the following into index.html:

<img id='image' src='' style="position:absolute;margin:5px;left:0px;top:0px;"/>
<button id="test_camera">Camera Test</button>
<script type="text/javascript" src="js/test.js"></script>

2) Create a new script test.js, and paste the following into it. I don't like the convoluted way the tutorials create this function, this is way more straight forward:

var changePicture = function() {
  if (!navigator.camera) {
      alert("Camera API not supported", "Error");
      return;
  }
  var options =   {   quality: 50,
                      destinationType: Camera.DestinationType.DATA_URL,
                      sourceType: 1,      // 0:Photo Library, 1=Camera, 2=Saved Album
                      encodingType: 0     // 0=JPG 1=PNG
                  };

  navigator.camera.getPicture(
      function(imgData) {
          $('#image').attr('src', "data:image/jpeg;base64," + imgData);
      },
      function() {
          alert('Error taking picture', 'Error');
      },
      options);

  return false;
};

$("#test_camera").on('click', function() {
    changePicture()
})

You can leave the initialisation code in index.js alone.

Now use the PhoneGap desktop app and the PhoneGap phone app to test your application on your phone. I'ts pretty easy. I'm using windows and Android for this, I don't know about any other systems.

这篇关于如何添加cordova插件和平台的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！