ngCordova插件的使用详解

最新推荐文章于 2024-05-11 09:56:17 发布

极地雪狼li

最新推荐文章于 2024-05-11 09:56:17 发布

阅读量1.4k

点赞数

分类专栏： Cordova 文章标签： ngCordova

Cordova 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

当我们在开发基于Cordova+AngularJS的这种HybridAPP时，当我们遇到了前端框架不能解决的一些问题时，比如调用相机，相册，浏览器等这些操作时，使用插件就是我们的解决方法。
ngCordova是Cordova和AngularJS的结合，将Cordova插件封装成了一个个AngularJS式的服务。

无论使用的是OnsenUI还是Ionic框架开发项目，只要是基于Cordova+AngularJS的，都可以使用ngCordova插件
下面我介绍一下使用ngCordova插件需要主要的事项
1.安装：
1-1：获取源文件：用'bower'命令来安装ngCordova或下载Zip压缩包

$ bower install ngCordova

1-2：将ng-cordova.js或ng-cordova.min.js包含到工程的index.html中，需要注意的是，引入的位置一定要在cordova.js之前，在angular.js之后，因为三者的依赖关系是cordova.js依赖ng-cordova.js依赖angular.js，虽然引入了cordova.js，但是事实上并没有这个文件，但是这行代码却必须引入。

示例：<script src="lib/ngCordova/dist/ng-cordova.js"></script>
     <script src="cordova.js"></script>

2.将ngCordova作为Angular依赖注入angular模块中：

angular.module('myApp', ['ngCordova'])

3.用Cordova命令行将插件加入到项目中：

示例：cordova plugin add https://github.com/EddyVerbruggen/cordova-plugin-actionsheet.git

cordova plugin add为cordova加入插件的命令，后面的网址是插件的地址，每种插件的地址可以查看官网每个插件的文档

Cordova常见问题：（很重要）
Cordova插件并不总是能够正确安装，未知插件问题或其他问题通常都是很难去调试和理解的，以下几点是提供大家解决插件不可用问题的提示。
1.一定要在手机上测试或调试
Cordova插件通常都不会在浏览器上工作，因为每个插件都进入到一个特定的API（相机，话筒等）。同时有些插件也是不支持模拟器的（所以经常懒得打包，用Phonegap去测试的各位要注意了！），所以测试插件时，打包好安装包，放在手机上去测试是很必要的
2.将插件包在"diviceready"事件中，
在使用插件之前，你要确定你的手机是否有相关的设备（相机，陀螺仪，温度感应这些硬件设备），如果插件可用，使用叫做"diviceready"的原生cordova事件，使用如下：

示例：document.addEventListener("deviceready", function () {
        $cordovaPlugin.someFunction().then(success, error);
      }, false);

3.确保你在使用最新版本的Cordova命令行

$npm install -g cordova

4.刷新ios.json/android.json文件（在/plugin文件夹内）

$ cordova platform rm [ios/android]
$ cordova platform add [ios/android]

5.更新工程到最新版本Cordova
以下命令将cordova.js和依赖Cordova的其他文件更新到最新版本

$ cordova platform update [ios/android]

以上就是安装，调试ngCordova插件的步骤
下面列举ngCordova中都有哪些插件，供大家参考

1.ActionSheet（动作列表）这个有些框架封装了不需使用(如ionic)但有些框架也没有这个组件(如OnsenUI)

链接：http://ngcordova.com/docs/plugins/actionSheet/

2.AdMob（广告插件）从JavaScript中将广告加入到APP中

链接：http://ngcordova.com/docs/plugins/adMob/

3.APP是否安装（AppAvailability）检查手机中是否安装了某个App

链接：http://ngcordova.com/docs/plugins/appAvailability/

4.AppRate（App评分插件）让用户可以选择是"现在"/"以后"/还是"从不"去对你的APP进行打分到应用商店

链接:http://ngcordova.com/docs/plugins/appRate/

5.AppVersion（获取App版本的插件）

