鸿蒙实战案例（1）——黑马健康应用欢迎界面的实现

2301_80336707

已于 2024-06-26 08:45:02 修改

阅读量232

点赞数 3

文章标签：鸿蒙 harmonyos

于 2024-06-26 07:31:37 首次发布

本文链接：https://blog.csdn.net/2301_80336707/article/details/139974973

版权

一、欢迎页面的实现

代码实现：

import common from '@ohos.app.ability.common'
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)
  .fontColor(Color.White)
  .opacity(opacity)
}
//定义常量
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(){
    //延迟时间，单位ms
    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}){

      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: 8 , right : 8})
        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'))
  }
}

二、运行截图