接到個新的需求,需要與其他app之間實現(xiàn)單點登陸,需要用到應用跳轉,Google了下找到了 ionic 可以使用的 url scheme 插件
https://github.com/EddyVerbruggen/Custom-URL-scheme.git

一、在使用前先簡單了解下什么是urlcheme:

簡單的說，URL Scheme就是一個可以讓app相互之間可以跳轉的協(xié)議。列如：微信的 URL Scheme 就是 weixin://，在瀏覽器中打開 weixin://scanqrcode 可以跳轉到微信的掃一掃功能。
常見的一些url scheme,比如; sinaweibo:// , youku://, mqq:// ,weixin:// ,taobao:// , baidumap://等等,我們可以通過這些url 來直接打開應用以及調用一些相應的開放的功能。

二、插件使用:

1. 創(chuàng)建一個demo工程

ionic start targetProject

2.創(chuàng)建成功后添加平臺

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 打開當前應用

那么現(xiàn)在問題來了,比如我想通過另外一個ionic項目打開該工程
同樣的我們創(chuàng)建一個新工程schemeTest,添加平臺,這里就不再重復說明
實現(xiàn)打開應用的步驟有兩個
1.添加代碼,打開工程下頁面,比如tab/tab1.page.html頁面

image.png

在該文件中添加如下代碼:

<button onclick="window.open('mytargetapp://somepath?foo=bar', '_system')">打開應用</button>
<a href="mytargetapp://somepath?foo=bar">打開應用</a>

這里采用了兩種方式,一種是使用a標簽,通過href屬性來打開,另外一種方式是添加click時間,增加js代碼來實現(xiàn)打開,兩種方式都可以實現(xiàn)

2.找到工程下的config.xml文件并打開該文件
添加如下代碼:

<allow-intent href="mytargetapp:*" />

效果圖

至此就可以通過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);
  }

這樣我們就可以根據接收到的參數,做出相應的處理了