Ionic 5，PWA 和本机构建的不同文件

Question

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

Answer 1

离子平台服务

您可以使用 Ionic 平台服务到判断用户当前设备的平台，然后根据不同的平台，使用 *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

Ionic 5，PWA 和本机构建的不同文件

Ionic 5, different files for PWA and native builds

angularjs

angular-routing

ionic-framework

ionic-native

ionic5

离子平台服务

已更新：Shell 脚本