实战案例 欢迎页面业务

一、实验目的

1. 欢迎页面UI开发；

2. 业务逻辑开发；

二、应用介绍

本阶段项目实现了一个美食页面进入页面，运行界面如图所示。

三、代码结构解读

import common from '@ohos.app.ability.common'
import router from '@ohos.router'
import PreferenceUtil from '../common/utils/PreferenceUtil'
import UserPrivacyDialog from '../view/welcome/UserPrivacyDialog'
@Extend(Text) function opacityWhiteText(opacity: number, fontSize: number = 10) {
  .fontSize(fontSize)
  .opacity(opacity)
  .fontColor(Color.White)
}
const PREF_KEY = 'userPrivacyKey'
@Entry
@Component
struct WelcomePage {
  context = getContext(this) as common.UIAbilityContext
  controller:CustomDialogController = new CustomDialogController({
    builder:UserPrivacyDialog({
      confirm:()=>this.onConfirm(),
      cancel:()=>this.exitAPP()
    })

  })
  //弹窗
  async aboutToAppear(){
    //加载首选项
    let isAgree =  await PreferenceUtil.getPreferenceValue(PREF_KEY,false)
    //判断是否同意
    if(isAgree){
      this.jumpToIndex()

    }else {
      //不同意，弹窗
      this.controller.open()
    }
  }
  jumpToIndex(){
    setTimeout(()=>{
      router.replaceUrl({
        url:'pages/Index'
      })
    },1000)
  }
  onConfirm(){
    PreferenceUtil.putPreferenceValue(PREF_KEY,true)
    this.jumpToIndex()


  }
  exitAPP(){
  this.context.terminateSelf()
  }

  build() {
    Column({space:10}) {
      // 1.中央Slogan
      Row() {
        Image($r('app.media.home_slogan')).width(260)
      }
      .layoutWeight(1)

      // 2.logo
      Image($r('app.media.home_logo')).width(150)
      // 3.文字描述
      Row() {
        Text('黑马健康支持').opacityWhiteText(0.8, 12)
        Text('IPv6')
          .opacityWhiteText(0.8)
          .border({ style: BorderStyle.Solid, width: 1, color: Color.White, radius: 15 })
          .padding({ left: 5, right: 5 })
        Text('网络').opacityWhiteText(0.8, 12)
      }

      Text(`'减更多'指黑马健康App希望通过软件工具的形式，帮助更多用户实现身材管理`)
        .opacityWhiteText(0.6)
      Text('浙ICP备0000000号-36D')
        .opacityWhiteText(0.4)
        .margin({ bottom: 35 })


    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.welcome_page_background'))
  }
}

四、实验逻辑

在项目中我们要用一个持久化保存。

用户持久化我们打算用一个加载首选项，然后逻辑如下图：

五、遇到的问题及解决方案

1.模拟器初始页面加载错误

解决方法：

将pages/index修改为”pages/welcomepages“，其中welcomepages你想要加载的页面。

六、你最想分享的亮点

自定义弹出使用的是@CustomDialog组件

小结

1.HarmonyOS基础知识：了解HarmonyOS的架构、特性、应用生态等基础知识，有助于更好地理解和利用HarmonyOS的优势。

2.Lite和Standard模板：明确Lite和Standard模板的区别和适用场景，根据项目需求选择合适的模板进行创建。

3.应用开发技能：具备Android或iOS应用开发经验会有助于快速上手鸿蒙应用开发，熟悉Java、Kotlin、JavaScript等开发语言也会有帮助。

4.鸿蒙SDK和API：熟悉鸿蒙SDK和API的使用方法，能够调用各种功能模块和服务，实现丰富的应用功能。

5.设备适配和优化：了解不同设备类型的适配要求和优化技巧，确保应用在各种设备上能够流畅运行。

6.调试和测试技能：掌握调试工具的使用方法，能够快速定位和解决问题；熟悉测试方法和流程，确保应用的稳定性和性能。