HarmonyOS编程实践系列：黑马健康（第一节 ：欢迎页代码详解）

系列文章目录

（零）鸿蒙HarmonyOS入门：如何配置环境，输出“Hello World“
（一）鸿蒙HarmonyOS开发基础
（二）鸿蒙HarmonyOS主力开发语言ArkTS-基本语法
（三）鸿蒙HarmonyOS主力开发语言ArkTS-状态管理
（四）鸿蒙HarmonyOS主力开发语言ArkTS-渲染控制
（五）鸿蒙HarmonyOS主力开发语言ArkTS-数据懒加载(LazyForEach)

---

---

前言

`提示：

案例来源于b站的课程

---

提示：以下是本篇文章正文内容，下面案例可供参考

完整代码可从下面的仓库获取。

Gitee仓库

一、核心代码

1.WelcomePage.ets

import common from '@ohos.app.ability.common'
import router from '@ohos.router'
import PreferenceUtil from '../common/utils/PreferenceUtil'
import UserPrivacyDialog from '../view/welcome/UserPrivacyDialog'


// @Styles装饰器可以快速定义并复用自定义样式。@Styles仅支持通用属性和通用事件，不支持参数。
// @Extend，用于扩展原生组件样式。
@Extend(Text) function opacityWhiteText(opacity: number, fontSize: number = 10) {
  .fontSize(fontSize)
  .opacity(opacity)
  .fontColor(Color.White)
}
const PREF_KEY = 'userPrivacyKey'
@Entry
@Component
struct WelcomePage {
  // 获取上下文，用户退出APP
  context = getContext(this) as common.UIAbilityContext


  // 定义用户协议弹窗--基于系统自定义弹窗（CustomDialog）
  //此处为装饰器，对应构造器见UserPrivacyDialog文件
  controller: CustomDialogController = new CustomDialogController({
    builder: UserPrivacyDialog({
      confirm: () => this.onConfirm(),
      cancel: () => this.exitApp()
    }),
    alignment: DialogAlignment.Center,  // 可设置dialog的对齐方式，设定显示在底部或中间等.不设置使用默认值
  })
  onConfirm(){
    // 1.保存首选项
    PreferenceUtil.putPreferenceValue(PREF_KEY, true)
    // 2.跳转到首页
    this.jumpToIndex()
  }

  exitApp(){
    // 退出APP
    this.context.terminateSelf()
  }

//@Entry装饰的自定义组件为页面的入口组件
//   组件生命周期，即一般用@Component装饰的自定义组件的生命周期，提供以下生命周期接口：
//
//   aboutToAppear：组件即将出现时回调该接口，具体时机为在创建自定义组件的新实例后，在执行其build()函数之前执行。
//   aboutToDisappear：在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。
//https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-page-custom-components-lifecycle-0000001524296665-V2
  async aboutToAppear(){
    // HarmonyOS标准系统支持典型的存储数据形态，包括用户首选项、键值型数据库、关系型数据库。
    // 用户首选项（Preferences）：通常用于保存应用的配置信息。数据通过文本的形式保存在设备中，应用使用过程中会将文本中的数据全量加载到内存中，所以访问速度快、效率高，但不适合需要存储大量数据的场景。
    // 适用的场景一般为应用保存用户的个性化设置（字体大小，是否开启夜间模式）等
    // 1.加载首选项
    let isAgree = await PreferenceUtil.getPreferenceValue(PREF_KEY, false)
    // 2.判断是否同意
    if(isAgree){
      // 2.1.同意，跳转首页
      this.jumpToIndex()
    }else{
      // 2.2.不同意，弹窗
      this.controller.open()
    }
  }

  jumpToIndex(){
    setTimeout(() => {
// 页面路由（router） 页面路由指在应用程序中实现不同页面之间的跳转和数据传递。
// 两种跳转模式
// router.pushUrl()：目标页不会替换当前页，而是压入页面栈。这样可以保留当前页的状态，并且可以通过返回键或者调用router.back()方法返回到当前页。
// router.replaceUrl()：目标页会替换当前页，并销毁当前页。这样可以释放当前页的资源，并且无法返回到当前页。
      router.replaceUrl({
        url: 'pages/Index'
      })
    }, 1000)
  }



  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'))
  }
}

2.UserPrivacyDialog.ets

import { CommonConstants } from '../../common/constants/CommonConstants'
// @Preview
@CustomDialog
export  default  struct UserPrivacyDialog {
  controller :CustomDialogController

  // 定义空同意与不同方法，由调用方具体实现
  confirm: () => void
  cancel: () => void


  build() {
    Column({space:CommonConstants.SPACE_4}){
      Text($r('app.string.user_privacy_title'))
        .fontSize(20)
        .fontWeight(CommonConstants.FONT_WEIGHT_700)

      Text($r('app.string.user_privacy_content'))

      Button($r('app.string.agree_label'))
        .width(150)
        .backgroundColor($r('app.color.primary_color'))
        .onClick(() => {
          this.confirm()
          this.controller.close()
        })

      Button($r('app.string.refuse_label'))
        .width(150)
        .backgroundColor($r('app.color.lightest_primary_color'))
        .fontColor($r('app.color.light_gray'))
        .onClick(() => {
          this.cancel()
          this.controller.close()
        })
    }
  }
}

3.页面效果

---

总结

主要涉及到线性布局（Row/Column）、文本显示（Text/Span）、按钮（Button）、@ohos.data.preferences (用户首选项)、自定义弹窗等。

知识补充

@ohos.data.preferences (用户首选项)

为应用提供Key-Value键值型的数据处理能力，支持应用持久化轻量级数据，并对其修改和查询。数据存储形式为键值对，键的类型为字符串型，值的存储数据类型包括数字型、字符型、布尔型以及这3种类型的数组类型。

：可以通过接口获取Preferences实例，使用callback或Promise异步回调。
：可以使用接口从内存中移除指定的Preferences实例，使用callback或Promise异步回调。
：可以使用接口从内存中移除指定的Preferences实例，使用callback或Promise异步回调。
：Preferences实例提供了获取和修改存储数据的接口，如get、getAll、put等。
总结内容：用户首选项提供了一种灵活、高效的数据处理方式，支持应用持久化轻量级数据，并对其修改和查询，有助于提高应用的性能和用户体验。

其他

Column接口文档
自定义弹窗文档