Cordova 插件不适用于 Ionic答案

【问题标题】：Cordova plugins not work with IonicCordova 插件不适用于 Ionic
【发布时间】：2014-09-11 17:04:07
【问题描述】：

我正在 Angular 中构建一个 Ionic 应用程序，但一直无法让插件工作。

例如，我尝试使用此处描述的状态栏插件：

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

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

$ cordova plugin add org.apache.cordova.statusbar

然后“cordova prepare”、“ionic run ios”仍然没有运气。

我输入时列出的插件

$ 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"

我也在使用 Gulp。我有一个文件夹，其中包含我所有的开发工作，gulp 将其移动并编译到 /dist 文件夹中。我很确定插件完美地移动了，有没有我应该检查参考的地方？

您有什么想法可以将 Cordova 插件与 Ionic 一起使用吗？

【问题讨论】：

您能否提供有关您遵循的步骤的更多信息。这意味着与科尔多瓦一起工作。我猜你的环境是错误的，或者你错过了这么少的东西。不加插件能用吗？谢谢
我添加了更多信息，还有其他信息可以用来帮助诊断吗？

标签： javascript ios angularjs cordova ionic-framework

【解决方案1】：

答案是我必须添加

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

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

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

【讨论】：

上周这个问题一直困扰着我。谢谢！

【解决方案2】：

如果包含 cordova.js 不能解决问题，则额外的解决方案

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

这就是我所做的：

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

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

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

供参考 - 我的 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】：

我在 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

编辑：

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

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

【讨论】：

不幸的是，这对我不起作用。你的应用中的插件是否有其他参考资料？
玩了一些，我不确定有什么不同，状态栏现在是白色文本。绿色电池在白色背景下仍然可见，所以这并不理想，这是你得到的吗？
启动画面后，应用启动时，状态栏完全隐藏（无时间、无电池等）
不，它仍然只是白色文本。我后来看到有人使用了一些，所以我可能能够阐明。目前我认为我做错了什么，但不知道是什么