javascript Cordova 插件不适用于 Ionic

Cordova plugins not work with Ionic

提问by Ben Taliadoros

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/

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 prepare”，“ionic run 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?

如果您需要做一些事情才能将 Cordova 插件与 Ionic 一起使用，您有什么想法吗？

回答by Ben Taliadoros

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!

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

回答by ilmgb

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

如果包含cordova.js 无法解决问题，则提供其他解决方案

I have had the same issue, but cordova.jswas already included in my index.html. window.pluginsalways has been undefined. Then I noticed that there is a cordova_plugins.jsfile inside the platforms/ios/wwwfolder.

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

Here's what I did:

这是我所做的：

1. $ cordova plugin add cordova-plugin-flashlight
2. $ cordova prepare
3. added <script src="cordova_plugins.js"></script>right after cordova.jsinside index.html

1. $ cordova plugin add cordova-plugin-flashlight
2. $ cordova prepare
3. <script src="cordova_plugins.js"></script>在cordova.js里面之后添加index.html

After that I could access the window.pluginsvariable.

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

HINT:take a look into your cordova_plugins.jsand 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
});

回答by manzapanza

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)

编辑二：（尝试新的项目和 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