鸿蒙实战案例——欢迎页面UI实现及欢迎页面业务的实现（一）
发布时间
阅读量：
阅读量
前言
当开发移动应用时
HeimaHealthy项目总体在DevEcoStudio各页面文件布局如下
一、设计与布局
欢迎界面设计
欢迎页面设计拟采用简约的设计方案，并将融入品牌形象的核心元素以最大限度地抓住用户的注意力
下面是设计要素的详细说明：
- 中央Slogan和Logo：中央区域的标志名称与视觉符号体现了黑马健康App的核心理念，并提升了品牌知名度。
- 文本描述：在界面底部设置的文字说明中，在简明扼要地阐述了主要功能与服务范围的基础上，在用户体验方面也进行了重点强调。
- 功能引导：当用户第一次打开应用程序时，在系统中会弹出一个提示对话框询问其使用意愿。随后根据用户的选项提供相应的指引让用户可以选择是否继续使用或退出应用程序。
技术实现
该代码基于HarmonyOS的能力框架进行构建，并通过一系列关键技术点来支撑页面的交互逻辑。
- UI交互能力：该应用基于HarmonyOS的强大UI支持实现了多端适配的响应式界面设计。
- 隐私管理：该系统采用本地偏好设置（@ohos.data.preferences）来存储用户的同意状态，并以应对应用程序重启时依据用户的偏好进行相应处理。
- 导航流转：该应用依赖于路由(@ohos.router)实现页面切换与替换功能，并确保当用户同意隐私政策后能够顺利进入首页。
二、欢迎页面设计步骤
1.欢迎页面布局分析
布局分析
功能分析
2.自定义弹窗
1.使用@CustomDialog装饰器声明弹窗组件；
2.在页面中声明弹窗控制器，并利用其控制弹窗
三、欢迎页面相关代码
欢迎页面
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) function opacityWhiteText(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()
})
})
async aboutToAppear(){
//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（黑马健康欢迎页面） 来实现功能，在该页面中对用户的访问权限进行管理流程设计如下：首先会对用户的隐私政策 consenting状态进行检查；如果确认同意，则直接跳转至主页；否则将展示隐私政策对话框供用户进一步授权确认；在这一过程中可选择接受或放弃继续访问黑马健康的其他资源；当有用户点击‘接受’按钮触发时，默认会调用accept()函数来完成相应操作；而若发现有用户体验度不足的情况发生，则会自动触发reject()函数以终止当前操作流程。
全部评论 (0)
还没有任何评论哟~