ionic4调用手机内部App

ionic4调用手机内部App

ionic3升级为ionic4,有许多地方发生了重大的改变,由于现在ionic4还在处于bate版本,所以有很多地方还没有进行完善,现在就来讲一下在ionic4-bate版本中如何进行手机内部APP的调用功能。

一、安装可检测 APP 是否安装的插件

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

注意:@ionic-native/app-availability的版本一定要是5.0.0-beta.15版本的(你可以在package.json中手动的将版本改为"5.0.0-beta.15",因为我们要让安装的app-availability包含ngx这个文件夹)
这里写图片描述

二、安装可调用打开手机内部APP的插件

cordova plugin add https://github.com/lampaa/com.lampa.startapp.git

三、引入到 app.module.ts

import { AppAvailability } from '@ionic-native/app-availability/ngx';
···
providers: [
	...AppAvailability
]

四、以 home.ts 为例

import { Platform } from '@ionic/angular';
import { AppAvailability } from '@ionic-native/appavailability/ngx';
declare let startApp: any;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
})

export class Home {
  scheme = '';
  plat: any;
  constructor(
    private appAvailability: AppAvailability,
    private platform: Platform
  ) { }

  checkApp() {
    if (this.platform.is('ios')) {
      this.scheme = 'iosamap://';  /* 高德地图的Scheme URL */
      this.plat = 'ios';
    } else if (this.platform.is('android')) {
      this.scheme = 'com.autonavi.minimap';    /* 高德地图的安卓包名 */
      this.plat = 'and';
    }
    const uri = this.plat === 'ios' ? ('iosamap://navi?sourceApplication=&lat=116.279153&lon=39.998946&dev=0&style=2') : ('amapuri://route/plan/?dlat116.279153&dlon=39.998946&dname=北京市海淀区&dev=0&t=0');

    this.appAvailability.check(this.scheme)
      .then(
        (yes: boolean) => {   /* 已安装,打开高德地图 */
          let sApp;
          if (this.plat === 'ios') {
            sApp = startApp.set(encodeURI(uri));
          } else {
            sApp = startApp.set({ /* params */
              "action": "ACTION_VIEW",
              "category": "CATEGORY_DEFAULT",
              "type": "text/css",
              "package": name,
              "uri": uri,
              "flags": ["FLAG_ACTIVITY_CLEAR_TOP", "FLAG_ACTIVITY_CLEAR_TASK"],
              "intentstart": "startActivity"
            });
          }
          sApp.start(function () { /* success */
            console.log("OK");
          }, function (error) { /* fail */
            console.log(error);
          });
        },
        (no: boolean) => {
          /* 未安装,请编写提示代码或跳转下载 */
        }
      );
  }
}

五、ios配置白名单
由于iOS的限制,iOS9之后app想调起第三方应用,必须在自己app设置中配置白名单。
在进行cordova build ios --prod之后,寻找Info.plist文件配置

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>iosamap</string> 
</array>

在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
要在 Ionic React 中调用原生指纹功能,可以使用 Capacitor 插件,该插件提供了访问设备本地功能的 API。 以下是一个示例,展示了如何使用 Capacitor 插件在 Ionic React 中调用原生指纹功能: 首先,需要安装 Capacitor 插件: ``` npm install @capacitor/core @capacitor/fingerprint ``` 然后,在 `src/index.tsx` 文件中初始化 Capacitor: ```javascript import { Capacitor } from '@capacitor/core'; if (Capacitor.isPluginAvailable('Fingerprint')) { // 插件可用 } else { // 插件不可用 } ``` 接下来,在需要调用指纹功能的组件中,使用 Capacitor 插件的 `Fingerprint` API: ```javascript import { Plugins } from '@capacitor/core'; import React, { useState } from 'react'; const { Fingerprint } = Plugins; function App() { const [message, setMessage] = useState(''); async function authenticate() { try { const result = await Fingerprint.authenticate(); if (result.success) { setMessage('Authentication successful'); } else { setMessage('Authentication failed'); } } catch (error) { console.error(error); setMessage('Authentication failed'); } } return ( <div> <button onClick={authenticate}>Authenticate</button> <p>{message}</p> </div> ); } export default App; ``` 在这个示例中,我们使用 Capacitor 的 Fingerprint API 来调用原生指纹功能。在 authenticate 方法中,我们调用 Fingerprint.authenticate 方法,并根据返回的结果更新 message 状态。 请注意,使用 Capacitor 插件需要进行一些配置,如在 `android/app/src/main/AndroidManifest.xml` 文件中添加权限声明等。具体细节可以参考 Capacitor 的官方文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值