搜索文档 /
入门 插件

科尔多瓦社区插件

Apache Cordova 是一个开源本机运行时,允许开发人员使用HTML,CSS和JavaScript构建本机移动应用程序。如同 电容器 ,Ibetway东盟体育apponic自己的本机运行时,Cordova允许开发人员使用插件系统访问本机设备功能,例如相机,键盘和地理位置。插件是少量的附加代码,可为本机组件提供JavaScript接口。它们允许您的应用程序使用本机设备功能以外的纯Web应用程序可用。

对于使用Cordova使用Ionic的开发betway东盟体育app人员,我们的团队为开源Cordova插件开发了一系列打字稿包装器,使其易于在任何离子应用程序中添加本地功能。看 betway东盟体育app离子本地

这些插件由离子社区提交和维护。betway东盟体育app尽管社区成员通常很快找到和解决问题,但某些插件可能无法正常运行。

对于需要专门的本地插件支持和SLA,持续维护和安全补丁的专业开发人员和团队,请探索我们的 高级选项 ,包括针对常见天然用例的插件支持和预建的解决方案。

这些文档适用于使用离子框架4.0.0及更大的应用程序。betway东盟体育app对于较旧的离子V3项betway东盟体育app目,请 看这里

电容器支持

除了科尔多瓦,离子本地人还可以与betway东盟体育app 电容器 ,Ibetway东盟体育apponic的官方本地运行时间。下面的基本用法。有关完整的详细信息, 请参阅电容器文档

用法

所有插件都有两个组件 - 本机代码(Cordova)和打字稿代码(离子本机)。betway东盟体育appCordova插件也包裹在 承诺 或者 可观察 为了提供通用的插件界面和现代化的开发方法。

使用 相机插件 例如,首先安装它:


               //安装Cordova插件
                $
               betway东盟体育app离子Cordova插件
                添加
               Cordova-Plugin-Camera //安装离子本地打字稿betway东盟体育app包装器
                $
                NPM
               
                安装
               @betway东盟体育appIonic-Native/Camera //安装离子本地核心库
                ((
               每个项目一次
                
                $
                NPM
               
                安装
               @betway东盟体育app离子本地/核心

有关完整的详细信息, 请参阅电容器文档


               //安装离子本地打字稿betway东盟体育app包装器
                $
                NPM
               
                安装
               @betway东盟体育appIonic-native/Camera //安装Cordova插件
                $
                NPM
               
                安装
               Cordova-Plugin-Camera //更新本机平台项目
                ((
               s
                
               包括新添加的插件
                $
               betway东盟体育app离子帽
                同步

接下来,开始使用插件,按照下面的各种框架使用选项。对于常见问题,请参阅 这里

Angular应用程序可以使用Cordova或电容器来构建本地移动应用程序。导入插件 @ngmodule 并将其添加到提供商列表中。对于Angular,导入路径应以 /ngx 。Angular的变化检测会自动处理。


              // app.module.ts
             
              进口
             
              {
             相机
              }
             
              
             
              '@betway东盟体育appionic-native/camera/ngx'
              ;
             
              ...
             @
              ngmodule
              ((
              {
             
              ...
             提供者
              
             
              [[
             
              ...
             相机
              ...
             
              这是给予的
             
              ...
             
              }
              
             
              出口
             
              班级
             
              AppModule
             
              {
             
              }

声明插件后,可以像其他任何服务一样将其导入和注入:


              // camera.service.ts
             
              进口
             
              {
             注射
              }
             
              
             
              “@Angular/Core”
              ;
             
              进口
             
              {
             相机
              ,,,,
             摄像头
              }
             
              
             
              “@betway东盟体育appionic-native/camera/ngx”
              ;
             @
              注射
              ((
              {
             提供
              
             
              “根”
              ,,,,
             
              }
              
             
              出口
             
              班级
             
              照相服务
             
              {
             
              构造函数
              ((
               私人的
              相机
               
              相机
              
             
              {
              }
             
              拍照片
              ((
              
             
              {
             
              const
             选项
              
             摄像头
              =
             
              {
             质量
              
             
              100
              ,,,,
             目标型
              
             
              这个
              
             相机
              
             目标型
              
              data_url
              ,,,,
             编码类型
              
             
              这个
              
             相机
              
             编码类型
              
              jpeg
              ,,,,
             媒体类型
              
             
              这个
              
             相机
              
             媒体类型
              
              图片
              ,,,,
             
              }
              ;
             
              这个
              
             相机
              
              getpicture
              ((
             选项
              
              
              然后
              ((
             
              ((
              成像
              
             
              =>
             
              {
             
              //用新照片做点什么
             
              }
              ,,,,
             
              ((
              
              
             
              =>
             
              {
             
              //处理错误
             
              安慰
              
              日志
              ((
              “相机问题:”
             
              +
             
              
              ;
             
              }
             
              
              ;
             
              }
             
              }

反应

React应用程序必须使用电容器来构建本机移动应用程序。但是,仍然可以使用betway东盟体育app离子天然(因此,Cordova插件)。

//安装核心库(每个项目一次)
npm install @betway东盟体育appionic-native/core
//安装离子本地打字稿betway东盟体育app包装器
npm install @betway东盟体育appionic-native/bar Code-scanner
//安装Cordova插件
NPM安装PhoneGap-Plugin-Barcodescanner
//更新本机平台项目以包括新添加的插件
betway东盟体育app离子帽同步

导入插件对象,然后使用其静态方法:


              进口
             
              {
             条形码扫描器
              }
             
              
             
              “@betway东盟体育appionic-native/bar Code-scanner”
              ;
             
              const
             TAB1
              
             反应
              
              FC
             
              =
             
              ((
              
             
              =>
             
              {
             
              const
             
              OpenSCanner
             
              =
             
              异步
             
              ((
              
             
              =>
             
              {
             
              const
             数据
              =
             
              等待
             条形码扫描器
              
              扫描
              ((
              
              ;
             
              安慰
              
              日志
              ((
               `
               条形码数据:
                $ {
               数据
                
               文本
                }
               `
              
              ;
             
              }
              ;
             
              返回
             
              ((
             
              <
             离子页
              >
             
              <
             离子
              >
             
              <
             Iontoolbar
              >
             
              <
             离子
              >
             标签
              1
              <
              /
             离子
              >
             
              <
              /
             Iontoolbar
              >
             
              <
              /
             离子
              >
             
              <
             离子体
              >
             
              <
             Ionbutton Onclick
              =
              {
             OpenSCanner
              }
              >
             扫描条形码
              <
              /
             Ionbutton
              >
             
              <
              /
             离子体
              >
             
              <
              /
             离子页
              >
             
              
              ;
             
              }
              ;

香草JavaScript

定位ES2015+和/或打字稿的Vanilla JavaScript应用程序可以使用Cordova或电容器来构建本机移动应用程序。要使用任何插件,请从适当的软件包导入类,并使用其静态方法:


              进口
             
              {
             相机
              }
             
              
             
              “@betway东盟体育appionic-native/摄影机”
              ;
             文档
              
              AddEventListener
              ((
              “ deviceready”
              ,,,,
             
              ((
              
             
              =>
             
              {
             相机
              
              getpicture
              ((
              
             
              
              然后
              ((
              ((
              数据
              
             
              =>
             安慰
              
              日志
              ((
              “拍照!”
              ,,,,
             数据
              
              
             
              
              抓住
              ((
              ((
              e
              
             
              =>
             安慰
              
              日志
              ((
              “拍照时发生错误”
              ,,,,
             e
              
              
              ;
             
              }
              
              ;
Baidu