链接：http://ngcordova.com/docs/plugins/appVersion/

6.Badge（修改App图标上的消息提示数量插件）包括IOS/Android/WindowPhone

链接：http://ngcordova.com/docs/plugins/badge/

7.Background Geoloc（后台定位插件）

链接：http://ngcordova.com/docs/plugins/backgroundGeolocation/

8.Battery Status（电量检测）

链接：http://ngcordova.com/docs/plugins/batteryStatus/

9.Barcode Scanner（条形码/二维码扫描插件）打开相机并自动扫描条形码/二维码（华勤项目中使用过）

链接：http://ngcordova.com/docs/plugins/barcodeScanner/

10.Calendar（日历插件）日历插件允许在手机默认日历App上操作时间

链接：http://ngcordova.com/docs/plugins/calendar/

11.Camera（相机插件）打开手机相机来拍照或录像的插件（多个项目使用过）

链接：http://ngcordova.com/docs/plugins/camera/

12.Capture（捕获插件）调用手机硬件来录音频，视频，或照片的插件

链接：http://ngcordova.com/docs/plugins/capture/

13.Clipboard（剪贴板插件）

链接：http://ngcordova.com/docs/plugins/clipboard/

14.Contacts（联系人插件）可以创建，移除，查找手机上联系人的插件

链接：http://ngcordova.com/docs/plugins/contacts/

15.DatePicker（日期选择器插件）用来选择日期的插件

链接：http://ngcordova.com/docs/plugins/datePicker/

16.Device（设备信息捕获插件）抓取设备相关信息，例如系统平台，设备型号

链接：http://ngcordova.com/docs/plugins/device/

17.DeviceMotion（设备加速器插件）通过手机的加速器，检测手机根据当前方位做出的运动改变

链接：http://ngcordova.com/docs/plugins/deviceMotion/

18.DeviceOrientation（手机方位插件）通过手机的罗盘，检测到手机指向的方向，从0度到359.9度

链接：http://ngcordova.com/docs/plugins/deviceOrientation/

19.Dialogs（对话框插件）出发提示框或发出嘀嘀嘀的声音

链接：http://ngcordova.com/docs/plugins/dialogs/

20.EmailComposer（Email插件）通过标准接口可以编辑或发送Email邮件的插件

链接：http://ngcordova.com/docs/plugins/emailComposer/

21.Facebook（Facebook连接插件）获取进入FacebookAPP的权限，插件需要预安装

链接：http://ngcordova.com/docs/plugins/facebook/

22.File（进入手机存储中文件/文件夹的插件）

链接：http://ngcordova.com/docs/plugins/file/

23.FileTransfer（文件传输插件）用来上传和下载文件的插件

链接：http://ngcordova.com/docs/plugins/fileTransfer/

24.FileOpener（文件启动器）用手机系统以文件默认使用的APP打开一个文件

链接：http://ngcordova.com/docs/plugins/fileOpener2/

25.Flashlight（手电筒插件）打开手机相机的闪光灯作为手电筒的插件

链接：http://ngcordova.com/docs/plugins/flashlight/

26.Geolocation（获取当前用户的位置或持续的位置变化的插件）

链接：http://ngcordova.com/docs/plugins/geolocation/

27.Globalization（获取用户当前场所或时区的插件）

链接：http://ngcordova.com/docs/plugins/globalization/

28.GoogleAnalytics（连接谷歌Universal Analytics SDK 3.0（谷歌的一套分析工具）的插件）

链接：http://ngcordova.com/docs/plugins/googleAnalytics/

29.HealthKit（可以进入IOS手机中的HealthKit的插件）仅限IOS系统

链接：http://ngcordova.com/docs/plugins/healthkit/

30.iBeacon（通过蓝牙以及唯一的标示码来检测相匹配的app或手机系统，标识码可以用来显示手机的具体位置或执行基于位置的操作）

链接：http://ngcordova.com/docs/plugins/beacon/

31.ImagePicker（图片选择器插件）

链接：http://ngcordova.com/docs/plugins/imagePicker/

