鸿蒙实战案例——欢迎页面UI实现及欢迎页面业务的实现（一）
前言在移动应用开辟过程中，欢迎页面是用户吸收到健康应用的首要入口，欢迎页面的布局设计成功与否直接关系到用户的视觉体验。因此，为了设计一款成功的欢迎页面布局，格外紧张，下面我就将为各人展示如何使用HarmonyOS框架构建一个相应式的欢迎页面。
HeimaHealthy项目总体在DevEcoStudio各页面文件布局如下
https://i-blog.csdnimg.cn/blog_migrate/07682f494020b0a7db52b8f338958c0b.png
一、设计与布局
欢迎界面设计
欢迎页面设计将采用简便的布局风格，团结品牌标志和关键信息，以吸引用户眼球。
下面是设计要素的详细说明：
[*] 中心Slogan和Logo：中心的Slogan和Logo展示了黑马健康App的标志性元素，加强了品牌识别度和用户记忆点。
[*]文本形貌： 界面底部的文本形貌通过简便明了的语言概括了黑马健康App的紧张服务和目标群体，帮助用户快速相识应用的价值主张。
[*]功能引导：用户初次打开应用时，通过弹窗提示用户相识隐私政策，并通过选择操作引导用户进入应用或退出。
技能实现
代码基于HarmonyOS的本领框架，采用了以下关键技能点来实现页面的构建和交互逻辑：
[*]UI交互显示本领：使用HarmonyOS的UI本领构建了相应式的界面布局，确保在不同装备上都能够精良地显示和交互。
[*]状态管理：使用了当地偏好设置(@ohos.data.preferences)来存储用户的同意状态，以便应用下次启动时能够根据用户的选择做出相应的处理。
[*]页面跳转：通过路由(@ohos.router)实现页面的跳转和替换，确保用户在同意隐私政策后能够顺利进入应用的首页。
二、欢迎页面设计步骤
1.欢迎页面布局分析
布局分析
https://i-blog.csdnimg.cn/blog_migrate/6fdf8d11b8ba6e59eb4d5d6cf2cfbbd2.png
功能分析
https://i-blog.csdnimg.cn/blog_migrate/e0a6cae6a311ed84ca0d8cf7e6cc36be.png
2.自定义弹窗
1.使用@CustomDialog装饰器声明弹窗组件；
https://i-blog.csdnimg.cn/blog_migrate/ea03f30d28550bcb2beab342bcdf3de9.png
2.在页面中声明弹窗控制器，并使用其控制弹窗
https://i-blog.csdnimg.cn/blog_migrate/e37054a8d2dcf6718ec4c0f614e37cf2.png
三、欢迎页面相干代码
欢迎页面
import UserPrivacyDialog from '../view/welcome/UserPrivacyDialog'
import common from '@ohos.app.ability.common'
import preferences from '@ohos.data.preferences'
import PreferenceUtil from '../common/utils/PreferenceUtil'
import router from '@ohos.router'
@Extend(Text) functionopacityWhiteText(opacity:number,fontSize:number=10){
.fontSize(fontSize)
.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()
})
})
asyncaboutToAppear(){
//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)
}
onConfirm(){
//1.保存首选项
PreferenceUtil.putPreferenceValue(PREF_KEY,true)
//2.跳转到首页
this.jumpToIndex()
}
exitApp(){
//退出App
this.context.terminateSelf()
}
build() {
Column({space:10}){
//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})
.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'))
}
} 弹窗
import { CommonConstants } from '../../common/constants/CommonConstants'
@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)
}
} 总结：
上述代码定义了一个名为WelcomePage（黑马健康欢迎页面）的组件，用于显示欢迎页面。在这个页面中，首先会检查用户是否同意了隐私政策，如果同意则跳转到首页，否则弹出隐私政策对话框。用户可以选择同意或退出应用。当用户点击同意按钮时，会调用confirm()方法，关闭对话框，进入首页；当用户点击拒绝按钮时，会调用cancel()方法，关闭对话框，退出应用。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]