如何在离子应用程序中管理用户入职屏幕答案

【问题标题】：How to manage user Onboarding Screen in ionic app如何在离子应用程序中管理用户入职屏幕
【发布时间】：2020-11-18 17:44:23
【问题描述】：

如何在按下应用程序图标时检查用户是该应用程序的新用户。以及该用户是否新显示该用户的板载屏幕。

【问题讨论】：

你找到解决办法了吗？
还没..你知道怎么做吗

标签： ionic-framework ionic4 ionic5

【解决方案1】：

在应用初始化时，您可以检查用户是否已完成入门。您可以使用本地存储/离子存储进行检查。我建议在app.component.ts 进行检查。

例子：

app.component.ts

export class AppComponent {

  constructor(
    ...
    private router: Router,
    private storageService: StorageService,
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.splashScreen.hide();
      
      // Method to send user to onboarding pages
      this.pushToAppOnboarding();
    });
  }


  async pushToAppOnboarding() {
   await this.storageService.getItem('onboarding').then((key) => {
      // StorageService only takes strings. Thus, compare if the string equals 'true'.
      if (key.value !== 'true') { 
        this.router.navigate(['/onboarding']);
      }
    });
  }
}

onboarding.page.html

<ion-content>
  <!-- place your onboarding content here. Use e.g. ion-slider -->
  <ion-button (click)="finishAppOnboarding()">Lets Start</ion-button>
</ion-content>

onboarding.page.ts

  constructor(
    private router: Router,
    private storageService: StorageService,
  ) { } 

  finishAppOnboarding() {
    this.storageService.setItem('onboarding', 'true');
    this.router.navigate(['/route-to-your-homepage']);
  }

【讨论】：

【解决方案2】：

您可以使用 localstorage 来检查应用程序是否首次打开并相应地显示载入模式或页面：

import { Storage } from '@ionic/storage';

constructor(private storage: Storage) { }

this.storage.get('firstOpening').then((firstOpening) => {
    if (!firstOpening) {
      //Open onboarding modal or navigate to page
    }
  });

在离开您的入职页面之前，您可以在 localstorage 中设置该值，这样该页面将不会再次显示：

this.storage.set("firstOpening", true);

【讨论】：