[ark UI] implementation of the startup page of harmoniyos ETS

  Reference material

Page routing

Lightweight storage

【ARK UI】HarmonyOS ETS Implementation of the boot page of

 

Code implementation

1、 Function description

When opening an application , There will be a welcome interface , It is called SplashPages.

You can usually do some on this page App Data initialization .

When the user clicks App icon after , Get into SplashActivity, About by 1～2 Seconds to jump to the main interface of the program .

2、 Ideas

The logic first enters when the page starts SplashPage Interface ,
And then get it when the page starts IsFirst Of key Of value value
If IsFirst Of key Of value The value is true, I thought it was his first time to enter , Then go to the welcome page
If IsFirst Of key Of value The value is false, I think he has entered many times , Then go to the main page
Then click the button on the welcome page If you click the button, it will be judged that he will enter this interface for many times next time ,
Then we need to put IsFirst Of key Of value Value is modified to false

3、SplashPage Interface

import dataStorage from '@ohos.data.storage'import featureAbility from '@ohos.ability.featureAbility'import router from '@system.router';@[email protected] SplashPage {  @State IsFirstValue:boolean=true;  /**   *  The logic first enters when the page starts SplashPage Interface ,   *  And then get it when the page starts IsFirst Of key Of value value    *  If IsFirst Of key Of value The value is true, I thought it was his first time to enter , Then go to the welcome page    *  If IsFirst Of key Of value The value is false, I think he has entered many times , Then go to the main page    *  Then click the button on the welcome page   If you click the button, it will be judged that he will enter this interface for many times next time ,   *  Then we need to put IsFirst Of key Of value Value is modified to false   */  public aboutToAppear(){    console.log("aboutToDisappear")      var timeoutID = setTimeout(function() {//todo  Delay 5  To display the launch page         console.log('delay 1s');        //todo  obtain  path route         var context = featureAbility.getContext()        context.getFilesDir((err, path) => {          if (err) {            console.error('getFilesDir failed. err: ' + JSON.stringify(err));            return;          }          console.info('getFilesDir successful. path:' + JSON.stringify(path));          //todo  obtain  storage  object           let storage = dataStorage.getStorageSync(path + '/mystore')          let IsFirst = storage.getSync('isFirst', true)//todo  obtain   Whether to start for the first time           console.log("IsFirst=====>"+JSON.stringify(IsFirst))          if(IsFirst){// todo  If so   Jump to the welcome page             router.replace({              uri:"pages/WelcomePage"            })          }else{//TODO  If not   Go to the main interface             router.replace({              uri:"pages/index"            })          }        });      }, 2000);  }  build() {    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {      Stack({ alignContent: Alignment.Center }){        Image($r("app.media.icon")).width(100).height(100)        Text(" Start the page interface ").fontSize(20).fontColor(Color.White).margin({top:150})      }.width('100%').height("100%").backgroundColor(Color.Green).align(Alignment.Center)    }    .width('100%')    .height('100%')  }}

4、 main interface

@[email protected] Index {  build() {    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {      Text(' This is a main interface ')        .fontSize(50)        .fontWeight(FontWeight.Bold)    }    .width('100%')    .height('100%')  }}

5、 The welcome screen

Welcome interface we can refer to the previous materials , We need to click on the event in the button , Revise it IsFirst It is amended as follows false, It means that the next time you enter, you will enter many times

import router from '@system.router';import dataStorage from '@ohos.data.storage'import featureAbility from '@ohos.ability.featureAbility'@[email protected] WelcomePage {  private swiperController: SwiperController = new SwiperController()/**   *  Controls whether the start button is displayed or hidden    */  @State flag: boolean= false;  build() {    Column({ space: 5 }) {      Stack({ alignContent: Alignment.TopEnd }) {        Swiper(this.swiperController) {          //todo  Image content of the guide page           //todo  Guide page 1           Stack({ alignContent: Alignment.Center }){            Image($r("app.media.icon")).width(100).height(100)            Text(" Guide page 1 ").fontSize(20).fontColor(Color.White).margin({top:150})          }.width('100%').height("100%").backgroundColor(Color.Red).align(Alignment.Center)          //todo  The guide page   Two           Stack({ alignContent: Alignment.Center }){            Image($r("app.media.icon")).width(100).height(100)            Text(" Guide page 2 ").fontSize(20).fontColor(Color.White).margin({top:150})          }.width('100%').height("100%").backgroundColor(Color.Orange).align(Alignment.Center)          //todo  Guide page 3           Stack({ alignContent: Alignment.Center }){            Image($r("app.media.icon")).width(100).height(100)            Text(" Guide page 3 ").fontSize(20).fontColor(Color.White).margin({top:150})          }.width('100%').height("100%").backgroundColor(Color.Green).align(Alignment.Center)        }        .index(0) //todo  The current index is 0  Start         .autoPlay(false) //todo  Stop autoplay         .indicator(true) // todo  Default on indicator point         .loop(false) // todo  Stop autoplay    Cycle playback is enabled by default         .vertical(false) //todo  Lateral switching   Default landscape switch         .onChange((index: number) => {          /**           *  according to Index  Judge   When the boot page plays to the last page            *  Let the start button display   Otherwise   No display            */          if (index == 2) { //todo  the last one   Set up flag  by true            this.flag = true          } else { //todo  Not the last one   Set up flag by false            this.flag = false          }        })        if (this.flag) //todo  When flag  by true  The start button is displayed   by false It doesn't show         Text(' start-up ')          .width('300px')          .height('150px')          .textAlign(TextAlign.Center)          .fontSize(20)          .backgroundColor(Color.White)          .margin({ right: 20, top: 20 })          .onClick(function () { //todo  Implement the button click event   Enter the main interface             //todo  obtain  path  object             var context = featureAbility.getContext()            context.getFilesDir((err, path) => {              if (err) {                console.error('getFilesDir failed. err: ' + JSON.stringify(err));                return;              }              console.info('getFilesDir successful. path:' + JSON.stringify(path));                //todo  obtain  storage  object               let storage = dataStorage.getStorageSync(path + '/mystore')              storage.putSync('isFirst', false)              storage.flushSync()              let IsFirst = storage.getSync('isFirst', true) //todo  obtain   Whether to start for the first time               console.log("IsFirst=====>" + JSON.stringify(IsFirst))              //todo  Storage success   Jump to main interface               router.replace({                uri: "pages/index"              })            })          })      }    }  }}

Running effect

More Hongmeng learn to share , Please refer to ：https://developer.huawei.com/consumer/cn/forum/topic/0203917943050170444?fid=0102683795438680754?ha_source=zzh