Question

我在实现DeepLinks时遇到问题。我可以通过myapp：//myapp.com/route之类的URL打开该应用程序。但是它无法处理路径。它只是打开程序。

我用：

打开它

 this.deeplinks.route({
  '/route': RoutePage
    }).subscribe(match => {
  // match.$route - the route we matched, which is the matched entry from the arguments to route()
  // match.$args - the args passed in the link
  // match.$link - the full link data
  console.log('Successfully matched route', match);
}, nomatch => {
  // nomatch.$link - the full link data
  console.error('Got a deeplink that didn\'t match', nomatch);
});

但是我没有收到任何控制台日志，并且路径为空，仅显示以下消息：

我的config.xml

 <plugin name="ionic-plugin-deeplinks" spec="^1.0.17">
    <variable name="URL_SCHEME" value="iskibris" />
    <variable name="DEEPLINK_SCHEME" value="https" />
    <variable name="DEEPLINK_HOST" value="iskibris.com" />
    <variable name="ANDROID_PATH_PREFIX" value="/" />
    <variable name="ANDROID_2_PATH_PREFIX" value="/" />
    <variable name="ANDROID_3_PATH_PREFIX" value="/" />
    <variable name="ANDROID_4_PATH_PREFIX" value="/" />
    <variable name="ANDROID_5_PATH_PREFIX" value="/" />
    <variable name="DEEPLINK_2_SCHEME" value="" />
    <variable name="DEEPLINK_2_HOST" value="" />
    <variable name="DEEPLINK_3_SCHEME" value="" />
    <variable name="DEEPLINK_3_HOST" value="" />
    <variable name="DEEPLINK_4_SCHEME" value="" />
    <variable name="DEEPLINK_4_HOST" value="" />
    <variable name="DEEPLINK_5_SCHEME" value="" />
    <variable name="DEEPLINK_5_HOST" value="" />
</plugin>

调用该应用程序的链接iskibris：//iskibris.com/route 有人可以帮我吗？

Answer 1

Ionic Deeplinks有两种打开另一页的方法。

路线
routeWithNavController

使用route方法时，应使用nav.push导航另一个页面。您可以在app.component.ts中实现它，如下所示。

  @ViewChild(Nav) nav:Nav;
  constructor(private deeplinks: Deeplinks) {
    platform.ready().then(() => {

       this.deeplinks.route({
         '/about': AboutPage
       }).subscribe(match => {
         this.nav.push(AboutPage);
       }, nomatch => {
         console.error('Got a deeplink that didn\'t match', nomatch);
      });

    });
  }
}

或者使用routeWithNavController引用NavController并处理实际的导航。 routeWithNavController方法可以在app.component.ts

内部实现

      @ViewChild(Nav) nav:Nav;

      constructor(private deeplinks: Deeplinks) {

        platform.ready().then(() => {

         this.deeplinks.routeWithNavController(this.nav, {
            '/about': AboutPage

          }).subscribe(match => {

            console.log('Successfully matched route', JSON.stringify(match, null, 2));
          }, nomatch => {

            console.error('Got a deeplink that didn\'t match', nomatch);
          });
        });  
 }

还有一件事，在您的config.xml中， <variable name="URL_SCHEME" value="iskibris" />应该更改为 <variable name="URL_SCHEME" value="myapp" />。

Answer 2

对我来说，奇怪的是，唯一有效的方法是使用 routeWithNavController 方法并在第二个参数上传递一个空对象。顺便说一下，我正在使用 Ionic 3 并在 iPhone 模拟器上进行测试。

以下是测试：

/**
 * Using the routeWithNavController method and passing an empty object on the second parameter
 * WORKS!!
 * Did open the app and fired the "match" callback with the info of the clicked link
 */
this.platform.ready().then(() => {
  this.deeplinks.routeWithNavController(this.nav, {
    // Nothing here. Empty object
  }).subscribe((match) => {
    alert('Match');
    alert(JSON.stringify(match));
  }, (nomatch) => {
    alert('No Match');
    alert(JSON.stringify(nomatch));
  });
});

以下示例无效。

/**
 * Using the routeWithNavController method and passing an object with a "what would be" route on the second parameter
 * DOESN`T WORK
 * Did open the app but didn't fire any of the callbacks. Neither "match" or "nomatch"
 */
this.platform.ready().then(() => {
  this.deeplinks.routeWithNavController(this.nav, {
    '/': {}
  }).subscribe((match) => {
    alert('Match');
    alert(JSON.stringify(match));
  }, (nomatch) => {
    alert('No Match');
    alert(JSON.stringify(nomatch));
  });
});

/**
 * Using the route method and passing an object empty object
 * DOESN'T WORK (kinda)
 * Did open the app and fired the nomatch callback (after all, no route specified)
 */
this.platform.ready().then(() => {
  this.deeplinks.route({
    // Nothing here. Empty object,
  }).subscribe((match) => {
    alert('Match');
    alert(JSON.stringify(match));
  },
  (nomatch) => {
    alert('No Match');
    alert(JSON.stringify(nomatch));
  });
});

/**
 * Using the route method and passing object with a "what would be" route on the second parameter
 * By the way, here I tried both links:
 * myapp://myapp.domain.com/
 * myapp://myapp.domain.com
 * DOESN`T WORK
 * Did open the app but didn't fire any of the callbacks. Neither "match" or "nomatch"
 */
this.platform.ready().then(() => {
  this.deeplinks.route({
    '/': {},
  }).subscribe((match) => {
    alert('Match');
    alert(JSON.stringify(match));
  },
  (nomatch) => {
    alert('No Match');
    alert(JSON.stringify(nomatch));
  });
});

因为只有第一个有效，所以我必须自己处理匹配对象数据并进行路由，如下所示：

this.deeplinks.routeWithNavController(this.nav, {}).subscribe((match) => {
  if (match.$link.path == "/list") {
    this.nav.setRoot(ListPage);
  }
}, (nomatch) => {});

这是我的工作 app.component.ts 的完整代码，带有深层链接：

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { Deeplinks } from '@ionic-native/deeplinks';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = HomePage;

  pages: Array<{title: string, component: any}>;

  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, public deeplinks: Deeplinks) {
    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Home', component: HomePage },
      { title: 'List', component: ListPage }
    ];
  }

  initializeApp() {
    this.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.
      this.statusBar.styleDefault();
      this.splashScreen.hide();

      this.deeplinks.routeWithNavController(this.nav, {}).subscribe((match) => {
        if (match.$link.path == "/list") {
          this.nav.setRoot(ListPage);
        }
      }, (nomatch) => {});
    });
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }
}

深度链接给出了空路径

2 个答案: