如何实现Ionic iOS应用根据启动入口跳转不同页面

问题背景 #

现有Ionic应用已编译为iOS应用并正常运行，配套创建了Widget。需要实现：

• 点击应用主图标：打开默认主页面
• 点击Widget：直接跳转到指定页面（如/login-control）

尝试通过自定义Capacitor插件实现路由，但未生效，现有代码如下：

TypeScript 代码 #

import { registerPlugin } from '@capacitor/core';
import { NavController } from '@ionic/angular';

// Define the interface
export interface MyServicePlugin {
  routeProfile(): any;
  routePage(): any;
}

// Implement the class
export class MyService implements MyServicePlugin {
  constructor(
    private navCtrl: NavController
  ) { }
  routeProfile() {
    console.log("sssssssss")
     return this.navCtrl.navigateForward(['/login-control']);
  }

  routePage() {
    console.log("ddddddd")
    return this.navCtrl.navigateForward(['/login-control']);
  }
}

const myService = registerPlugin<MyServicePlugin>('MyService');

export default myService;

Swift 代码 #

import Foundation
import Capacitor

@objc(MyService)
public class MyService: CAPPlugin {

@objc func routePage(_ call: CAPPluginCall) {

}

@objc func routeProfile(_ call: CAPPluginCall) {
        if let viewController = self.bridge?.viewController {
        //viewController.performSegue(withIdentifier: "/login-control", sender: nil)
            call.resolve([:])
        } else {
            call.reject("NavController is not available.")
        }
    }
}

运行结果 #

To Native ->  MyService routeProfile 134138947

问题分析 #

1. TS插件实现错误：registerPlugin用于注册原生插件，而非直接用TS类实现，且在原生插件调用时，Ionic的NavController可能未完成初始化，无法触发路由。
2. Swift侧未触发实际路由：仅resolve了插件调用，未将跳转指令传递给Web端的Ionic路由系统。
3. 未利用iOS启动参数机制：Widget打开应用时，应通过URL Scheme传递启动标识，而非通过插件主动调用路由。

正确解决方案 #

1. 配置应用URL Scheme #

在Xcode中为应用添加自定义URL Scheme，用于Widget跳转传参：

• 打开项目Info.plist，添加URL types数组
• 新增一项，设置：
  • URL Schemes：自定义标识（如myapp）
  • Role：选择Editor

2. 修改Widget跳转逻辑 #

在Widget代码中，设置点击时通过URL Scheme打开应用并携带参数：

// Widget的点击跳转配置示例
func widgetURL(context: Context) -> URL? {
    return URL(string: "myapp://open?source=widget")
}

3. Ionic端处理启动参数 #

在app.component.ts中监听应用启动事件，根据参数决定路由：
首先安装Capacitor App插件：

npm install @capacitor/app
npx cap sync

然后编写初始化逻辑：

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { App } from '@capacitor/app';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor(private router: Router) {
    this.initializeApp();
  }

  async initializeApp() {
    // 监听应用从后台被URL唤起的事件
    await App.addListener('appUrlOpen', (data) => {
      const url = new URL(data.url);
      const source = url.searchParams.get('source');
      
      if (source === 'widget') {
        this.router.navigate(['/login-control']);
      }
    });

    // 检查应用首次启动时的URL参数
    const launchUrl = await App.getLaunchUrl();
    if (launchUrl) {
      const url = new URL(launchUrl.url);
      const source = url.searchParams.get('source');
      if (source === 'widget') {
        this.router.navigate(['/login-control']);
      }
    }
  }
}

4. 清理无效代码 #

删除之前创建的MyService相关TS和Swift代码，无需保留自定义插件。

5. 测试验证 #

• 编译应用到iOS设备，添加Widget到桌面
• 点击Widget：应用启动后自动跳转到/login-control
• 点击主图标：应用打开默认主页面

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