ionic4 中使用 url scheme 插件

接到个新的需求,需要与其他app之间实现单点登陆,需要用到应用跳转,Google了下找到了 ionic 可以使用的 url scheme 插件
https://github.com/EddyVerbruggen/Custom-URL-scheme.git

一、在使用前先简单了解下什么是urlcheme:

简单的说，URL Scheme就是一个可以让app相互之间可以跳转的协议。列如：微信的 URL Scheme 就是 weixin://，在浏览器中打开 weixin://scanqrcode 可以跳转到微信的扫一扫功能。
常见的一些url scheme,比如; sinaweibo:// , youku://, mqq:// ,weixin:// ,taobao:// , baidumap://等等,我们可以通过这些url 来直接打开应用以及调用一些相应的开放的功能。

二、插件使用:

1. 创建一个demo工程

ionic start targetProject

2.创建成功后添加平台

ionic cordova platform add android
ionic cordova platform add ios

3.添加插件

ionic cordova plugin add cordova-plugin-customurlscheme --variable URL_SCHEME=mytargetapp

插件安装完成后,就可以通过url scheme 来打开该app了。

三、使用其他ionic app 打开当前应用

那么现在问题来了,比如我想通过另外一个ionic项目打开该工程
同样的我们创建一个新工程schemeTest,添加平台,这里就不再重复说明
实现打开应用的步骤有两个
1.添加代码,打开工程下页面,比如tab/tab1.page.html页面

image.png

在该文件中添加如下代码:

打开应用
打开应用

这里采用了两种方式,一种是使用a标签,通过href属性来打开,另外一种方式是添加click时间,增加js代码来实现打开,两种方式都可以实现

2.找到工程下的config.xml文件并打开该文件
添加如下代码:

效果图

href中的值,根据要打开的目标app来定义,比如要打开微信,那么值就是
weixin:*

至此就可以通过schemeTest app来打开 targetProject app了

四、最后还有遗留了一个问题,就是targetProject 要如何才能知道是通过其他app 的 url scheme打开它的?

这个也比较简单,打开targetProject工程下的app.component.ts文件
加入如下代码:

constructor() {
    // 用于接收url scheme传入的参数
    (window as any).handleOpenURL = (url: string) => {
      setTimeout(() => {
        this.handleOpenUrl(url);
      }, 0);
    };
  }

  /**
   * 处理url scheme 的参数
   * @author LiQun
   * @date 2019-07-25
   * @param url urlscheme 链接参数,如 mytargetapp://somepath?foo=bar
   */
  private handleOpenUrl(url: string) {
    console.log('url', url);
  }

这样我们就可以根据接收到的参数,做出相应的处理了