通过scheme唤醒传参ionic项目

在Ionic项目开发过程中，有时候会对其他app项目进行交互的。

本文目的是使用url scheme解决下面2种场景：

1. 通过ionic应用唤醒并传参给第三方的app如淘宝如微信等。
2. 或者第三方app或者基本ionic开发的app，唤醒自己开发的ionic应用

场景1

方法1：通过ionic应用唤醒并传参给第三方的app，如淘宝、微信、ionic应用等

首先定义2个APP

• 自己的应用：APP-MyApp
• 其他的应用：APP-OtherApp

// 安装相关插件 ionic cordova plugin add com.lampa.startapp
// cordova-plugin-inappbrowser
// cordova-plugin-appavailability

	constructor(
		private platform: Platform,
		private iab: InAppBrowser,
		private appAvailability: AppAvailability,
	){
     }

	// 唤醒并传参给第三方的app步骤
	handleClick() {
     
		// 1. 首先使用 appAvailability检查是否存在 目标APP
		// 代码略...
		// 2. 如果存在目标APP，调用 iab/startApp进行url scheme唤醒
		this.openOtherAppByUriScheme(url)
	}

	/**
   * 通过uri scheme打开其他应用app
   * @param uriScheme uriScheme 唤醒的uri 如：taobao://item.taobao.com/item.htm?id=603056997271  或者 mydemoapp://abcde?id=603056&cd=en
   */
  openOtherAppByUriScheme(uriScheme: string, originParams?: any) {
     
    if (this.platform.is('ios')) {
     
      // ios应用唤醒其他app，切记在plist加上该应用的scheme白名单如 taobao
      this.iab.create(uriScheme, '_system');
    } else if (this.platform.is('android')) {
     
      // 通过scheme打开app
        let sApp = startApp.set({
     
          "uri": uriScheme
        }).start();
    }
  }

方法2：通过ionic应用唤醒并传参给第三方的app的第二种方法

1. 在config.xml中增加第三方app的scheme，如

<allow-intent href="taobao:*" />
<allow-intent href="mydemoapp:*" />

2. 在html页面中直接使用a标签进行跳转

<a href="taobao://item.taobao.com/item.htm?id=603056997271"> 打开淘宝app并跳转到指定商品a>
// 打开一个测试app并传递下面参数`TB1qimQIpXXXXXbXFXXSutbFXXX?id=603056&cd=en`
<a href="mydemoapp://TB1qimQIpXXXXXbXFXXSutbFXXX?id=603056&cd=en"> 打开另一个App，该App的scheme为mydemoappa>

场景2

被其他app以url scheme的方式唤醒自己的ionic应用

// 安装相关插件，定义自己的app scheme为: myapp://
// ionic cordova plugin add cordova-plugin-customurlscheme --variable URL_SCHEME=myapp

• 找到ionic项目中的app.component.ts。加上以下代码

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
     
    platform.ready().then(() => {
     
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();

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

    });
  }

  /**
   * 处理url scheme 的参数
   * @param url urlscheme 链接参数,如 guangxidemo://abcde?id=603056&cd=en
   */
  private handleOpenUrl(url: string) {
     
    console.log('url', url);
    alert(url)
  }