Ionic2使用非ionic-native中的cordova插件的方法
来源:互联网 发布:高光谱遥感数据降维 编辑:程序博客网 时间:2024/06/06 01:02
Ionic Native简介
Ionic Native是Cordova / PhoneGap插件的一个TypeScript包装器,可以给Ionic App轻松添加所需的任何本机功能。
安装
- 1
- 1
还好,最新版的Ionic2 App默认包含@ionic-native/core,较早的Ionic2 App默认包含不带@的native包。- -save参数放在包名之前之后都行。
在使用npm install或者ionic plugin add[rm]时,使用- -save参数后,项目会在执行下载安装的同时修改package.json文件,从而保存了当前node库和plugin或者platform的状态。在使用Git多人协作时,即便在.gitignore文件中忽略了node_modules、plugins、platforms目录,成员也可以通过运行npm install和ionic state restore命令从package.json文件恢复项目的完整node库和plugin或者platform。
用法
- 安装所需的插件(plugin)
为要添加的每个插件安装Ionic Native包。
比如说要添加Camera插件,则需要运行以下命令:
- 1
- 1
然后使用Cordova或Ionic CLI安装插件。
- 1
- 1
所有包名称都记录在插件的文档中。建议按照每个插件文档的安装说明进行操作,因为某些插件需要额外的步骤来完全安装,而且ionic官网现在经常变,插件的用法也有所变化。
- 把插件添加到app的模块
安装插件的包后,将其添加到AppModule里的NgModule。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
在浏览器中使用Ionic Native
在浏览器中使用native插件
Ionic Native拥有超过130种移动Native SDK插件,可以构建功能强大的Ionic应用程序。
在以前,在浏览器中测试native功能是一件不可能的事情,需要离子开发人员在真机或模拟器上进行测试,这是一个相当缓慢的过程。
Ionic Native 3.0现在允许开发人员通过简单的重写机制来仿制和使用浏览器中的native插件,从而可以方便地从传感器提供测试数据,或者访问纯native API(如HealthKit)。这意味着绝大多数的Ionic App现在可以完全在浏览器中构建,而无需部署到真机或模拟器。
仿制插件
要在浏览器和ionic serve会话中使用Ionic Native插件,只需要扩展原始的插件类,并重写想要仿制的方法。
写一个demo,通过仿制Camera插件来返回图像,用来替代在真机之外可能不可用的native插件Camera。
首先新建一个文件camera.mock.ts,在其中导入类Camera:
- 1
- 1
然后创建一个通过仿制扩展了Camera类的新类。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
在其中定义fakeImage的值,已略去大面积的base64:
- 1
- 1
最后,在app.module.ts里导入自定义的mock文件
并在providers覆盖原始的Camera类:
- 1
- 1
- 1
- 2
- 3
- 1
- 2
- 3
做完上述的工序,按照camera插件的调用方法试试,已经可以用浏览器使用camera插件了(之前是只能在真机),只不过拿到的是假数据而不是真的打开了相机。
仿制插件有啥用
上面关于Camera的示例代码展示了重写和仿制插件的方式。选择Ionic Native3.0或以上版本中任意一个可用的插件,导入它,然后提供一个经过自己重写的provider,它将会替代原来的本地实现而被调用。等到不用的时候,只要把app.module.ts中providers的那句代码删掉就可以了。
在自定义的provider里,可以提供自定义数据来做快速调试。比如说:
- 使用HTTP.get方法,返回测试的json串,用来解析赋值给前端控件
- 让BarcodeScanner.scan()返回测试的二维码数据
- 用BluetoothSerial实现一个模拟链接和数据传输系统
- 重写TouchID或者AndroidFingerprintAuth来实现iOS或者Android系统的指纹扫描识别
- Ionic2使用非ionic-native中的cordova插件的方法
- Ionic2使用非ionic-native中的cordova插件的方法
- ionic和ionic2 环境下编写自定义cordova插件
- ionic2 ts中使用cordova插件
- Ionic学习笔记七 Cordova 文件下载插件的使用
- ionic 热更新插件cordova-hot-code-push的使用
- ionic2 @ionic-native/camera应用
- angularjs ionic 如何使用Cordova 插件
- Ionic + Angularjs + Cordova(Ionic2环境搭建)
- ionic插件基础(三)——插件原理及cordova相机插件的使用
- ionic cordova 插件 资源
- ionic cordova keyboard插件
- phonegap cordova ionic插件
- ionic2 @ionic-native/camera-preview应用
- ionic2 @ionic-native/barcode-scanner应用
- Ionic+cordova框架使用的一些问题
- ionic -- 使用cordova的插件实现分享到QQ、微博、微信
- Cordova+Angularjs+Ionic混合开发入门篇(四)—— 插件的简单使用
- Android 多线程-----AsyncTask详解
- jsp打印九九乘法表
- Okhttp3 Interceptor
- JavaScript函数小记
- 如何判断 js 中的数据类型
- Ionic2使用非ionic-native中的cordova插件的方法
- centos7.2RPM安装mysql5.6
- Opencv JNI Android Camera 效率分析
- java之代理模式
- 一步一步写Makefile(3):伪目标,静态规则,shell命令和去回显,嵌套执行Makefile
- 这种关于进制的C语言题目,到底如何解答?
- Ubuntu 安装openCV2.4.9 和cuda时 错误及对应解决方案
- Linux/CentOS Redis安装与开机启动配置
- js数组基本方法总结