通过scheme唤醒传参ionic项目

我不是女神ヾ 2022-12-31 04:22 141阅读 0赞

在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)
      }