32.InAppBrowser（在APP中界面打开网页的插件）

链接：http://ngcordova.com/docs/plugins/inAppBrowser/

33.Instagram（打开InstagramAPP中图片的插件）

链接：http://ngcordova.com/docs/plugins/instagram/

34.Keyboard（用Cordova进入IOS系统键盘的插件）仅限IOS系统

链接：http://ngcordova.com/docs/plugins/keyboard/

35.Keychain（用Cordova进去IOS手机Keychain的插件(Keychain是IOS用来保存密码证书一类的东西)）仅限IOS系统

链接：http://ngcordova.com/docs/plugins/keychain/

36.Launch Navigator（进入手机导航工具的插件）从起始地到终点

链接：http://ngcordova.com/docs/plugins/launchNavigator/

37.LocalNotification（本地提示插件）当某个程序没有执行却又收到的通知时，这个插件就起作用了

链接：http://ngcordova.com/docs/plugins/localNotification/

38.Meida（在手机上记录和回播音频文件的插件）

链接：http://ngcordova.com/docs/plugins/media/

39.NativeAudio（Cordova3.5以上针对HTML5游戏和音频APP类的处理插件）

链接：http://ngcordova.com/docs/plugins/nativeAudio/

40.Network（检测手机网络连接状况的插件，wifi/手机网络）

链接：http://ngcordova.com/docs/plugins/network/

41. OAuth（当APP和多个平台做关联时，用来管理浏览器流程的插件）

链接：http://ngcordova.com/docs/plugins/oauth/

42.Pin Dialog（数字密码对话框插件）

链接：http://ngcordova.com/docs/plugins/pinDialog/

43.Preference（获得手机APP偏好设置的插件）

链接：http://ngcordova.com/docs/plugins/preferences/

44.Printer（链接打印机的插件）

链接：http://ngcordova.com/docs/plugins/printer/

45.ProgressIndicator（多种供用户选择进度条来下载或加载时使用的插件）

链接：http://ngcordova.com/docs/plugins/progressIndicator/

46.Push Notifications（允许你的程序接收推送消息的插件）

链接：http://ngcordova.com/docs/plugins/pushNotifications/

47.SMS（调用IOS或Android默认发送短信APP的插件）

链接：http://ngcordova.com/docs/plugins/sms/

48.Social Sharing（调用Facebook，Twitter等社交APP分享的插件）

链接：http://ngcordova.com/docs/plugins/socialSharing/

49.SpinnerDialog（带有下拉框的对话框的插件）

链接：http://ngcordova.com/docs/plugins/spinnerDialog/

50.SplashScreen（显示或隐藏SplashScreen的插件）

链接：http://ngcordova.com/docs/plugins/splashscreen/

51.SQLite（用Cordova本地调用SQLite的插件）

链接：http://ngcordova.com/docs/plugins/sqlite/

52.StatusBar（设置状态栏颜色和样式的插件）

链接：http://ngcordova.com/docs/plugins/statusbar/

53.Toast（在手机上显示本地提示框的插件）

链接：http://ngcordova.com/docs/plugins/toast/

54.TouchID（允许在APP中使用IOS系统TouchID的插件）仅限IOS系统

链接：http://ngcordova.com/docs/plugins/touchID/

55.Vibration（让手机震动的插件）

链接：http://ngcordova.com/docs/plugins/vibration/

56.ZIP（解压zip格式的压缩包）

链接：http://ngcordova.com/docs/plugins/zip/

极地雪狼li

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ngCordova插件的使用详解

当我们在开发基于Cordova+AngularJS的这种HybridAPP时，当我们遇到了前端框架不能解决的一些问题时，比如调用相机，相册，浏览器等这些操作时，使用插件就是我们的解决方法。ngCordova是Cordova和AngularJS的结合，将Cordova插件封装成了一个个AngularJS式的服务。无论使用的是OnsenUI还是Ionic框架开发项目，只要是基于Cordova+Angu...
复制链接

扫一扫

专栏目录