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

Question

如何在按下应用程序图标时检查用户是该应用程序的新用户。如果该用户是新用户，则为该用户显示板载屏幕。

Answer 1

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

在离开您的引导页面之前，您可以在本地存储中设置该值，这样该页面将不会再次显示：

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

Answer 2

在应用程序初始化时，您可以检查用户是否已完成入职。您可以使用本地存储/离子存储进行检查。我建议在 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']);
  }

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

How to manage user Onboarding Screen in ionic app

ionic-framework

ionic4

ionic5