ngCordova插件的使用详解

﹏ヽ暗。殇╰゛Y 2022-05-20 00:21 278阅读 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)*

[![Image 1][]][Image 1 1]

链接：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/

[Image 1]: http://hpm.hand-china.com/file/xform/preview/PHID-FILE-vu4co5w3qxx44i756rkb/lmbk6zghvwklmiya3wxa/
[Image 1 1]: http://hpm.hand-china.com/file/data/lmbk6zghvwklmiya3wxa/PHID-FILE-vu4co5w3qxx44i756rkb/pasted_file