Ionic应用：通过InAppBrowser打开Twitter链接，优先调起本地已装Twitter应用

嘿，我来帮你搞定这两个问题——先修复那个addEventListener的报错，再实现点击Twitter链接优先打开本地APP的逻辑：

第一步：先搞定TypeError: browser.addEventListener is not a function报错 #

你遇到这个问题是因为Ionic封装的InAppBrowser实例并不支持原生的addEventListener方法，它用的是RxJS风格的on()方法配合subscribe()来监听事件。把你的代码改成这样就好：

export class HomePage { 
  constructor(
    public navCtrl: NavController, 
    private inAppBrowser: InAppBrowser, 
    public platform: Platform, 
    private appAvailability: AppAvailability
  ) { 
    const options: InAppBrowserOptions = { 
      toolbar: 'no', 
      location: 'no', 
      zoom: 'no' 
    } 
    this.platform.ready().then( () => { 
      const browser = this.inAppBrowser.create("https://awebsitewithfblink", '_blank', options); 
      // 替换掉原来的addEventListener，用Ionic的API
      browser.on('loadstart').subscribe(event => {
        console.log(`${event.type} - ${event.url}`);
        // 在这里加入Twitter链接的处理逻辑
        this.handleTwitterRedirect(event.url);
      });
    }) 
  } 
}

第二步：实现Twitter链接跳转至本地APP #

要实现“已安装Twitter就打开APP，否则用浏览器打开”的逻辑，我们需要结合AppAvailability插件和Twitter的自定义Scheme：

1. 先确认依赖 #

确保你已经安装了AppAvailability插件，没装的话运行这两条命令：

ionic cordova plugin add cordova-plugin-appavailability
npm install @ionic-native/app-availability

2. 编写链接处理方法 #

在你的HomePage类里加一个方法，用来检测当前加载的URL是否是Twitter用户主页，然后判断是否要跳转至APP：

private handleTwitterRedirect(url: string) {
  // 匹配标准的Twitter用户主页链接，比如https://twitter.com/xxx或者https://www.twitter.com/xxx
  const twitterLinkPattern = /https?:\/\/(www\.)?twitter\.com\/([a-zA-Z0-9_]+)/;
  const matchResult = url.match(twitterLinkPattern);

  if (matchResult) {
    const twitterUsername = matchResult[2];
    // 安卓上打开Twitter用户主页的Scheme
    const twitterAndroidScheme = `twitter://user?screen_name=${twitterUsername}`;
    // 安卓Twitter应用的包名，用来检测是否安装
    const twitterAndroidPackage = 'com.twitter.android';

    this.platform.ready().then(() => {
      if (this.platform.is('android')) {
        // 检查手机是否安装了Twitter
        this.appAvailability.check(twitterAndroidPackage)
          .then(() => {
            // 已安装，用系统打开Scheme（会直接跳转到TwitterAPP）
            this.inAppBrowser.create(twitterAndroidScheme, '_system');
            // 阻止原链接在InAppBrowser中加载
            return false;
          }, () => {
            // 未安装，继续用InAppBrowser打开原网页链接
            console.log('Twitter APP未安装，将在浏览器中打开');
          });
      }
      // 如果需要支持iOS，这里可以加iOS的处理逻辑，iOS的Scheme是twitter://，包名检测用'twitter://'
    });
  }
}

3. 关键细节说明 #

• 用_system参数打开Scheme链接，会让系统自动调用对应的APP（如果存在）
• 我们在loadstart事件中拦截Twitter链接，这样可以在原链接加载前就跳转到APP，提升用户体验
• 如果用户没装Twitter，就会继续用InAppBrowser打开原网页链接，不会影响正常使用

内容的提问来源于stack exchange，提问作者t3ch3