欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  互联网

通过scheme唤醒传参ionic项目

程序员文章站 2022-03-19 16:10:07
在Ionic项目开发过程中,有时候会对其他app项目进行交互的。本文目的是使用url scheme解决下面2种场景:通过ionic应用唤醒并传参给第三方的app如淘宝如微信等。或者第三方app或者基本ionic开发的app,唤醒自己开发的ionic应用场景1方法1:通过ionic应用唤醒并传参给第三方的app,如淘宝、微信、ionic应用等首先定义2个APP自己的应用:APP-MyApp其他的应用:APP-OtherApp// 安装相关插件 ionic cordova plugin...

在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