Cordova插件不适用于Ionic

I am building out an Ionic app in Angular and ave never been able to get plugins to work.

我正在Angular中构建一个Ionic应用程序，而且从来没有能够让插件工作。

As an example, I have tried using the statusbar plugin as described here:

举个例子，我尝试过使用如下所述的状态栏插件：

http://ionicframework.com/tutorials/fullscreen-apps/

But it still shows in my app. I tried:

但它仍然显示在我的应用程序中。我试过了：

$ cordova plugin add org.apache.cordova.statusbar

and then "cordova prepare", "ionic run ios" and still no luck.

然后“cordova准备”，“离子运行ios”仍然没有运气。

The plugins I get listed when I type

我输入时列出的插件

$ cordova plugin list

com.ionic.keyboard 1.0.2 "Keyboard"
org.apache.cordova.console 0.2.10 "Console"
org.apache.cordova.device 0.2.11 "Device"
org.apache.cordova.statusbar 0.1.7 "StatusBar"

I also am using Gulp. I have a folder with all my dev work in, and gulp moves and compiles it into a /dist folder from whence it is served. I'm pretty sure the plugins are moved across perfectly, is there anywhere I should check the references?

我也在使用Gulp。我有一个包含所有开发工具的文件夹，gulp移动并将其编译到/ dist文件夹中。我非常肯定插件是完美的移动，有什么地方我应该检查参考？

Any ideas if there is something you have to do in order to use Cordova plugins with Ionic?

任何想法，如果有必要做的事情，以使用Ionic的Cordova插件？

3 个解决方案

#1

The answer to this was that I had to add

对此的答案是我必须添加

<script src="cordova.js"></script>

to my page, just above my scripts.

到我的页面，就在我的脚本之上。

Please be aware this file doesnt exist during development, it's injected at runtime... which is why I could solve it. Hope this helps someone!

请注意，这个文件在开发过程中不存在，它是在运行时注入的...这就是为什么我可以解决它。希望这有助于某人！

#2

Additional solution if including cordova.js doesn't resolve the problem

如果包括cordova.js的其他解决方案不能解决问题

I have had the same issue, but cordova.js was already included in my index.html. window.plugins always has been undefined. Then I noticed that there is a cordova_plugins.js file inside the platforms/ios/www folder.

我有同样的问题，但cordova.js已经包含在我的index.html中。 window.plugins总是未定义的。然后我注意到platforms / ios / www文件夹中有一个cordova_plugins.js文件。

Here's what I did:

这是我做的：

$ cordova plugin add cordova-plugin-flashlight
$ cordova插件添加cordova-plugin-flashlight
$ cordova prepare
$ cordova准备
added <script src="cordova_plugins.js"></script> right after cordova.js inside index.html
在index.html中的cordova.js之后添加

After that I could access the window.plugins variable.

之后我可以访问window.plugins变量。

HINT: take a look into your cordova_plugins.js and be aware that some plugins are attached to cordova.plugins (e.g. Keyboard Plugin, see below) others are attached to window.plugins (e.g. Flashlight)

提示：看看你的cordova_plugins.js，并注意一些插件附加到cordova.plugins（例如键盘插件，见下文），其他插件附加到window.plugins（例如手电筒）

For reference - my cordova_plugins.js file looks like this

供参考 - 我的cordova_plugins.js文件看起来像这样

cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
    {
        "file": "plugins/cordova-plugin-console/www/logger.js",
        "id": "cordova-plugin-console.logger",
        "clobbers": [
            "cordova.logger"
        ]
    },
    {
        "file": "plugins/cordova-plugin-console/www/console-via-logger.js",
        "id": "cordova-plugin-console.console",
        "clobbers": [
            "console"
        ]
    },
    {
        "file": "plugins/cordova-plugin-device/www/device.js",
        "id": "cordova-plugin-device.device",
        "clobbers": [
            "device"
        ]
    },
    {
        "file": "plugins/cordova-plugin-splashscreen/www/splashscreen.js",
        "id": "cordova-plugin-splashscreen.SplashScreen",
        "clobbers": [
            "navigator.splashscreen"
        ]
    },
    {
        "file": "plugins/cordova-plugin-statusbar/www/statusbar.js",
        "id": "cordova-plugin-statusbar.statusbar",
        "clobbers": [
            "window.StatusBar"
        ]
    },
    {
        "file": "plugins/ionic-plugin-keyboard/www/ios/keyboard.js",
        "id": "ionic-plugin-keyboard.keyboard",
        "clobbers": [
            "cordova.plugins.Keyboard"
        ],
        "runs": true
    },
    {
        "file": "plugins/cordova-plugin-flashlight/www/Flashlight.js",
        "id": "cordova-plugin-flashlight.Flashlight",
        "clobbers": [
            "window.plugins.flashlight"
        ]
    }
];
module.exports.metadata = 
// TOP OF METADATA
{
    "cordova-plugin-console": "1.0.1",
    "cordova-plugin-device": "1.0.1",
    "cordova-plugin-splashscreen": "2.1.0",
    "cordova-plugin-statusbar": "1.0.1",
    "cordova-plugin-whitelist": "1.0.0",
    "ionic-plugin-keyboard": "1.0.7",
    "cordova-plugin-flashlight": "3.0.0"
}
// BOTTOM OF METADATA
});

#3

I tested this on Android and iPhone simulator and works correctly. Try this code:

我在Android和iPhone模拟器上测试过这个并且工作正常。试试这段代码：

angular.module('starter', [
    'ionic',
    'starter.controllers',
    ... more modules here
])
.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        if (window.StatusBar) {
            // org.apache.cordova.statusbar required
            StatusBar.hide();
        }
    });
})
.... more code

EDIT:

编辑：

$ cordova plugin add org.apache.cordova.statusbar
$ ionic build ios
$ ionic run ios

EDIT II: (Try with a fresh Project and iPhone Simulator)

编辑II :(尝试使用全新的Project和iPhone模拟器）

$ ionic start testStatusBar tabs
$ cd testStatusBar/
$ cordova plugin add org.apache.cordova.statusbar
$ vim www/js/app.js


Edit this:
if(window.StatusBar) {
  // org.apache.cordova.statusbar required
  // StatusBar.styleDefault();
  StatusBar.hide();
}

$ vim www/index.html

add class="fullscreen" to the <body> element


$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios

#1