鸿蒙个人项目-欢迎页面业务、UI实现

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

---

前言

随着鸿蒙体系的不断发展与普及，越来越多的开发者开始投入到鸿蒙应用的开发中。欢迎页面作为用户首次接触应用的界面，其业务逻辑与UI设计的合理性直接关系到用户的使用感受和后续的使用意愿。因此，将重点介绍鸿蒙个人项目欢迎页面的业务实现与UI设计。

第一模块

代码如下：

1. @Extend(Text) function opacityWhiteText(opacity:number, funSize : number=10){
2. .fontSize(funSize)
3. .opacity(opacity)
4. .fontColor(Color.White)
5. }

复制代码

  这里界说了一个扩展函数 opacityWhiteText，用于设置文本的样式，包括字体大小、透明度和颜色。
第二模块

代码如下：

1. const PREF_KEY = 'userPrivacyKey'
3. @Entry
4. @Component
5. struct WelcomePage {
6.   context= getContext(this) as common.UIAbilityContext
7.   controller:CustomDialogController = new CustomDialogController({
8.     builder: UserPrivacyDialog({
9.     confirm: ()  => this.onConfirm(),
10.       cancel: () => this.exitApp()
11.     })
12.   })
14.   async aboutToAppear(){
15.     //1.加载首选项
16.     let isAgree = await preferenceUtil.getPreferenceValue(PREF_KEY,false)
17.     //2.判断是否同意
18.     if(isAgree){
19.       //2.1.同意，跳转首页
20.       this.jumpToIndex()
21.     }else {
22.       //2.2.不同意，弹窗
23.       this.controller.open()
24.     }
25.     }
27. jumpToIndex(){
28.      setTimeout(() => {
29.   router.replaceUrl({
30.        url:'pages/Index'
31.      })
32.   },1000)
34. }
36.   onConfirm(){
37.    //1.保存首选项
38. preferenceUtil.putPreferenceValue(PREF_KEY,true)
39.     //2.跳转到首页
40. this.jumpToIndex()
41.   }
43.   exitApp(){
44.     //退出App
45.     this.context.terminateSelf()
46.   }

复制代码

1.在 WelcomePage 结构体中，起首获取了上下文。然后通过 CustomDialogController 界说了一个用户隐私对话框的控制器，并设置了确认和取消的回调函数。
2.aboutToAppear 方法在页面即将显示时被调用，它会加载首选项的值来判断用户是否同意隐私协议。假如同意，就跳转到首页；假如不同意，则打开隐私对话框。
3.jumpToIndex 方法用于在延迟 1 秒后跳转到首页。
4.onConfirm 方法在用户确认同意隐私协议时，生存首选项的值并跳转到首页。
5.exitApp 方法用于在用户取消时退出应用。
总的来说，这段代码的主要功能是处置惩罚用户对于某个服务或条款的同意状态。假如用户已经同意，则直接跳转到应用的首页；假如用户尚未同意，则显示一个提示。用户可以通过某种方式（如点击“同意”按钮）来确认他们的同意，然后应用会生存这个状态并跳转到首页。别的，还提供了一个退出应用的功能。
 第三模块

代码如下：

1.   build() {
3.     Column({space:10}) {
4.       //1.中央slogan
5.       Row(){
6.         Image($r('app.media.home_slogan')).width(260)
7.       }
8.      .layoutWeight(1)
9.       //2.logo
10.       Image($r('app.media.home_logo')).width(150)
11.       //3.文字描述
12.       Row(){
13.         Text('黑马健康支持').opacityWhiteText(0.8,12)
14.         Text('IPv6')
15.          .opacityWhiteText(0.8)
17.          .border({style:BorderStyle.Solid,width:1,color:Color.White,radius:15})
18.          .padding({left:5,right:5})
19.         Text('网络').opacityWhiteText(0.8,12)
21.       }
23.       Text('减更多指黑马健康 App 希望通过软件工具的形势，帮助更多用户实现身材管理')
24.        .opacityWhiteText(0.6)
25.       Text('浙 ICP 备 00000000 号-36D')
26.        .opacityWhiteText(0.4)
27.        .margin({bottom:35})
29.     }
30.    .width('100%')
31.    .height('100%')
32.    .backgroundColor($r('app.color.welcome_page_background'))
33.   }
34. }

复制代码

在 build 方法中，通过各种组件和样式的设置构建了欢迎页面的布局，包括中心的 slogan、logo、文字形貌等，并设置了相应的样式和布局属性。总的来说，这段代码通过合理的导入模块、界说函数和结构体，实现了一个具有效户隐私协议处置惩罚和页面布局的欢迎页面。
截图

---

总结

鸿蒙个人项目欢迎页面的业务实现与UI设计旨在为用户提供便捷、高效的服务体验。通过合理的业务逻辑设计和UI设计思路，确保用户能够快速了解应用并顺利进入应用主界面。将来，我们将继续关注用户需求和市场变化，不断优化和完善欢迎页面的功能和设计，为用户带来更好的使用体验。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。