鸿蒙实战案例——欢迎页面UI实现及欢迎页面业务的实现（一） ...

前言

---

在移动应用开辟过程中，欢迎页面是用户吸收到健康应用的首要入口，欢迎页面的布局设计成功与否直接关系到用户的视觉体验。因此，为了设计一款成功的欢迎页面布局，格外紧张，下面我就将为各人展示如何使用HarmonyOS框架构建一个相应式的欢迎页面。

---

HeimaHealthy项目总体在DevEcoStudio各页面文件布局如下

一、设计与布局

欢迎界面设计

 欢迎页面设计将采用简便的布局风格，团结品牌标志和关键信息，以吸引用户眼球。

下面是设计要素的详细说明：

•   中心Slogan和Logo：中心的Slogan和Logo展示了黑马健康App的标志性元素，加强了品牌识别度和用户记忆点。
  
• 文本形貌： 界面底部的文本形貌通过简便明了的语言概括了黑马健康App的紧张服务和目标群体，帮助用户快速相识应用的价值主张。
  
• 功能引导：用户初次打开应用时，通过弹窗提示用户相识隐私政策，并通过选择操作引导用户进入应用或退出。
  

 技能实现

代码基于HarmonyOS的本领框架，采用了以下关键技能点来实现页面的构建和交互逻辑：

• UI交互显示本领：使用HarmonyOS的UI本领构建了相应式的界面布局，确保在不同装备上都能够精良地显示和交互。
  
• 状态管理：使用了当地偏好设置(@ohos.data.preferences)来存储用户的同意状态，以便应用下次启动时能够根据用户的选择做出相应的处理。
  
• 页面跳转：通过路由(@ohos.router)实现页面的跳转和替换，确保用户在同意隐私政策后能够顺利进入应用的首页。
  

二、欢迎页面设计步骤 

1.欢迎页面布局分析

布局分析

功能分析

2.自定义弹窗

1.使用@CustomDialog装饰器声明弹窗组件；

2.在页面中声明弹窗控制器，并使用其控制弹窗

三、欢迎页面相干代码

欢迎页面

1. import UserPrivacyDialog from '../view/welcome/UserPrivacyDialog'
2. import common from '@ohos.app.ability.common'
3. import preferences from '@ohos.data.preferences'
4. import PreferenceUtil from '../common/utils/PreferenceUtil'
5. import router from '@ohos.router'
6. @Extend(Text) function  opacityWhiteText(opacity:number,fontSize:number=10){
7.     .fontSize(fontSize)
8.     .opacity(opacity)
9.     .fontColor(Color.White)
10. }
11. const PREF_KEY = 'userPrivacyKey'
12. @Entry
13. @Component
14. struct WelcomePage {
15.   context = getContext(this) as common.UIAbilityContext
16.   controller:CustomDialogController = new CustomDialogController({
17.     builder:UserPrivacyDialog({
18.       confirm:() => this.onConfirm(),
19.       cancel:() => this.exitApp()
20.     })
21.   })
22.   async  aboutToAppear(){
23.     //1.加载首选项
24.     let isAgree = await PreferenceUtil.getPreferenceValue(PREF_KEY,false)
25.     //2.判断是否同意
26.     if (isAgree) {
27.       //2.1. 同意，跳转首页
28.       this.jumpToIndex()
29.     }else{
30.       //2.2.不同意，弹窗
31.       this.controller.open()
32.     }
33.   }
35.   jumpToIndex(){
36.     setTimeout(()=>{
37.       router.replaceUrl({
38.         url:'pages/Index'
39.       })
40.     },1000)
41.   }
43.   onConfirm(){
44.     //1.保存首选项
45.     PreferenceUtil.putPreferenceValue(PREF_KEY,true)
47.     //2.跳转到首页
48.     this.jumpToIndex()
50.   }
51.   exitApp(){
52.     //退出App
53.     this.context.terminateSelf()
54.   }
56.   build() {
57.     Column({space:10})  {
58.       //1.中央slogan
59.       Row(){
60.         Image($r('app.media.home_slogan')).width(260)
61.       }
62.       .layoutWeight(1)
65.       //2.logo
66.       Image($r('app.media.home_logo')).width(150)
68.       //3.文字描述
69.       Row(){
70.         Text('黑马健康支持').opacityWhiteText(0.8,12)
71.         Text('IPv6').opacityWhiteText(0.8)
72.           .border({style:BorderStyle.Solid,width:1,color:Color.White,radius:15})
73.           .padding({left:5,right:5})
74.         Text('网络').opacityWhiteText(0.8,12)
75.       }
76.       Text('‘减更多’指黑马健康App希望通过软件工具的形式，帮助更多用户实现身材管理')
77.         .opacityWhiteText(0.6)
78.       Text('浙ICP备0000000号-36D')
79.         .opacityWhiteText(0.4)
80.         .margin({bottom:35})
83.     }
84.     .width('100%')
85.     .height('100%')
86.     .backgroundColor($r('app.color.welcome_page_background'))
87.   }
88. }

复制代码

弹窗

1. import { CommonConstants } from '../../common/constants/CommonConstants'
3. @CustomDialog
4. export default struct UserPrivacyDialog {
5.   controller:CustomDialogController
6.   confirm:()=>void
7.   cancel:()=>void
9.   build() {
10.     Column({space:CommonConstants.SPACE_10}){
11.       //1.标题
12.       Text($r('app.string.user_privacy_title'))
13.         .fontSize(20)
14.         .fontWeight(CommonConstants.FONT_WEIGHT_700)
15.       //2.内容
16.       Text($r('app.string.user_privacy_content'))
17.       //3.按钮
18.       Button($r('app.string.agree_label'))
19.         .width(150)
20.         .backgroundColor($r('app.color.primary_color'))
21.         .onClick(()=>{
22.           this.confirm()
23.           this.controller.close()
24.         })
26.       Button($r('app.string.refuse_label'))
27.         .width(150)
28.         .backgroundColor($r('app.color.lightest_primary_color'))
29.         .fontColor($r('app.color.light_gray'))
30.         .onClick(()=>{
31.           this.cancel()
32.           this.controller.close()
33.         })
34.     }
35.     .width('100%')
36.     .padding(10)
37.   }
38. }

复制代码

总结：

上述代码定义了一个名为WelcomePage（黑马健康欢迎页面）的组件，用于显示欢迎页面。在这个页面中，首先会检查用户是否同意了隐私政策，如果同意则跳转到首页，否则弹出隐私政策对话框。用户可以选择同意或退出应用。当用户点击同意按钮时，会调用confirm()方法，关闭对话框，进入首页；当用户点击拒绝按钮时，会调用cancel()方法，关闭对话框，退出应用。

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