Ionic 5，PWA 和原生构建的不同文件

Question

我想为我的网站和本地移动应用程序使用相同的代码库。我正在使用ionic cordova build <platform> 构建本机应用程序，并在docker 内使用ionic serve --external --prod 部署网站。我需要将我的应用程序上的底部标签导航栏转换为我网站上的侧边栏。这将需要更改路由和 HTML 文件。但是我们显示的所有其他文件保持不变。那么，如何在每个版本上为我的网站部署不同的文件，并为我的原生应用部署不同的文件？

Answer 1

离子平台服务

• 您可以使用Ionic Platform service 来 确定用户当前设备​​的平台，然后根据 不同的平台，使用 *ngIf 显示您想要的模板 指令

TS 文件

import { Platform } from '@ionic/angular';
@Component({...})
export class MyPage {
  is_native: boolean;
  is_pwa: boolean;
  constructor(public platform: Platform) {
     this.is_native = this.platform.is('hybrid');
     this.is_pwa = this.platform.is('pwa');
  }
}

HTML 模板

    <div #sideMenu *ngIf="is_pwa">...
    </div>
    <div #navBar *ngIf="is_native">...
    </div>

更新：Shell 脚本

另一种方法是使用 shell 脚本将模板文件替换为不同的文件。

cp src/app/componenets/template.pwa.html src/app/componenets/template.html

ionic serve --external --prod