ionic4 中使用 url scheme 插件 点击链接打开app

ionic4 中使用 url scheme 插件 点击链接打开app

接到个新的需求,需要通过url打开应用,Google了下找到了 ionic 可以使用的 url scheme 插件

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

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

二、插件使用:

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

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

三、打开当前应用

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

如果需要APP打开当前应用，需要在config.xml里增加 <allow-intent href="mytargetapp:*" /> href中的值,根据要打开的目标app来定义,比如要打开微信,那么值就是 weixin:*

四、还有一个问题,就是targetProject 要如何才能知道是通过其他app 的 url scheme打开它的?或者说如果获取往app传的参数？

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) {
  var theRequest = new Object();   
       if (url.indexOf("?") != -1) {   
          var str = url.substr(1);   
          strs = str.split("&");   
          for(var i = 0; i < strs.length; i ++) {   
             theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);   
          }   
       }   
       return theRequest;   
  }