做网站5年工资多少专业建设金融行业网站的公司

做网站5年工资多少,专业建设金融行业网站的公司,响应式网站如何做,网站域名更改了怎么换个人首页#xff1a; VON 鸿蒙系列专栏#xff1a; 鸿蒙开发小型案例总结 综合案例 #xff1a;鸿蒙综合案例开发 鸿蒙6.0#xff1a;从0开始的开源鸿蒙6.0.0 鸿蒙5.0#xff1a;鸿蒙5.0零基础入门到项目实战 Electron适配开源鸿蒙专栏#xff1a;Electron for Open…个人首页 VON鸿蒙系列专栏 鸿蒙开发小型案例总结综合案例 鸿蒙综合案例开发鸿蒙6.0从0开始的开源鸿蒙6.0.0鸿蒙5.0鸿蒙5.0零基础入门到项目实战Electron适配开源鸿蒙专栏Electron for OpenHarmonyFlutter 适配开源鸿蒙专栏Flutter for OpenHarmony本文所属专栏鸿蒙综合案例开发本文atomgit地址小V健身小V健身助手开发手记二从数据输入到任务管理——构建动态运动记录系统 项目结构概览⏳ 功能一日期选择弹窗 —— DateDialog 核心要点 功能二任务添加弹窗 —— TaskAddDialog 设计亮点 UI 优化 功能三首页任务列表 —— HomeContent✨ 关键逻辑 数据流转与状态同步✅ 总结代码总结dialgopagesutilview/home从数据输入到任务管理——构建动态运动记录系统在上一篇文章中我们实现了「小V健身助手」的启动流程与用户隐私授权机制确保应用在合规的前提下为用户提供服务。本篇将深入运动任务录入与管理模块讲解如何通过自定义弹窗、本地状态共享与动态数据渲染构建一个流畅、直观的健康数据录入体验。我们将围绕以下三大功能展开日期选择弹窗让用户自由设定运动日期任务添加弹窗支持数字键盘输入、实时卡路里计算首页任务列表动态更新实现数据联动与可视化反馈。整个系统采用HarmonyOS ArkTS Stage 模型构建充分体现了组件化、状态驱动与端侧轻量化设计思想。 项目结构概览ets/ ├── dialog/ │ ├── DateDialog.ets // 日期选择弹窗 │ └── TaskAddDialog.ets // 任务添加弹窗 ├── pages/ │ ├── AddTaskPage.ets // 添加任务页面 │ └── MainIndexPage.ets // 主页 ├── util/ │ └── DateUtil.ets // 日期工具类 └── view/ └── home/ ├── HomeContent.ets // 首页内容组件 └── Addbtn.ets // 浮动添加按钮各组件职责清晰便于维护与扩展。⏳ 功能一日期选择弹窗 ——DateDialog用户常需记录非当天的运动数据如补录昨日训练因此我们需要一个独立的日期选择器。CustomDialogexportdefaultstruct DateDialog{controller:CustomDialogController date:DatenewDate()build(){Column(){DatePicker({start:newDate(2020-01-01),end:newDate(),selected:this.date}).onChange((value:DatePickerResult){constyearNumber(value.year)||newDate().getFullYear();constmonthNumber(value.month)||newDate().getMonth();constdayNumber(value.day)||newDate().getDate();this.date.setFullYear(year,month,day);})Row({space:20}){Button(取消).width(120).backgroundColor(#ff3e3a3a).onClick(()this.controller.close())Button(确定).width(120).backgroundColor(#ff3e3a3a).onClick((){AppStorage.SetOrCreate(date,this.date.getTime())this.controller.close()})}}.padding(12)}} 核心要点使用DatePicker组件提供标准日期选择界面onChange回调处理用户选择避免undefined值点击“确定”后将时间戳写入全局AppStorage供其他页面读取AppStorage.SetOrCreate是跨页面共享状态的最佳实践。✅最佳实践避免使用State或Link共享全局状态应优先使用AppStorage实现跨组件通信。 功能二任务添加弹窗 ——TaskAddDialog这是本模块的核心交互组件支持用户输入运动时长并自动计算卡路里消耗。CustomDialogexportdefaultstruct TaskAddDialog{StorageProp(date)date:numberDateUtil.beginTimeOfDay(newDate())// 从全局获取日期State show:booleantrueState value:stringState num:number0State calorie:number500// 每小时消耗卡路里BuildersaveBtn(text:string,onClick:()void){Button(){Text(text).fontSize(20).fontWeight(800).opacity(0.9)}.width(80).height(50).type(ButtonType.Normal).backgroundColor(#bfdefd).borderRadius(5).padding({left:3,right:3}).onClick(onClick)}numArr:string[][1,2,3,4,5,6,7,8,9,0,.]clickNumber(num:string){letvalthis.valuenumif(val.includes(.)val.lastIndexOf(.)!val.length-1val.indexOf(.)!val.lastIndexOf(.))returnletamountthis.parseFloat(val)if(amount999.9){this.num999.0this.value999}else{this.numamountthis.valueval}}clickDel(){if(this.value.length0)returnthis.valuethis.value.substring(0,this.value.length-1)this.numthis.parseFloat(this.value)}parseFloat(str:string):number{if(!str)return0if(str.endsWith(.))strstr.slice(0,-1)returnparseFloat(str)}} 设计亮点数字键盘模拟通过GridForEach实现九宫格数字输入小数点校验防止输入多个小数点或非法格式数值限制最大值设为 999.9避免误操作实时卡路里计算this.calorie * this.num自动更新预估消耗。 UI 优化使用Panel实现半屏滑动键盘提升移动端体验mode(PanelMode.Half)halfHeight(1050)控制面板高度dragBar(false)隐藏拖拽条保持简洁。Panel(this.show){Column(){...}}.type(PanelType.Temporary).dragBar(false).width(100%) 功能三首页任务列表 ——HomeContent首页是用户查看运动成果的主要入口需要动态加载并展示任务数据。Componentexportdefaultstruct HomeContent{StorageProp(date)date:numberDateUtil.beginTimeOfDay(newDate())controller:CustomDialogControllernewCustomDialogController({builder:DateDialog({date:newDate(this.date)})})addTask(){router.pushUrl({url:pages/AddTaskPage})}State arr:SportDate[][{name:游泳,icon:$r(app.media.home_ic_swimming),consume:60,num:10,target:10,pre:分钟},// 更多运动项...]build(){Column(){// 顶部日期选择区域Row(){Text(DateUtil.formatDate(this.date)).fontSize(15).fontWeight(500)Image($r(app.media.arrow_down)).width(20)}.width(90%).height(50).backgroundColor(Color.White).margin({left:19,top:90}).borderRadius(20).justifyContent(FlexAlign.Center).onClick(()this.controller.open())// 任务列表Column(){Text(任务列表).fontSize(13).fontWeight(700).margin({left:20,top:20,bottom:10})if(this.arr.length!0){List(){ForEach(this.arr,(item:SportDate){ListItem(){Row(){Image(item.icon).width(50).height(50)Text(item.name).fontSize(13).fontWeight(600).opacity(0.8)Blank()if(item.numitem.target){Text(消耗${item.consume*item.num}卡路里).fontSize(13).fontColor(#3385d8)}else{Text(${item.num}:${item.target}/${item.pre}).fontSize(13).fontWeight(600)}}.width(100%).backgroundColor(Color.White).borderRadius(15)}.width(90%)})}.width(100%).alignListItem(ListItemAlign.Center)}else{Column({space:8}){Image($r(app.media.ic_no_data)).width(350).height(200)Text(暂无任务请添加任务).fontSize(20).opacity(0.4).margin({top:20})}.margin({top:50,left:10})}Addbtn({clickAction:()this.addTask()})}.width(100%).height(100%).alignItems(HorizontalAlign.Start)}.backgroundColor(#efefef).width(100%).height(100%)}}✨ 关键逻辑使用StorageProp实时监听date变化确保页面刷新任务完成状态判断item.num item.target时显示“已完成”提示空数据友好提示无任务时显示“暂无任务”图标与文字浮动添加按钮Addbtn支持点击跳转至添加页面。 数据流转与状态同步整个系统的数据流如下[用户选择日期] → [DateDialog] → [AppStorage] → [HomeContent] ↑ | [TaskAddDialog] → [AddTaskPage]所有组件均通过AppStorage共享date状态实现跨页面联动。未来可扩展为将任务数据存入data_preferences或数据库支持多天历史记录切换添加图表展示每日卡路里趋势。✅ 总结通过本次开发我们成功构建了「小V健身助手」的运动任务管理闭环模块技术实现用户价值日期选择DatePickerAppStorage支持补录历史运动任务输入数字键盘 实时计算快速准确记录数据首页展示List 状态联动清晰呈现运动成果这不仅是功能的实现更是对用户体验一致性和数据驱动设计的践行。代码已通过 HarmonyOS SDK API Version 10 验证适用于 Stage 模型项目。代码总结dialgoDateDialogCustomDialogexportdefaultstruct DateDialog{controller:CustomDialogController date:DatenewDate()build(){Column(){DatePicker({start:newDate(2020-01-01),end:newDate(),selected:this.date}).onChange((value:DatePickerResult){// 给year/month/day加默认值避免undefinedconstyearNumber(value.year)||newDate().getFullYear();constmonthNumber(value.month)||newDate().getMonth();constdayNumber(value.day)||newDate().getDate();this.date.setFullYear(year,month,day);})Row({space:20}){Button(取消).width(120).backgroundColor(#ff3e3a3a).onClick((){this.controller.close()})Button(确定).width(120).backgroundColor(#ff3e3a3a).onClick((){// 将日期保存到全局AppStorage.SetOrCreate(date,this.date.getTime())this.controller.close()// 关闭弹窗})}}.padding(12)}}TaskAddDialogimportDateUtilfrom../util/DateUtilExtend(GridItem)functionbtnStyle(){.backgroundColor(Color.White).borderRadius(15).opacity(0.7).height(50)}interfaceSaveBtnFace{}CustomDialogexportdefaultstruct TaskAddDialog{// 获取到日期毫秒值StorageProp(date)date:numberDateUtil.beginTimeOfDay(newDate())// 从全局获取日期State show:booleantrueState value:stringState num:number0State calorie:number500;// 复用确认按钮BuildersaveBtn(text:string,onClick:()SaveBtnFace){Button(){Text(text).fontSize(20).fontWeight(800).opacity(0.9)}.width(80).height(50).type(ButtonType.Normal).backgroundColor(#bfdefd).borderRadius(5).padding({left:3,right:3}).onClick(onClick)}// 键盘数字numArr:string[][1,2,3,4,5,6,7,8,9,0,.]controller:CustomDialogController// 数字点击事件逻辑clickNumber(num:string){letvalthis.valuenum// 检查小数点letfirstIndexval.indexOf(.)letlastIndexval.lastIndexOf(.)if(firstIndex!lastIndex||(lastIndex!-1lastIndexval.length-2)){// 校验逻辑return}letamountthis.parseFloat(val)if(amount999.9){// 限制最大数this.num999.0this.value999}else{this.numamountthis.valueval}}// 删除事件clickDel(){if(this.value.length0){this.valuethis.num0return}this.valuethis.value.substring(0,this.value.length-1)this.numthis.parseFloat(this.value)}// 字符串转小数parseFloat(str:string){if(!str){return0}if(str.endsWith(.)){strstr.substring(0,str.length-1)}returnparseFloat(str)}build(){Column(){// 弹窗头部Row(){Text(DateUtil.formatDate(this.date)).fontSize(15).fontWeight(800)Blank(10)Button(){Text(x).fontSize(15).fontColor(Color.White).fontWeight(800)}.width(20).height(20).backgroundColor(Color.Red).padding({bottom:5}).onClick((){this.controller.close()})}.width(95%).justifyContent(FlexAlign.End)// 中间部分Column({space:10}){Image($r(app.media.home_ic_swimming)).width(90).height(90)Text(游泳).fontSize(20).fontWeight(700)Row(){TextInput({text:this.num.toFixed(1)}).width(35%).fontSize(30).fontColor(#a6c1db).caretColor(Color.Transparent).textAlign(TextAlign.Center).copyOption(CopyOptions.None)Text(/小时).fontSize(30).opacity(0.7).fontWeight(800)}// 小键盘Panel(this.show){Column(){Grid(){ForEach(this.numArr,(item:string){GridItem(){Text(item).fontSize(20).fontWeight(500)}.btnStyle().onClick((){this.clickNumber(item)})})// 删除按钮GridItem(){Text(删除).fontSize(20).fontWeight(500)}.btnStyle().onClick((){this.clickDel()})// 确定按钮GridItem(){this.saveBtn(确定,()this.showfalse)}// 从1开始到3结束也就是占一整行.columnStart(1).columnEnd(3).btnStyle()}.columnsTemplate(1fr 1fr 1fr).columnsGap(5).rowsGap(8).width(95%).padding({top:15})}}.mode(PanelMode.Half).halfHeight(1050).type(PanelType.Temporary).dragBar(false).width(100%)Row(){Text(预计消耗this.calorie*this.num卡路里).fontSize(20).fontWeight(700).opacity(0.7)}Row({space:20}){this.saveBtn(修改,()this.showtrue)Button(){Text(确定).fontSize(20).fontWeight(800).opacity(0.9)}.width(80).height(50).type(ButtonType.Normal).backgroundColor(#bfdefd).borderRadius(5).padding({left:3,right:3}).onClick((){this.controller.close()})}}}.width(95%).height(95%).alignItems(HorizontalAlign.Center)}}UserPrivacyDialogCustomDialogexportdefaultstruct UserPrivacyDialog{controller:CustomDialogControllernewCustomDialogController({builder:})cancel:Function(){}// 不同意confirm:Function(){}// 同意build(){Column({space:10}){Text(欢迎使用小V健身)Button(同意).fontColor(Color.White).backgroundColor(#ff06ae27).width(150).onClick((){this.confirm()this.controller.close()})Button(不同意).fontColor(Color.Gray).backgroundColor(#c8fcd0).width(150).onClick((){this.cancel()this.controller.close()})}.width(80%).height(75%)}}pagesAddTaskPageimport{router}fromkit.ArkUIimportTaskAddDialogfrom../dialog/TaskAddDialoginterfaceAddSportDate{name:String,icon:ResourceStr,consume:number,pre:String}Entry Component struct AddTaskPage{controller:CustomDialogControllernewCustomDialogController({builder:TaskAddDialog()})State arr:AddSportDate[][{name:游泳,icon:$r(app.media.home_ic_swimming),consume:60,pre:分钟,},{name:游泳,icon:$r(app.media.home_ic_swimming),consume:60,pre:分钟,},{name:游泳,icon:$r(app.media.home_ic_swimming),consume:60,pre:分钟,},{name:游泳,icon:$r(app.media.home_ic_swimming),consume:60,pre:分钟,},]build(){Column(){Row(){Image($r(app.media.ic_back)).width(25)}.margin({top:10,left:10,bottom:10}).onClick((){router.back()})List({space:10}){ForEach(this.arr,(item:AddSportDate){ListItem(){Row(){Image(item.icon).width(60).height(60).margin({right:15})Column(){Text(item.name).fontSize(15).fontWeight(500)Text(item.consume卡路里/item.pre).fontSize(10).fontWeight(600).opacity(0.7)}.alignItems(HorizontalAlign.Start)Blank()Button(){Image($r(app.media.ic_list_add)).width(20)}.onClick((){this.controller.open()})}.width(100%).justifyContent(FlexAlign.SpaceBetween)}.width(90%).backgroundColor(Color.White).padding(5).borderRadius(15)})}.width(100%).alignListItem(ListItemAlign.Center)}.width(100%).height(100%).backgroundColor(#efefef).alignItems(HorizontalAlign.Start)}}IndeximportUserPrivacyDialogfrom../dialog/UserPrivacyDialogimport{common}fromkit.AbilityKitimportdata_preferencesfromohos.data.preferencesimport{router}fromkit.ArkUI// 定义常量存储首选项中的键constH_STORE:stringV_healthconstIS_PRIVACY:stringisPrivacyEntry Component struct Index{// 生命周期contest:common.UIAbilityContextgetContext(this)ascommon.UIAbilityContext;dialogController:CustomDialogControllernewCustomDialogController({builder:UserPrivacyDialog({cancel:(){this.exitAPP()},confirm:(){this.onConfirm()}})})// 点击同意后的逻辑onConfirm(){// 定义首选项letpreferencesdata_preferences.getPreferences(this.contest,H_STORE)// 异步处理首选项中的数据preferences.then((res){res.put(IS_PRIVACY,true).then((){res.flush();// 记录日志console.log(Index,isPrivacy记录成功);this.jumpToMain()}).catch((err:Error){console.log(Index,isPrivacy记录失败原因err);})})}// 点击不同意时的逻辑exitAPP(){this.contest.terminateSelf()}// 页面加载开始执行逻辑aboutToAppear():void{letpreferencesdata_preferences.getPreferences(this.contest,H_STORE)preferences.then((res){res.get(IS_PRIVACY,false).then((isPrivate){// 判断传入的参数if(isPrivatetrue){// 点击同意跳转到首页this.jumpToMain()}else{this.dialogController.open()}})})}// 页面结束时的执行逻辑aboutToDisappear():void{clearTimeout()}// 跳转到首页jumpToMain(){setTimeout((){router.replaceUrl({url:pages/MainIndexPage})},2000)}build(){Column(){}.width(100%).height(100%).backgroundImage($r(app.media.backgroundBegin)).backgroundImageSize({width:100%,height:100%})}}MainIndexPageimportHomeContentfrom../view/home/HomeContentEntry Component struct MainIndexPage{State selectIndex:number0BuilderTabBarBuilder(index:number,selIcon:ResourceStr,normalIcon:ResourceStr,text:ResourceStr){Column(){Image(this.selectIndexindex?selIcon:normalIcon).width(20)Text(text).fontSize(10).fontColor(this.selectIndexindex?#3385d8:#c4c4c4)}}build(){Column(){Tabs({barPosition:BarPosition.End,index:this.selectIndex}){// 主页TabContent(){HomeContent()}.tabBar(this.TabBarBuilder(0,$r(app.media.tabs_home_sel),$r(app.media.tabs_home_normal),主页))// 成就页TabContent().tabBar(this.TabBarBuilder(1,$r(app.media.tabs_achieve_sel),$r(app.media.tabs_achieve_normal),成就))// 个人页TabContent().tabBar(this.TabBarBuilder(2,$r(app.media.tabs_per_sel),$r(app.media.tabs_per_normal),个人))}.onChange((num:number){this.selectIndexnum})}}}utilDateUtilclassDateUtil{formatDate(num:number){letdatenewDate(num)letyeardate.getFullYear()letmonthdate.getMonth()1letdaydate.getDate()letmmonth10?0month:monthletdday10?0day:dayreturn${year}年${m}月${d}日}beginTimeOfDay(date:Date){letdnewDate(date.getFullYear(),date.getMonth(),date.getDate())returnd.getTime()}}letdateUtilnewDateUtil()exportdefaultdateUtilasDateUtilview/homeAddbtnComponentexportdefaultstruct Addbtn{clickAction:Function(){}build(){Button({type:ButtonType.Circle,stateEffect:false}){Image($r(app.media.ic_add)).borderRadius(50%).width(100%).height(100%).fillColor(#c9f2fd)}.zIndex(2).position({x:78%,y:48%}).width(48).height(48).onClick((){this.clickAction()})}}HomeContentimportDateDialogfrom../../dialog/DateDialogimportDateUtilfrom../../util/DateUtilimportAddbtnfrom./Addbtnimport{router}fromkit.ArkUI// 首页运动数据类型接口interfaceSportDate{name:String,icon:ResourceStr,consume:number,num:number,target:number,pre:String}Componentexportdefaultstruct HomeContent{// 获取到日期毫秒值StorageProp(date)date:numberDateUtil.beginTimeOfDay(newDate())// 从全局获取日期controller:CustomDialogControllernewCustomDialogController({builder:DateDialog({date:newDate(this.date)})})addTask(){router.pushUrl({url:pages/AddTaskPage})console.log(跳转到添加任务页面)}// 运动数据State arr:SportDate[][{name:游泳,icon:$r(app.media.home_ic_swimming),consume:60,num:10,target:10,pre:分钟,},{name:跳绳,icon:$r(app.media.home_ic_swimming),consume:60,num:10,target:10,pre:分钟,},{name:跳绳,icon:$r(app.media.home_ic_swimming),consume:60,num:10,target:10,pre:分钟,},{name:跳绳,icon:$r(app.media.home_ic_swimming),consume:60,num:10,target:10,pre:分钟,},]build(){Column(){// 上半部分Column(){Row(){Text(DateUtil.formatDate(this.date)).fontSize(15).fontWeight(500)Image($r(app.media.arrow_down)).width(20)}.width(90%).height(50).backgroundColor(Color.White).margin({left:19,top:90}).borderRadius(20).justifyContent(FlexAlign.Center).onClick((){this.controller.open()})}.backgroundImage($r(app.media.home_bg)).backgroundImageSize({width:100%,height:100%}).width(100%).height(40%).alignItems(HorizontalAlign.Start).borderRadius({bottomLeft:20,bottomRight:20})// 下半部分Column(){Text(任务列表).fontSize(13).fontWeight(700).margin({left:20,top:20,bottom:10})if(this.arr.length!0){Column(){List({space:10}){ForEach(this.arr,(item:SportDate){ListItem(){Row(){Image(item.icon).width(50).height(50)Text(item.name).fontSize(13).fontWeight(600).opacity(0.8)Blank()if(item.numitem.target){// 任务已经完成Text(消耗item.consume*item.num卡路里).fontSize(13).fontWeight(600).margin({right:10}).fontColor(#3385d8)}else{// 任务还没有完成Text(item.num:item.target/item.pre).fontSize(13).fontWeight(600).margin({right:10})}}.width(100%).backgroundColor(Color.White).borderRadius(15)}.width(90%)})}.width(100%).alignListItem(ListItemAlign.Center)}.width(100%)}else{// 如果没有数据Column({space:8}){Image($r(app.media.ic_no_data)).width(350).height(200)Text(暂无任务请添加任务).fontSize(20).opacity(0.4).margin({top:20})}.margin({top:50,left:10})}Addbtn({clickAction:(){this.addTask()}})}.width(100%).height(100%).alignItems(HorizontalAlign.Start)}.backgroundColor(#efefef).width(100%).height(100%)}}