ionic3学习笔记3（native:本机插件）

最新推荐文章于 2024-05-30 09:32:53 发布

土豆逆袭la

最新推荐文章于 2024-05-30 09:32:53 发布

阅读量1.2k

点赞数

分类专栏： ionic-学习

本文链接：https://blog.csdn.net/kassiaaaa/article/details/78354241

版权

ionic-学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

（摘自官网：）
Ionic Native是Cordova / PhoneGap插件的TypeScript包装器，可以让您的Ionic移动应用程序轻松添加任何您需要的本机功能。

Promise或Observable：承诺和可观察

Ionic Native在Promise或Observable中包装插件回调，为所有插件提供通用接口，并确保本机事件触发角度更改检测。

import { Geolocation } from '@ionic-native/geolocation';
import { Platform } from 'ionic-angular';

class MyComponentOrService {

  constructor(private platform: Platform, private geolocation: Geolocation) {

    platform.ready().then(() => {

      // get current position
      geolocation.getCurrentPosition().then(pos => {
        console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude);
      });

      const watch = geolocation.watchPosition().subscribe(pos => {
        console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude);
      });

      // to stop watching
      watch.unsubscribe();

    });

  }

}

安装：（到自己的运用程序）

npm install @ionic-native/core –save

（默认情况下，每个Ionic应用程序都会包含Ionic Native核心软件包。）

用法：
1.安装所需的插件

2.为要添加的每个插件安装Ionic Native包。

例如，如果要安装Camera插件，则a。需要运行以下命令：
npm install @ionic-native/camera –save

b。然后再使用Cordova或Ionic CLI安装插件。

例如：

ionic cordova plugin add cordova-plugin-camera

所有包名称都记录在插件的文档中。建议按照每个插件文档的安装说明进行操作，因为某些插件需要额外的步骤来完全安装。

c。将插件添加到应用程序的模块中ngmodule

...

import { Camera } from '@ionic-native/camera';

...

@NgModule({
  ...

  providers: [
    ...
    Camera
    ...
  ]
  ...
})
export class AppModule { }

在浏览器中使用本地插件

onic Native 3.0现在允许开发人员通过简单的覆盖机制来模拟和使用浏览器中的本机插件，从而可以方便地从传感器提供测试数据，或者访问纯native API（如HealthKit）。

现在绝大多数的离子应用程序完全可以在浏览器中构建，而无需部署到设备或者模拟器。（牛逼的开发速度闻所未闻，哈哈哈）

用法：
让我们试试嘲笑Camera插件来返回图像，而不是使用在设备上下文之外可能不可用的本机摄像头

1.在我们的src/app/app.module.ts文件中导入类

import { Camera } from '@ionic-native/camera';

2.创建一个Camera使用模拟实现扩展类的新类：

class CameraMock extends Camera {
  getPicture(options) {
    return new Promise((resolve, reject) => {
      resolve("BASE_64_ENCODED_DATA_GOES_HERE");
    })
  }
}

3.覆盖Camera我们providers这个模块的上一个类

providers: [
  { provide: Camera, useClass: CameraMock }
]

一:3D触摸
1。安装：
（1）安装Cordova和Ionic Native插件：

$ ionic cordova plugin add cordova-plugin-3dtouch
$ npm install --save @ionic-native/three-dee-touch

（2）将此插件添加到应用程序的模块中（import和providers）

2.支持平台：ios
3.实例见官网

二:行动表

ActionSheet插件显示用户可以选择的选项的本机列表。

1.安装：
（1）安装Cordova和Ionic Native插件：

$ ionic cordova plugin add cordova-plugin-actionsheet
$ npm install --save @ionic-native/action-sheet

（2）
将此插件添加到应用程序的模块中

2.支持平台：
Android的
浏览器
iOS版
视窗
Windows Phone 8

3.实例见官网

三:AdMob免费:移动电话广告市场

1.安装：
（1）安装Cordova和Ionic Native插件：

$ ionic cordova plugin add cordova-plugin-admob-free
$ npm install --save @ionic-native/admob-free

（2）
将此插件添加到应用程序的模块中

2.支持平台：
Android的
iOS版

3.实例见官网

四:AdMob免费:移动电话广告市场(专业版需要付费)

$ ionic cordova plugin add cordova-plugin-admobpro
$ npm install --save @ionic-native/admob-pro

五:支付宝
1.安装Cordova和Ionic Native插件：

$ ionic cordova plugin add cordova-alipay-base --variable APP_ID=your_app_id
$ npm install --save @ionic-native/alipay

2.将此插件添加到应用程序的模块中
支持平台

六:Android指纹认证
此插件将打开一个本地对话片段，提示用户使用其指纹进行身份验证。如果设备具有安全的锁定屏幕（模式，PIN或密码），则用户可以选择使用该方法进行身份验证作为备份。
1.安装Cordova和Ionic Native插件：

$ ionic cordova plugin add cordova-plugin-android-fingerprint-auth
$ npm install --save @ionic-native/android-fingerprint-auth

2.将此插件添加到应用程序的模块中

七:Android全屏

1.安装Cordova和Ionic Native插件：

使用Android 4.0+，您可以使用“精简模式”中的真实全屏，您在YouTube等应用程序中看到的方式，将应用程序扩展到屏幕边缘，隐藏状态和导航栏，直到用户下一步进行交互。这非常适合视频或剪辑场景内容。

然而，在Android 4.4+中，您现在可以输入真正的全屏幕，完全交互式的沉浸式模式。

$ ionic cordova plugin add cordova-plugin-fullscreen
$ npm install --save @ionic-native/android-full-screen

2.将此插件添加到应用程序的模块中

八:Android权限

1.安装Cordova和Ionic Native插件：

支持Android新的权限检查机制。

$ ionic cordova plugin add cordova-plugin-android-permissions
$ npm install --save @ionic-native/android-permissions

2.将此插件添加到应用程序的模块中

九:Android权限

1.安装Cordova和Ionic Native插件：

支持Android新的权限检查机制。

$ ionic cordova plugin add cordova-plugin-android-permissions
$ npm install --save @ionic-native/android-permissions

2.将此插件添加到应用程序的模块中

九:应用可用性
检查用户设备上是否安装了应用程序。他需要iOS上的URI方案（例如twitter：//）或Android上的软件包名称（例如com.twitter.android）。

1、安装

（1）安装Cordova和Ionic Native插件：

 $ ionic cordova plugin add cordova-plugin-appavailability
$ npm install --save @ionic-native/app-availability

（2）.将此插件添加到应用程序的模块中

以下省略安装指令：上官网

九:应用程序最小化
用于最小化Android设备上的应用程序

十:应用程式偏好：AppPreferences
允许您读取和写入应用程序首选项
支持平台：
Android的
黑莓10
浏览器
iOS版
MACOS
Windows 8
Windows Phone

十一：应用率：AppRate
AppRate插件可以轻松提示用户对您的应用进行评分，无论是现在还是以后，甚至永远不要。

十二：应用程式更新

这个插件可以自动更新android。

您应该首先在服务器上托管一个XML文件，其中包含以下数据：

<update>
    <version>302048</version>
    <name>APK Name</name>
    <url>https://your-remote-api.com/YourApp.apk</url>
</update>

然后使用以下代码：

import { AppUpdate } from '@ionic-native/app-update';

constructor(private appUpdate: AppUpdate) {

   const updateUrl = 'http://your-remote-api.com/update.xml';
   this.appUpdate.checkAppUpdate(updateUrl);

}

13.应用版本：AppVersion
从目标构建设置中读取您的应用的版本。