为什么我的插件都不适用于 Apache Cordova？答案

【问题标题】：Why do none of my plugins work for Apache Cordova?为什么我的插件都不适用于 Apache Cordova？
【发布时间】：2016-06-29 17:20:54
【问题描述】：

我正在使用 cordova 将插件加载到我的应用程序中。这是简化的可重现问题：

cordova 创建 foo 科尔多瓦插件添加插件名称--保存科尔多瓦平台添加 android --save cordova build android --verbose

我可以使用 phonegap 运行这个应用程序并在我的手机上看到它。该应用程序报告 deviceready 作为基本启动应用程序应该的。到目前为止，一切看起来都很棒。

如果我查看插件文件夹，我可以在那里看到我的插件。在这种情况下，我的插件称为蓝牙。

我在设备就绪后触发的位置编辑 index.js 文件并添加“alert (typeof (bluetoothle));”

我希望当警报触发时它应该报告“对象”。它不这样做。它报告“未定义”。

我已经用其他几个插件尝试过这个，我总是得到相同的结果。所以看起来无论我安装什么插件，我都无法访问插件中的任何功能。

【问题讨论】：

标签： cordova-plugins

【解决方案1】：

我确实有同样的问题。但我使用的是Phonegap CLI。以及以下插件：https://github.com/randdusing/cordova-plugin-bluetoothle

我使用命令添加插件：

$ phonegap plugin add cordova-plugin-bluetoothle

我已经添加了平台 android 和 ios。

所以在 plugins 文件夹中有 cordova-plugin-bluetoothle 文件夹很可能是一个有效的插件包。插件文件夹中还有包含以下部分的 android.json 和 ios.json 文件：

"cordova-plugin-bluetoothle": {
    "PACKAGE_NAME": "com.phonegap.helloworld"
},

在 plaforms/android 中有 android.json 文件，其中包含：

{
    "xml": "<feature name=\"BluetoothLePlugin\"><param name=\"android-package\" value=\"com.randdusing.bluetoothle.BluetoothLePlugin\" /></feature>",
    "count": 1
},

在platforms/ios中有一个ios.json文件，其中包含：

{
    "xml": "<feature name=\"BluetoothLePlugin\"><param name=\"ios-package\" value=\"BluetoothLePlugin\" /></feature>",
    "count": 1
},

我的目标是 Android SDK API 23。正如自述文件所说...

因为我刚刚修改了 hello-world 示例，以便在 deviceready 事件触发后调用蓝牙初始化。

那么问题出在哪里，导致设备准备就绪时 index.js 代码中没有定义 bluetoothle 变量？

所以这里是index.js的完整代码：

var bluetoothle;

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
        console.log("platform: "  + device.platform);

        if(bluetoothle) {
            console.log("bluetooth is not defined!");    
        } else {
            console.log("bluetooth is not defined!");    
        }

        console.log("yhea managed to initialize Bluetooth LE!");
    },
    // Update DOM on a Received Event
    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);
    }
};

以及index.html的完整代码：

<html>

<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
    <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
    <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
    <!-- Good default declaration:
    * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
    * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
    * Disables use of eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
        * Enable inline JS: add 'unsafe-inline' to default-src
        * Enable eval(): add 'unsafe-eval' to default-src
    * Create your own at http://cspisawesome.com
    -->
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" /> -->

    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Hello World</title>
</head>

<body>
    <div class="app">
        <h1>PhoneGap</h1>
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>

</html>

【讨论】：

【解决方案2】：

太好了，

在我刚刚通过为我的低功耗蓝牙产品使用不同的插件“解决”之前遇到的问题。

后来我用另一个插件再次遇到了同样的问题。

然后我终于明白了一切：

我主要使用 Phonegap 开发者应用程序进行即时测试。 Phonegap 开发者应用与所有核心插件和其他一些插件捆绑在一起。

！！那些尚未捆绑的插件，将永远无法供您的 Phonegap 开发者应用程序访问以进行测试！

phonegap plugin add cordova-plugin-new-unbundled

不会将其提供给应用程序。仅下载和预构建文件以进行潜在的实际构建。

要在 Phonegap 开发者应用中实现此功能，您需要构建自己的 Phonegap 开发者应用，添加所需的插件。

否则您的插件只能在实际构建中使用。

【讨论】：