ionic-framework - 单击电子邮件链接时将用户发送到移动应用程序上的页面

Question

我刚刚启动了 Ionic 2 移动应用。

我正在设置一个更新密码流程，用户可以输入他们的电子邮件，单击“发送密码更新电子邮件”按钮，然后通过电子邮件向他们发送一个链接。他们可以单击该链接，进入可以更新密码的页面。

如何在电子邮件中向他们发送一个链接，单击该链接将打开应用程序并将他们带到特定页面？

更复杂的是我还有一个网络应用程序。因此，如果我向他们发送电子邮件，我是否应该显示在网站上更新密码 和在移动应用上更新密码 链接？或者我应该添加一个网站链接？

Answer 1

为了从链接打开移动应用程序，您需要集成一个名为cordova-plugin-customurlscheme的cordova插件。 。使用此插件，您可以注册您的应用程序特有的自定义 URL“协议(protocol)”(例如 myAwesomeApp://register?token=123)。使用您的自定义 url 安装插件后，单击以 myAwesomeApp://开头的任何链接将打开您的应用程序，并触发一个挂接到名为 handleOpenUrl 的窗口对象上的函数，该函数接受 url 作为参数。在里面你可以根据 url 参数进行路由。

let self = this;
(<any>window).handleOpenURL = function handleOpenURL(url) {
  setTimeout(() => {
    if (url && url.indexOf('\register') !== -1) {
      let token = URLHelper.getParameterByName(url, 'token');
      self.setAsRoot(ConfirmEmailPage, { activationToken: token });
    }
  }, 0);
};

至于处理您的网络应用程序，您可以执行以下操作(这就是我目前正在做的事情):

在线托管一个页面(例如 www.myAwesomeWebsite.com/register?token=123)，用于检查用户是否来自移动设备(更具体地说是 iOS 或 Android)。如果是这样，页面加载会将它们重定向到您的 myAwesomeApp://register?token=123 链接，并有一个按钮显示从应用程序商店安装应用程序，并带有指向您的移动应用程序的链接。如果用户有该应用程序，该应用程序将通过重定向打开，如果没有，他们将收到一条警告，指出无法找到链接或其他内容，单击“确定”后，他们将看到“从应用程序商店安装应用程序”按钮。如果用户不是来自移动设备，只需将他们重定向到您的网络应用 myAwesomeWebApp.com/register?token=123。

另一种选择是使用第三方服务进行深度链接，例如 branch

希望有帮助。

编辑:自从我发布这个答案以来，Ionic 团队已经推出了他们自己的深度链接插件，这简化了应用程序内部的一些连接。他们的详细博客文章可以找到here 。本质上你安装了他们的插件:

cordova plugin add ionic-plugin-deeplinks --variable URL_SCHEME=ionichats --variable DEEPLINK_SCHEME=https --variable DEEPLINK_HOST=ionic-hats.com

然后像这样 Hook 它:

import {Component, ViewChild} from '@angular/core';
import {Platform, Nav, ionicBootstrap} from 'ionic-angular';
import {Deeplinks} from 'ionic-native';

import {AboutPage} from './pages/about/about';
import {HatDetailPage} from './pages/hat/hat';

@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
})
class MyApp {
  @ViewChild(Nav) nav:Nav;

  constructor(private _platform: Platform) {}

  ngAfterViewInit() {
    this._platform.ready().then(() => {
      Deeplinks.routeWithNavController(this.nav, {
        '/about-us': AboutPage,
        '/hats/:hatId': HatDetailPage
      });
    });
  }
});

ionicBootstrap(MyApp);

请注意，虽然这稍微改进了插件接口(interface)，但它并没有改变您必须使用其他机制来处理与网络应用程序结合的深层链接的事实。