ionic 5,pwa和本机版本的不同文件

e4yzc0pl  于 2021-09-29  发布在  Java
关注(0)|答案(1)|浏览(426)

我希望对我的网站和本机移动应用程序使用相同的代码库。我正在使用 ionic cordova build <platform> 以及使用 ionic serve --external --prod 在 Docker 里面。我需要把我应用程序底部的标签导航栏转换成我网站上的边栏。这需要更改路由和html文件。但是我们显示的所有其他文件都保持不变。那么,如何在每个版本上为我的网站部署不同的文件,为我的原生应用部署不同的文件呢?

g6ll5ycj

g6ll5ycj1#

离子平台服务

您可以使用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

相关问题