HarmonyOS个人项目案例——综合开发过程记录1

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、欢迎页面设计
• 二、相关代码
  • 1.代码部分
  • 2.效果图
• 总结

---

前言

        在此应用开发的过程中，欢迎页面往往是首个引起用户注意的存在，所以欢迎页面需要兼具简洁性和实用性，确保用户能迅速理解程序的特点。因此介绍如何用deveco studio构建HarmonyOS程序欢迎页面。

---

一、欢迎页面设计

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

二、相关代码

1.代码部分

欢迎页面代码如下：

import userAuth from '@ohos.userIAM.userAuth'
import tanchuang from '../view/tanchuang'
import preferences from '@ohos.data.preferences'
import router from '@ohos.router'
import systemDateTime from '@ohos.systemDateTime'
import app from '@system.app';
@Extend(Text) function opacityWhitetext(opacity: number,fontSize: number=10){
  .fontSize(fontSize)
    .opacity(opacity)
    .fontColor(Color.White)
}
@Entry
@Component
struct Welcome {
  controller:CustomDialogController=new CustomDialogController({
    builder: tanchuang({
      confirm: () => this.onConfirm(),
      cancel: () => app.terminate()
    })
  })
  aboutToAppear(){
    this.controller.open()
  }
  onConfirm(){
  this.jumpToIndex()
  }
  jumpToIndex(){
    setTimeout(()=>{
      router.replaceUrl({
        url:'pages/Index'
      })
    },1000)
  }

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

      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备00000000号-36D')
        .opacityWhitetext(0.4)
        .margin({ bottom: 35 })
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.welcome_color'))
  }
}

弹窗代码如下：

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

  build() {
    Column({ space: 10 }) {
      Text('欢迎使用此app').fontSize(20).fontWeight(20)
      Text('本应用尊重并保护所有使用服务用户的个人隐私权。为了给您提供更准确、更有个性化的服务，本应用会按照本隐私权政策的规定使用和披露您的个人信息。但本应用将以高度的勤勉、审慎义务对待这些信息。除本隐私权政策另有规定外，在未征得您事先许可的情况下，本应用不会将这些信息对外披露或向第三方提供。本应用会不时更新本隐私权政策。 您在同意本应用服务使用协议之时，即视为您已经同意本隐私权政策全部内容。本隐私权政策属于本应用服务使用协议不可分割的一部分。')
      Button('同意')
        .width(150)
        .backgroundColor($r('app.color.welcome_color'))
        .onClick(() => {
          this.confirm()
          this.controller.close()
        })
      Button('不同意')
        .width(150)
        .backgroundColor($r('app.color.color2'))
        .fontColor($r('app.color.color3'))
        .onClick(() => {
          this.cancel()
          this.controller.close()
        })
        .width('100%')
        .padding(10)
    }
  }
}

 

2.效果图

欢迎页面效果图如下：

弹窗部分效果图：

---

总结

以上便是欢迎页的整个内容，页面会先弹出弹窗来询问用户是否同意隐私协议，如果同意便会关闭弹窗进入应用，如果不同意则会退出应用程序。