鸿蒙启动页开发

鸿蒙启动页开发

1.1 更改应用名称和图标

1.更改应用图标

1. 找到moudle.json5文件，找到应用启动的EntryAbility下面的icon,将原来的图标改成自己设置的即可

2.更改应用名称

3.效果展示

2.1 广告页面开发

3.1 详细介绍

3.1.1 启动页面

import { PrivacyDialog } from '../views/components/PrivacyDialog'
import { router, window } from '@kit.ArkUI'
import { preferences } from '@kit.ArkData'
import { common } from '@kit.AbilityKit'

@Entry
@Component
struct launchPage {
  //获取应用的上下文
  context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext
  //获取页面的上下文
  // context:Context = getContext()
  @State
  isStore: boolean = true

  aboutToAppear(): void {
    window.getLastWindow(getContext()).then(win => {
      win.setWindowLayoutFullScreen(true)
    })
    const store = preferences.getPreferencesSync(this.context, {
      'name': 'infoStore'
    })
    this.isStore = store.getSync('isStore', true) as boolean
    console.info(`userAction: ${this.isStore}`)
  }

  async saveInfo() {
    const store = preferences.getPreferencesSync(this.context, {
      'name': 'infoStore'
    })
    store.putSync('isStore', false)
    store.flush()
  }

  //在页面出现之后：需要展示弹窗
  onPageShow(): void {
    //isStore用于定义是否保存的标识  如果显示true,就不用打开自定义弹窗，直接跳到广告界面
    // promptAction.showToast({
    //   message: this.isStore+''
    // })
    if (this.isStore) {
      this.controller.open()
    } else {
      //跳到广告界面
      router.pushUrl({
        url: 'pages/AdvertisementPage'
      })
    }

  }

  // context:Context:getContext()
  controller: CustomDialogController = new CustomDialogController({
    builder: PrivacyDialog({
      cancel: () => {
        this.context?.terminateSelf()
        //不同意关闭应用

      },
      confirm: () => { //当你点击同意，就会调用saveInfo方法
        this.saveInfo()
        //TODO 跳到广告页面
        router.pushUrl({
          url: 'pages/AdvertisementPage'
        })
      },

    }),
    alignment: DialogAlignment.Bottom, //基准位置
    // offset:{dx:30,dy:30}
  }
    //设置弹窗位置

  )

  build() {
    Stack() {
      //设置第一层
      Image($r('app.media.back'))
      Column({ space: 10 }) {
        Image($r('app.media.study_app'))
          .width(80)
          .aspectRatio(1)
        Text('健康学习')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Text('学习总有新玩法')
          .fontWeight(FontWeight.Bold)
      }.width('100%')
      .height('100%')
      .padding({
        top: 100
      })
    }
    .height('100%')
    .width('100%')
  }
}

3.1.2 自定义弹层

import { router } from '@kit.ArkUI'

@Preview
@CustomDialog
export struct PrivacyDialog {
  controller:CustomDialogController = new CustomDialogController({builder: ''})
  //定义两个用来接收的方法
  cancel:Function = ()=>{}
  confirm:Function = ()=>{}
  build() {

    Column(){
      Text('欢迎使用我的应用')
      Text('我们充分尊重用户的隐私权，并按照法律要求和业界成熟的安全标准，为您的个人信息提供相应的安全保护措施。')
      Text('协议隐私保护声明')
        .fontColor('#007fdd')
        .onClick(()=>{
          // TODO
          router.pushUrl({url:''})
        })
      Text('(以下简称为“本声明”)以便您了解我们如何搜集、使用、披露、保护、存储、及传输您的个人数据。请您仔细阅读本声明。如您有任何疑问，请告知我们。')
      Row(){
        Text('不同意').fontColor('#007fdd')
          .onClick(()=>{
            this.controller.close()   //点击不同意，关闭
            this.cancel()
          })
        Blank()
        Text('同意').fontColor('#007fdd')
          .onClick(()=>{
            this.controller.close()
            this.confirm()
          })
      }.width('70%')
    }

  }
}

3.1.3 广告页面

import { router, window } from '@kit.ArkUI'

@Entry
@Component
struct AdvertisementPage {
  @State time: number = 5
  @State timeID: number = -1

  aboutToAppear(): void {
    window.getLastWindow(getContext()).then(win => {
      win.setWindowLayoutFullScreen(true)
    })
  }

  onPageShow(): void {

    this.timeID = setInterval(() => {
      console.log('test', this.time)
      if (this.time > 0) {
        this.time--
      } else if (this.time == 0) {
        clearTimeout(this.timeID)
        router.pushUrl({
          url: 'pages/Index'
        })
      }

    }, 1000)


  }

  build() {

    Stack() {
      Image($r('app.media.back'))
      Row() {
        Text('跳过广告' + this.time + 's')
          .fontSize(20)
          .backgroundColor('rgba(0,0,0,0.1)')
          .padding(8)
          .borderRadius(30)
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.End)
      .alignItems(VerticalAlign.Top)
      .padding({
        top: 30,
        right: 30
      })

      Row({ space: 10 }) {
        Image($r('app.media.study_app'))
          .width(80)
          .aspectRatio(1)
        Column({ space: 5 }) {
          Text('健康学习')
            .fontSize(30)
          Text('学习总有新玩法')
            .fontSize(20)
        }.height(80)
        .justifyContent(FlexAlign.Start)

      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
      .alignItems(VerticalAlign.Bottom)
      .padding({
        bottom: 16
      })

    }

    .height('100%')
    .width('100%')

  }
}