如何根据包名设置两个不同的启动页（Splash Screen）？

首先得明确你说的「启动页」是原生系统级的Splash Screen（应用刚启动时系统展示的那个），还是WebView加载完成后显示的第一个页面（也就是你代码里的rootPage），这两种的实现方式完全不同：

一、如果是原生系统级启动页 #

原生Splash是在WebView开始加载前就由系统渲染的，根本轮不到JS代码控制，所以必须在原生项目里按包名区分配置：

• Android端：用Product Flavor来区分不同包名的版本，给每个Flavor创建独立的资源目录，放入对应的Splash图片，然后在各自的styles.xml里配置Splash主题。比如你给app.business包名的Flavor单独设置@drawable/splash_business作为启动图。
• iOS端：在Xcode里创建不同的Target，每个Target对应不同的包名，然后给每个Target配置专属的LaunchScreen.storyboard或者Launch Image资源。

二、如果是Web加载后的初始页面（你的代码里的rootPage） #

你当前的思路是对的，但可以优化逻辑避免闪屏，或者换更高效的构建时方案：

优化运行时判断逻辑 #

你现在的代码是先隐藏Splash再设置rootPage，这可能导致短暂的空白。可以调整顺序，先确定rootPage再隐藏Splash：

platform.ready().then(async () => { 
  translate.setDefaultLang('az'); 
  translate.use('az'); 
  statusBar.hide(); 
  localStorage.setItem('companyKey', this.companyToken); 

  // 先获取包名并确定初始页面
  const packageName = await this.appVersion.getPackageName();
  if(packageName.indexOf('app.business') > -1) {
    this.rootPage = LoginPage;
  } else if(localStorage.getItem('selectedTags')) {
    this.rootPage = LandingPage;
  } else {
    // 别忘了加默认页面的 fallback 逻辑
    this.rootPage = DefaultPage;
  }

  // 页面确定后再隐藏启动页
  splashScreen.hide();
});

更高效的构建时方案（推荐） #

如果你的不同包名版本是分开构建的，可以用Ionic的环境变量提前指定启动页，不用在运行时判断：

1. 在src/environments下创建多份环境文件，比如：
   • environment.business.ts：

     export const environment = {
       production: true,
       defaultRootPage: LoginPage
     };
     

   • environment.normal.ts：

     export const environment = {
       production: true,
       defaultRootPage: LandingPage
     };
     

2. 构建时指定对应的环境：

   # 构建 business 版本（包名app.business）
   ionic build --prod --configuration=business
   # 构建普通版本
   ionic build --prod --configuration=normal
   

3. 在app.component.ts里直接用环境变量设置rootPage：

   import { environment } from '../environments/environment';
   
   // ...
   platform.ready().then(() => {
     // 其他初始化逻辑
     this.rootPage = environment.defaultRootPage;
     splashScreen.hide();
   });
   

这种方式不需要在运行时异步获取包名，启动速度更快，也更可靠。

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