鸿蒙实战案列-欢迎页面

前言

        在黑马健康应用开发的过程中，欢迎页面往往是首个吸引用户目光的存在。所以欢迎页面要注重简洁性和功能性，确保用户能迅速理解主要功能和特点。所以介绍一下如何用HarmonyOS构建欢迎页面。

---

一、页面设计

    欢迎页面整体的布局非常简单，是一个从上到下的列式布局，所以使用Column就行了。同时整个页面的背景色是一个绿色，所以需要加上一个绿色背景色铺满整个屏幕，宽高比都是100%。整个页面从上到下第一部分是一个logo，是一个图片然后再往下黑马健康这是个logo，同样也是一个图片，再往下有三行文本介绍，所以整个页面结构很简单

二、相关代码

1.欢迎页面的UI

代码如下：

import common from '@ohos.app.ability.common'
import preferences from '@ohos.data.preferences'
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(){
    //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(){
    //退出
    this.context.terminateSelf()
  }
  build() {
    Column({space:10}) {
      Row(){
        Image($r('app.media.home_slogan'))
          .width(260)
      }
      .layoutWeight(1)//布局权重
      Image($r('app.media.home_logo'))
        .width(150)
      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.欢迎页面的业务

代码如下：

import { CommonConstants } from '../../common/constants/CommonConstants'
//@Preview//可预览

@CustomDialog
export default struct userPrivacyDialog {
  controller:CustomDialogController
  confirm: () => void
  cancel: () => void

  build() {
    Column({space:10}){
      //1.标题
      Text($r('app.string.user_privacy_title'))
        .fontSize(20)
        .fontWeight(CommonConstants.FONT_WEIGHT_700)
      //2.内容
      Text($r('app.string.user_privacy_content'))
      //3.按钮
      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()
        })
    }
    .width('100%')
    .padding(0)
  }
}

效果图如下：

---

总结

以上就是欢迎页面的内容，页面首先会弹窗来检测用户是否同意隐私协议，如果同意协议将会关闭弹窗并进入应用，同时保存结果，下次用户进入应用将不会再次弹窗。如果不同意隐私协议将会退出该应用