Cordova插件不适用于Ionic
我正在Angular中构建一个Ionic应用程序,而且从来没有能够让插件工作。
举个例子,我尝试过使用如下所述的状态栏插件:
http://ionicframework.com/tutorials/fullscreen-apps/
但它仍然显示在我的应用程序中。 我试过了:
$ cordova plugin add org.apache.cordova.statusbar
然后“cordova准备”,“离子运行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文件夹中。 我非常肯定插件是完美的移动,有什么地方我应该检查参考?
任何想法,如果有必要做的事情,以使用Ionic的Cordova插件?
对此的答案是我必须添加
到我的页面,就在我的脚本之上。
请注意,这个文件在开发过程中不存在,它是在运行时注入的…这就是为什么我可以解决它。 希望这有助于某人!
如果包括cordova.js的其他解决方案不能解决问题
我有同样的问题,但cordova.js
已经包含在我的index.html
。 window.plugins
总是未定义的。 然后我注意到platforms/ios/www
文件夹中有一个cordova_plugins.js
文件。
这是我做的:
-
$ cordova plugin add cordova-plugin-flashlight
-
$ cordova prepare
- 在
index.html
cordova.js
之后添加
之后我可以访问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 });
我在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
编辑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 element $ ionic platform add ios $ ionic build ios $ ionic emulate ios