ionic4调用手机内部App

最新推荐文章于 2020-10-29 16:14:42 发布

原创最新推荐文章于 2020-10-29 16:14:42 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ionic4

ionic 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了在Ionic4-bate版本中实现调用手机内部App的功能，包括安装检测App是否安装的插件和调用打开手机内部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>

在这里插入图片描述