IONIC插件的使用

来源:互联网 发布:js库有哪些 编辑:程序博客网 时间:2024/05/16 19:02

IONIC插件的调用

ionic作为前端代码,正常情况下是没有办法调用原生控件的,它的实现原理就android代码来说是把应用当成浏览器,提供一个webview用来显示前端的界面,而相机,蓝牙等功能是无法直接使用的。当然无法直接使用就代表着有另外的方法可以曲线救国。这里就要介绍cordova插件来解决这个问题。简单来说,cordova插件的作用是,为前端代码提供入口用以调用原生的代码,相当于转换器的作用。其中ionic本身已经提供了大量的cordova插件,可以在官网中直接输入你想要的功能的关键词进行查找比如照相机功能你可以输入“camera”,当然你也可以定制化你的插件,这个实现也不难,具体可以在cordova官网中学习,这个不是本次的主要内容,所以就不详细展开了。

1.导入插件

导入官网插件直接按照官网例子就可以。
导入自定义的插件,使用命令:ionic cordova plugin add 插件位置

2.插件使用

这里写图片描述

如果报 Runtime Error Cannot find module “ionic-native” IONIC 2 的错误
参考: http://www.zyyapp.com/post/315.html

在项目目录下输入命令: cnpm install ionic-native –save
这里写图片描述

调用自定义的插件, 其实很简单 , 网上到处都是一样的但都不能用

这里写图片描述

ionic3导入插件还需要package.json这个文件, 不然会报错, 导入语句也变成了 ionic cordova plugin add 插件位置, package.json 就是一个配置文件, 里面是该插件的一些配置信息

这里提供一份基础的配置文件仅供参考,其实可以去github上面进行查找,看看他人写的插件,会学到很多。

{  "name": "phonegap-plugin-compress_images",  "version": "1.0.0",  "description": "Compress Image Return Save Image Path",  "keywords": [    "cordova",    "phonegap",    "ecosystem:cordova",    "cordova-android",    "cordova-ios",    "android",    "ios",    "ionic",    "camera",    "cam",    "camera-preview",    "preview"  ],  "author": {    "name": "Francis",    "url": "solidfoundationwebdev.com"  },  "license": "Apache 2.0",  "dependencies": {    "cordova": "*"  },  "devDependencies": {}}
原创粉丝点击