通过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:*" />

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

// 打开淘宝app并跳转到指定商品
<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为mydemoapp</a>

场景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)
  }

本文地址：https://blog.csdn.net/aa390481978/article/details/111844880