鸿蒙个人项目-欢迎页面业务、UI实现

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

随着鸿蒙系统的不断发展与普及，越来越多的开发者开始投入到鸿蒙应用的开发中。欢迎页面作为用户首次接触应用的界面，其业务逻辑与UI设计的合理性直接关系到用户的使用感受和后续的使用意愿。因此，将重点介绍鸿蒙个人项目欢迎页面的业务实现与UI设计。

第一模块

代码如下：

@Extend(Text) function opacityWhiteText(opacity:number, funSize : number=10){
 .fontSize(funSize)
 .opacity(opacity)
 .fontColor(Color.White)
}

  这里定义了一个扩展函数 opacityWhiteText，用于设置文本的样式，包括字体大小、透明度和颜色。

第二模块

代码如下：

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(){
    //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.replaceUrl({
       url:'pages/Index'
     })
  },1000)

}

  onConfirm(){
   //1.保存首选项
preferenceUtil.putPreferenceValue(PREF_KEY,true)
    //2.跳转到首页
this.jumpToIndex()
  }

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

1.在 WelcomePage 结构体中，首先获取了上下文。然后通过 CustomDialogController 定义了一个用户隐私对话框的控制器，并设置了确认和取消的回调函数。

2.aboutToAppear 方法在页面即将显示时被调用，它会加载首选项的值来判断用户是否同意隐私协议。如果同意，就跳转到首页；如果不同意，则打开隐私对话框。

3.jumpToIndex 方法用于在延迟 1 秒后跳转到首页。

4.onConfirm 方法在用户确认同意隐私协议时，保存首选项的值并跳转到首页。

5.exitApp 方法用于在用户取消时退出应用。

总的来说，这段代码的主要功能是处理用户对于某个服务或条款的同意状态。如果用户已经同意，则直接跳转到应用的首页；如果用户尚未同意，则显示一个提示。用户可以通过某种方式（如点击“同意”按钮）来确认他们的同意，然后应用会保存这个状态并跳转到首页。此外，还提供了一个退出应用的功能。

 第三模块

代码如下：

  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 备 00000000 号-36D')
       .opacityWhiteText(0.4)
       .margin({bottom:35})

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

在 build 方法中，通过各种组件和样式的设置构建了欢迎页面的布局，包括中央的 slogan、logo、文字描述等，并设置了相应的样式和布局属性。总的来说，这段代码通过合理的导入模块、定义函数和结构体，实现了一个具有用户隐私协议处理和页面布局的欢迎页面。

截图

---

总结

鸿蒙个人项目欢迎页面的业务实现与UI设计旨在为用户提供便捷、高效的服务体验。通过合理的业务逻辑设计和UI设计思路，确保用户能够快速了解应用并顺利进入应用主界面。未来，我们将继续关注用户需求和市场变化，不断优化和完善欢迎页面的功能和设计，为用户带来更好的使用体验。