IONIC插件的使用

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": {}
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值