鸿蒙实战案例-饮食记录-欢迎页面

---

前言

在鸿蒙应用开发中，欢迎页面往往作为用户首次启动应用时首先看到的界面，其设计不仅关乎用户体验，也反映了应用的整体风格和调性。同时，弹窗功能作为与用户交互的重要手段之一，也在应用中扮演着不可或缺的角色。本文将以鸿蒙黑马饮食案例的欢迎页面及弹窗功能为例，详细介绍其编写过程和代码。

一、系统框架和分析

欢迎页面：

欢迎弹窗的：

二、代码实现

1.欢迎页面

1.欢迎界面实现：
欢迎界面是通过Column（）进行实现，其中有row（）组件，和两个text实现，通过添加自定义的数据实现相应的界面内容。

2.跳转功能实现：
转跳功能是与弹窗功能相连接来实现，如果点击确定则会转跳。系统定义了多个函数来实现功能，context用来获取UIAbilityContext；而controller用来显示弹窗；aboutToAppear用来加载首选项和判断是否跳转；onConfirm同意跳转；jumpToIndex是弹窗跳转时间；exitapp则是退出页面，不跳转。

3.代码如下（示例）：

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

const PREF_KEY = 'userPrivacyKey'
@Entry
@Component
struct welcomePage {

  context=getContext(this) as common.UIAbilityContext

  controller: CustomDialogController =new  CustomDialogController({
    builder: tanchuang({
      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()
    }
  }

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

//弹窗跳转时间
  jumpToIndex(){
    setTimeout(() => {
      router.replaceUrl({
        url: 'pages/Index'
      })
    }, 1000)
  }


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


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

     //loge
     Image($r('app.media.home_logo'))
       .width(150)

     //文字描述
     Row(){
       Text('黑马健康支持')
         .fontSize(12)
         .opacity(0.8)
         .fontColor(Color.White)

       Text('IPv6')
         .fontSize(12)
         .opacity(0.8)
         .fontColor(Color.White)
         .border({ style: BorderStyle.Solid, width: 1, color: Color.White, radius: 15 })
         .padding({ left: 5, right: 5 })

       Text('网络')
         .fontSize(12)
         .opacity(0.8)
         .fontColor(Color.White)
     }
     Text(`'减更多'指黑马健康App希望通过软件工具的形式，帮助更多用户实现身材管理`)
       .fontSize(10)
       .opacity(0.6)
       .fontColor(Color.White)

     Text('浙ICP备0000000号-36D')
       .fontSize(10)
       .opacity(0.4)
       .fontColor(Color.White)
       .margin({ bottom: 35 })

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

2.弹窗代码

1.弹窗内内容实现：
弹窗总体是在 Column()中实现， Column()中包括两个Text（）（标题和文字）和两个 Button（按钮）

2.弹窗功能实现:
定义两个函数，同意是confirm函数。拒绝按钮是cancel函数。分别设置两个函数的内容然后与按钮关联，并在欢迎界面中调用并进行跳转的操作

代码如下（示例）：

import { CommonConstants } from '../../common/constants/CommonConstants'

@CustomDialog
export default struct tanchuang {

  controller: CustomDialogController
  confirm: () => void
  cancel: () => void

  build() {
    Column(){
      //标题
      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()
        })


    }
    .width('100%')
    .padding(10)
  }
}

---

三、运行截图

总结

本文介绍了鸿蒙黑马饮食案例中欢迎页面与弹窗功能的实现方法。通过DevEco Studio和鸿蒙的API，我们可以轻松地创建出符合应用风格和需求的界面和交互效果。在实际开发中，我们还可以根据需要进行更多的定制和优化，以提升用户体验和应用的竞争力