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

2023年8月4日 220次阅读

我刚刚开始使用Ionic 2移动应用程序.

我正在设置更新密码过程,用户可以在其中输入电子邮件,单击“发送密码更新电子邮件”按钮,然后通过电子邮件向他们发送链接.他们可以单击该链接,将他们带到可以更新密码的页面.

如何在电子邮件中向他们发送链接,点击该链接会打开应用并将其带到特定页面？

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

最佳答案 要从链接打开移动应用程序,您需要集成一个名为
cordova-plugin-customurlscheme的cordova插件.使用此插件,您可以注册一个应用程序独有的自定义URL“协议”(例如myAwesomeApp：// register？token = 123).使用自定义URL安装插件后,单击以myAwesomeApp开头的任何链接：//将打开您的应用程序,并触发挂钩在名为handleOpenUrl的窗口对象上的函数,该函数接受url作为param.在那里你可以做你的路由,取决于url param.

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

然后像这样挂钩：

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);

请注意,尽管这会改善插件的接口,但它并没有改变您必须使用其他机制来处理与Web应用程序结合的深层链接的事实.

点赞