鸿蒙实战案例-欢迎页面UI实现及欢迎页面业务

前言

       欢迎来到我的鸿蒙移动开发项目！我将致力于使用鸿蒙操作系统打造出色的移动应用。让我们一起开启创新的旅程！现在我们将做一个关于健康的软件，本次带来的是欢迎页面！

一、设计与布局

界面设计

        这个布局看起来就是很简单的，是一个从上到下的列式布局，用一个Column就行了，同时呢，整个页面背景色是一个绿色，所以需要加上backgroundColor，然后因为铺满了整个屏幕，所以宽高比是百分之百。

        接着再来看这个页面内的元素，整个页面从上到下是“用黑马减更多”，用一个image组建就可以，下面的元素也是同样，所以说这个页面也是非常的简单。那让我们来做一下吧：

二、具体步骤

1.第一步，我们首先新建一个页面，将其取名为heimahealthy

2.新建好页面后我们开始敲击代码，最终展示为：

三、相关代码

import UserPrivacyDialog from '../view/welcome/UserPrivacyDialog'
import common from '@ohos.app.ability.common'
import router from '@ohos.router'
import PreferenceUtil from '../common/utils/PreferenceUtil'
@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(){
    //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()
  }

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

总结

        总体而言，该代码示例结合了界面设计和技术实现，展示了一个简洁而功能完善的欢迎页面，符合用户体验和品牌定位。通过这个例子，开发者可以了解如何利用鸿蒙OS的能力框架构建交互逻辑丰富的界面，并实现用户首次打开应用时的隐私政策处理和页面跳转功能。