Ionic 如何使用 Cordova 插件
为什么使用 Cordova
Cordova 提供了与 APP 原生平台交互的功能,使基于网页的APP突破了不能使用设备平台完整功能的限制。
如何寻找自己想要的插件
Cordova 社区
Cordova 社区提供上千个插件,支持各种设备平台的各类硬件特性。
Github
作为最大的程序员同性交友网站,在这里也可以搜索到的很多插件。
Ionic Native
Ionic 官方提供的插件地址,它与原生 Cordova 插件有所不同,后面会讲到。
选择时需要注意什么:
- 选择更新时间更近的插件。时间较为久远的插件,可能会存在方法过时导致不可用。
- 选择 Star 较多的插件。越多人关注使用的插件,使用起来问题相对较少一些。
如何使用 Cordova 插件
由于 Cordova 插件无法使用 Angular 的依赖注入,所以只能通过访问全局变量和方法来调用,十分不方便代码管理。所以 Ionic 开发团队在 Cordova API 基础上封装了一系列开源 Cordova 插件,命名为 Ionic Native 的插件集。在我们新建的 Ionic 项目中,打开 package.json 中就可以看到几个自带的 Ionic Native 插件。
接下来我们就分别举例子讲解一下如何使用 Cordova 原生插件
和 Ionic Native
。
Cordova 原生插件
这里举一个获取手机相册的例子,输入以下代码安装 imagepicker 插件
$ ionic cordova plugin add add cordova-plugin-telerik-imagepicker
之后在需要用到的页面,使用以下方法即可调用手机相册
showAlbum() {
this.platform.ready().then(() => {(<any>window).imagePicker.getPictures(photo => {console.log(photo[0]);});
});
简单分析一下代码:
1.首先我们使用了 this.platform.ready 方法,这是因为我们需要保证设备已经就绪,否则插件可能会调用失败。
2.从 (< any>window) 可以看出我们必须使用全局变量来调用,选择图片后,会返回一个数组。
3.如果只选一张图片的话,直接取[0]即可。取出的数值就是手机的图片路径,可以直接设置 [src] 进行显示。
Ionic Native
Ionic Native 与原生 Cordova 插件不同,它的安装需要进行两步。以 ActionSheet 插件举例
$ ionic cordova plugin add cordova-plugin-actionsheet
$ npm install --save @ionic-native/action-sheet
第一个步骤和之前安装插件完全相同,第二步则是安装 Ionic 封装的代码。所以不需要的时候我们也要输入两条指令才能彻底删除。
$ ionic cordova plugin rm cordova-plugin-actionsheet
$ npm uninstall --save @ionic-native/action-sheet
Ionic Native 的使用方法,官方文档写的已经很简单了,我简单举一个例子。
showActionSheet() {let buttonLabels = ['你好', '确定'];const options: ActionSheetOptions = {title: '你好Ionic',buttonLabels: buttonLabels,addCancelButtonWithLabel: '取消',androidTheme: this.actionSheet.ANDROID_THEMES.THEME_HOLO_LIGHT,destructiveButtonLast: true};this.actionSheet.show(options);
}
插件的限制
寻找好用的插件十分有助于开发的工作,但并不是所有插件都可以在所有平台使用,也不是所有方法都可以使用。在 Ionic Native 寻找插件时,首先要看支持的平台。
之后也不是所有方法都可以使用,可能作者也没在介绍的地方标出来。比如 Keyboard 这个插件,其中有一个方法 show()
,我在查看源码时发现在 iOS 中是不可用的。
所以在日常开发时,使用插件如果遇到问题了,不妨寻找 Android、iOS 开发协助查看源码,调查一下为什么失败。
Ionic 如何使用 Cordova 插件相关推荐
- 【No.4 Ionic】修改 cordova 插件
在使用 cordova 过程 使用的插件 有可能不能满足个人需求,就需要修改,下面就直接说说步骤 插件结构 我用 cordova-plugin-inappbrowser 插件 讲解 在目录中有个 sr ...
- cordova 蓝牙_Ionic通过Cordova插件使用设备能力
1. Cordova插件 App运行在手机上,少不了需要使用手机上的设备能力,比如蓝牙.相机.数据库等等.在之前的文章中我们知道Ionic框架实际上还是一个UI框架,一个基于WEB的框架.那么Ioni ...
- Ionic系列——使用ng-cordova插件
2019独角兽企业重金招聘Python工程师标准>>> 1.cordova介绍 Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的 ...
- 极光推送Cordova插件适配Capacitor
极光推送官方提供的Cordova插件目前无法适配Capacitor电容器平台进行开发,之前问了官方什么时候会考虑适配,官方的回答是暂不做开发安排,需要调研,这对于想使用Capacitor进行开发的同学 ...
- Cordova入门系列(三)Cordova插件调用
上一章我们介绍了cordova android项目是如何运行的,这一章我们介绍cordova的核心内容,插件的调用.演示一个例子,通过cordova插件,去调用摄像头. 一.插件的安装以及基本信息: ...
- 我用的 cordova 插件
cordova 插件不少,但合适自己的才是最好的 cordova-plugin-camera 相机拍照 cordova-plugin-device 检查当前操作系统和设备情况 cordova-plug ...
- unlegal android,百度地图定位 Cordova 插件 cordova-plugin-baidumaplocation
软件介绍 百度地图定位Cordova插件,支持Android,IOS 可以在此地址查看example 基于百度地图Android版定位SDK(v7.1)以及百度地图IOS SDK (v3.2.1) 一 ...
- unlegal android,cordova-plugin-baidumaplocation百度地图定位Cordova插件
百度地图定位Cordova插件,支持Android,IOS 可以在此地址查看example 基于百度地图Android版定位SDK(v7.1)以及百度地图IOS SDK (v3.2.1) 一,申请An ...
- Cordova入门系列(三)Cordova插件调用 转发 https://www.cnblogs.com/lishuxue/p/6018416.html...
Cordova入门系列(三)Cordova插件调用 版权声明:本文为博主原创文章,转载请注明出处 上一章我们介绍了cordova android项目是如何运行的,这一章我们介绍cordova的核心内容 ...
- android 开发sdk 找不到java类_开发Cordova插件(Android)时找不到源Java类
我正在开发Cordova的插件,该插件使用名为pagseguro的巴西付款api. 但这不是重点. 当我将cordova插件添加到项目中并运行" cordova run android&qu ...
最新文章
- Dockerfile 最佳实践
- spring基础系列--JavaConfig配置
- AV1为何有信心打败H.265?
- 修改GIT的user.name和user.email
- WPF中删除打开过的图片
- mt4双线macd_【名师讲堂第三季】第六期:基于MACD指标的买卖策略精讲
- glassfish上部署firstcup-war
- not in和not exist的区别(转)
- 生成对抗网络GAN损失函数loss的简单理解
- jpress连接不上mysql_win10+jdk+mysql+tomcat+jpress环境搭建与部署
- AnyLogic 教程JobShop—Prcess Modeling Library
- Primer Premier 6.0 for Win 专业的引物设计
- java snmp walk,snmpwalk命令常用方法总结(转)
- 基于单片机的音乐盒系统设计(#0435)
- Android 支付宝开发错误总结
- openssl_sign() 语法+RSA公私钥加密解密,非对称加密算法详解
- 如何采集苏宁易购买家订单?
- word打开doc文件提示运行时错误‘4605‘
- 《数据结构》实验报告三:栈 队列
- PCL1.10.1+VS2019+Qt5.14.2下载、安装及配置(强迫症福音~使用的软件均为最新版本)
热门文章
- Atitit. Toast alert loading js控件 atiToast v2新特性
- Atitit..jdk java 各版本新特性 1.0 1.1 1.2 1.3 1.4 1.5(5.0) 1.6(6.0) 7.0 8.0 9.0 attilax 大总结
- Atitit..组件化事件化的编程模型--(2)---------Web datagridview 服务器端控件的实现原理and总结
- paip.提升用户体验----gcc c++ JIT-debugging 技术
- python : pandas库的后继者polars库
- (转)献给迷茫中的量化工作者
- Julia: LightTable 插件方式 与 JUNO
- 一文看完“阿里云自动化运维沙龙 · 上海专场”整场干货
- 容器技术20年:容器引擎与江湖门派
- 谭礼铨:3月21日阿里云北京峰会网络大神