鸿蒙案例-欢迎页面的实现

前言

‘案例来源于b站课程’

---

实现过程

1.首页面主要有三部分<1>中央slogan；<2>logo;<3>文字描述

设置中央slogan要使用layoutWeight(1) 实现布局全中；

     Row(){
        Image($r('app.media.home_slogan')).width(260)
      }
      .layoutWeight(1)

logo即图片设置好图片的大小，实现布局美观

  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}) //radius弧度
          .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.弹窗主要有三部分<1>标题；<2>内容;<3>按钮

（注意预览界面时需要用到@Preview进行预览）

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

3.页面加载时弹窗

加载首选项，然后进行判断是否同意，同意，跳转首页，不同意则弹窗

async aboutToAppear(){  
    let isAgree = await preferenceUtil.getPreferenceValue(PREF_KEY,false)
   if(isAgree){
     this.jumpToIndex()
   }else {
     this.controller.open()

   }
  }

跳到首页时可以设置延迟

jumpToIndex(){ 
    setTimeout(()=>{ 
      router.replaceUrl({
        url:'pages/Index'
      })
    },1000) 
  }

4.退出App

exitApp(){
    this.context.terminateSelf() 
  }

代码实现：

1.欢迎界面的实现

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){  //Extend继承Text
  .fontSize(fontSize)
  .opacity(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) //1000毫秒即1秒后再跳转
  }

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

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

  build() {
    Column({space:10}) {  //Column沿垂直方向布局的容器。
      //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}) //radius弧度
          .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:CommonConstants.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(10)
  }
}

页面效果

总结

     用户首选项为应用提供Key-Value键值型的数据处理能力，支持应用持久化轻量级数据，并对其修改和查询。数据存储形式为键值对，键的类型为字符串型，值的存储数据类型包括数字型、字符型、布尔型以及这3种类型的数组类型。