[HarmonyOS Lesson 1: 운동과 건강 실습] 건강한 삶을 위한 UI 디자인

1 devstudio3.1β2의 새로운 기능 UI

1.1 시작 스플래시 화면(혐오스러운 스플래시 화면 광고 포함)

     부트 스플래시 화면의 원리는 프로그램 시작 시 페이지를 표시하는 것으로 백그라운드에서 데이터를 로드하는 데 사용되며 데이터가 로드되면 자동으로 사라지지만 나중에 타사 광고를 표시하도록 개발되었습니다. .

    수명 주기 함수 aboutToAppear는 사용자 지정 구성 요소의 새 인스턴스를 생성한 후 build() 함수를 실행하기 전에 실행됩니다. aboutToAppear 함수에서 상태 변수를 변경할 수 있으며 이후에 build() 함수를 실행할 때 변경 사항이 적용됩니다. aboutToDisappear 함수는 커스텀 컴포넌트가 파괴되기 전에 실행됩니다. 이 두 가지 기능은 표시 페이지가 생성되기 전에 판단을 완료하고 표시 후 자동 파기하는 데 사용할 수 있습니다. aboutToAppear에 판단력이 더해지면 회원들은 광고를 건너뛰게 됩니다^_^. 구체적인 코드는 다음과 같습니다.

페이지 수명 주기 함수 aboutToAppear:

 aboutToAppear() {
    let preferences = data_preferences.getPreferences(this.context, H_STORE);
    preferences.then((res) => {
      res.get(IS_PRIVACY, false).then((isPrivate) => {
        if (isPrivate === true) {
          this.jumpAdPage();
        } else {
          this.dialogController.open();
        }
      });
    });
  }복사

수명 주기 페이지 파괴 기능 aboutToDisappear:

  aboutToDisappear() {
    clearTimeout();
  }복사

1.2 광고 페이지 디자인

     국가의 요구 사항에 따라 광고를 건너 뛰는 링크를 설계하고 카운트 다운 후 5 초 이내에 광고 표시를 종료하십시오.물론 더 무자비한 경우 흔들거나 만지는 등의 전환 방법도 설계 할 수 있습니다. 실수는 있지만 사용자 경험이 좋지 않습니다 물론 기술이 원죄가 아니라 탐욕입니다.

키 코드는 다음과 같습니다.

      Row() {
        Text($r('app.string.jump_ad', this.duration))
          .fontSize($r('app.float.default_12'))
          .fontColor($r('app.color.white'))
          .borderRadius($r('app.float.default_16'))
          .letterSpacing(LETTER_1)
          .height($r('app.float.default_36'))
          .backgroundColor('rgba(0,0,0,0.20)')
          .border({ color: $r('app.color.white'), width: $r('app.float.default_1') })
          .margin({ top: $r('app.float.default_36') })
          .padding($r('app.float.default_8'))
          .onClick(() => this.goToHomePage())
      }
      .width('90%')
      .justifyContent(FlexAlign.End)복사

1.2 로우코드 디자인 메인 페이지

      로우코드 모드로 메인 페이지를 디자인하는데 탭 컴포넌트와 탭커넥트 컴포넌트를 주로 사용했는데 학습비용이 상당히 비싸고 파라미터 설정과 이벤트 설정이 많아서 프로토타입을 바꿔서 변환했습니다. ets에 직접 코드를 작성하는 효율성은 여전히 ​​약간 높습니다. 로우 코드 설계는 다음과 같습니다.

1.3 로우 코드 디자인 컴포넌트 ATS

   시각적 구성 요소의 디자인은 목록 구성 요소와 listitem 구성 요소를 사용하며 인터페이스의 foreach는 데이터 바인딩 방법을 모르기 때문에 코드를 반만 변환할 수 있습니다.

 

2개의 데이터베이스 작업

   데이터베이스는 애플리케이션 데이터 저장소를 읽을 수 있는 가장 쉬운 방법입니다. 이 응용 프로그램은 주로 rdb를 사용하며 건강 계획을 읽고 편집할 수 있는 특정 패키지를 포함합니다. 특정 코드는 패키지된 데이터베이스 액세스 구성 요소를 재사용합니다.

3작품 전시

{{o.이름}}
{{이름}}

Supongo que te gusta

Origin my.oschina.net/u/4478396/blog/9093160
Recomendado
Clasificación