dw网站根目录怎么做,广告设计公司行业地位,织梦网站首页文字修改,福州网页健康生活应用#xff0c;主要功能包括#xff1a; 用户可以创建最多6个健康生活任务#xff08;早起#xff0c;喝水#xff0c;吃苹果#xff0c;每日微笑#xff0c;刷牙#xff0c;早睡#xff09;#xff0c;并设置任务目标、是否开启提醒、提醒时间、每周任务频…健康生活应用主要功能包括 用户可以创建最多6个健康生活任务早起喝水吃苹果每日微笑刷牙早睡并设置任务目标、是否开启提醒、提醒时间、每周任务频率。用户可以在主页面对设置的健康生活任务进行打卡其中早起、每日微笑、刷牙和早睡只需打卡一次即可完成任务喝水、吃苹果需要根据任务目标量多次打卡完成。主页可显示当天的健康生活任务完成进度当天所有任务都打卡完成后进度为100%并且用户的连续打卡天数加一。 实操步骤 应用主页面 启动页 给应用添加一个启动页启动页里需要用到定时器来实现启动页展示固定时间后跳转应用主页的功能。具体实现逻辑是 通过修改entryability里的loadContent路径可以改变应用的入口文件此处改为SplashPage。在SplashPage通过首选项来实现“权限管理”弹窗。如果需要弹窗用户点击同意后通过首选项对用户的操作做持久化保存。 // EntryAbility.ets windowStage.loadContent(pages/SplashPage, (err, data) {if (err.code) {...}Logger.info(windowStage, Succeeded in loading the content. Data: JSON.stringify(data)) });// SplashPage.ets import common from ohos.app.ability.common; import data_preferences from ohos.data.preferences;Entry Component struct SplashIndex {context: common.UIAbilityContext getContext(this) as common.UIAbilityContext;onConfirm() {let preferences data_preferences.getPreferences(that.context, H_STORE);preferences.then((res) {res.put(IS_PRIVACY, true).then(() {res.flush();Logger.info(SplashPage, isPrivacy is put success);}).catch((err: Error) {Logger.info(SplashPage, isPrivacy put failed. Cause: err);});})this.jumpAdPage();}exitApp() {this.context.terminateSelf();}jumpAdPage() {setTimeout(() {router.replaceUrl({ url: pages/AdvertisingPage });}, Const.LAUNCHER_DELAY_TIME);}aboutToAppear() {let preferences data_preferences.getPreferences(this.context, H_STORE);preferences.then((res) {res.get(IS_PRIVACY, false).then((isPrivate) {if (isPrivate true) {this.jumpAdPage();} else {this.dialogController.open();}});});}build() {...} }应用入口 我们需要给APP添加底部菜单栏用于切换不同的应用模块由于各个模块之间属于完全独立的情况并且不需要每次切换都进行界面的刷新所以我们用到了TabsTabContent组件。 本应用一共有首页HomeIndex成就AchievementIndex和我的MineIndex三个模块分别对应Tabs组件的三个子组件TabContent。 // MainPage.ets Tabs({ barPosition: BarPosition.End, controller: this.tabController }) {TabContent() { HomeIndex({ homeStore: $homeStore, editedTaskInfo: $editedTaskInfo, editedTaskID: $editedTaskID }).borderWidth({ bottom: 1 }).borderColor($r(app.color.primaryBgColor))}.tabBar(this.TabBuilder(TabId.HOME)) .align(Alignment.Start)TabContent() { AchievementIndex() }.tabBar(this.TabBuilder(TabId.ACHIEVEMENT)) TabContent() { MineIndex()}.tabBar(this.TabBuilder(TabId.MINE)) }首页 首页包含了任务信息的所有入口包含任务列表的展示任务的编辑和新增上下滚动的过程中顶部导航栏的渐变日期的切换以及随着日期切换界面任务列表跟着同步的功能。具体代码实现我们将在下边分模块进行说明。 导航栏背景渐变 Scroll滚动的过程中在它的onScrollAction()方法里我们通过计算它Y轴的偏移量来改变当前界面的State修饰的naviAlpha变量值进而改变顶部标题的背景色。 // HomeComponent.ets // 视图滚动的过程中处理导航栏的透明度 State naviAlpha: number 0; ... onScrollAction() { this.yOffset this.scroller.currentOffset().yOffset; if (this.yOffset Const.DEFAULT_56) { this.naviAlpha 1; } else { this.naviAlpha this.yOffset / Const.DEFAULT_56; } }日历组件 日历组件主要用到的是一个横向滑动的Scroll组件。手动滑动页面时通过在onScrollEndAction()方法里计算Scroll的偏移量来实现分页的效果同时Scroll有提供scrollPage()方法可供我们点击左右按钮的时候来进行页面切换。需要在Scroll滑动到左边边缘的时候去请求更多的历史数据以便Scroll能一直滑动通过Scroll的onScrollEdge方法可以判断它是否已滑到边缘位置。homeStore主要是请求数据库的数据并对数据进行处理进而渲染到界面上。同时还需要知道怎么根据当天的日期计算出本周内的所有日期数据。 // WeekCalendarComponent.ets build() { Row() { Column() { Row() {...} Scroll(this.scroller) { Row() { ForEach(this.homeStore.dateArr, (item: WeekDateModel, index?: number) { Column() { Text(item.weekTitle) .fontColor(sameDate(item.date, this.homeStore.showDate) ? $r(app.color.blueColor) : $r(app.color.titleColor)) Divider().color(sameDate(item.date, this.homeStore.showDate) ? $r(app.color.blueColor) : $r(app.color.white)) Image(this.getProgressImg(item)) } .onClick(() WeekCalendarMethods.calenderItemClickAction(item, index, this.homeStore)) }) } } .onScrollStop(() this.onScrollEndAction()) .onScrollEdge((event) this.onScrollEdgeAction(event)) }}} }// WeekCalendarComponent.ets // scroll滚动停止时通过判断偏移量进行分页处理 onScrollEndAction() {// 区分是否是手动滑动点击左右箭头按钮导致Scroll滑动时不作处理不然会引起死循环if (this.isPageScroll false) {let page Math.round(this.scroller.currentOffset().xOffset / this.scrollWidth);page (this.isLoadMore true) ? page 1 : page;if (this.scroller.currentOffset().xOffset % this.scrollWidth ! 0 || this.isLoadMore true) {let xOffset page * this.scrollWidth;// 滑动到指定位置this.scroller.scrollTo({ xOffset, yOffset: 0 } as ScrollTo);this.isLoadMore false;}// 处理当前界面展示的数据 this.currentPage this.homeStore.dateArr.length / Const.WEEK_DAY_NUM - page - 1;let dayModel: WeekDateModel this.homeStore.dateArr[Const.WEEK_DAY_NUM * page this.homeStore.selectedDay];this.homeStore!.setSelectedShowDate(dayModel!.date!.getTime());}this.isPageScroll false; }// WeekCalendarComponent.ets onScrollEdgeAction(side: Edge) {if (side Edge.Top this.isPageScroll false) {Logger.info(HomeIndex, onScrollEdge: currentPage this.currentPage);if ((this.currentPage 2) * Const.WEEK_DAY_NUM this.homeStore.dateArr.length) {Logger.info(HomeIndex, onScrollEdge: load more data);let date: Date new Date(this.homeStore.showDate);date.setDate(date.getDate() - Const.WEEK_DAY_NUM);that.homeStore.getPreWeekData(date, () {});this.isLoadMore true;}} }// HomeViewModel.ets public getPreWeekData(date: Date, callback: Function) {let weekCalendarInfo: WeekCalendarInfo getPreviousWeek(date); // 请求数据库数据DayInfoApi.queryList(weekCalendarInfo.strArr, (res: DayInfo[]) {// 数据处理... this.dateArr weekCalendarInfo.arr.concat(...this.dateArr);}) }// WeekCalendarModel.ets export function getPreviousWeek(showDate: Date): WeekCalendarInfo {let weekCalendarInfo: WeekCalendarInfo new WeekCalendarInfo();let arr: ArrayWeekDateModel [];let strArr: Arraystring []; // 由于date的getDay()方法返回的是0-6代表周日到周六我们界面上展示的周一-周日为一周所以这里要将getDay()数据偏移一天let currentDay showDate.getDay() - 1;// 将日期设置为当前周第一天的数据周一showDate.setDate(showDate.getDate() - currentDay);for (let index WEEK_DAY_NUM; index 0; index--) {let tempDate new Date(showDate);tempDate.setDate(showDate.getDate() - index);let dateStr dateToStr(tempDate);strArr.push(dateStr);arr.push(new WeekDateModel(WEEK_TITLES[tempDate.getDay()], dateStr, tempDate));}weekCalendarInfo.arr arr;weekCalendarInfo.strArr strArr;return weekCalendarInfo; }悬浮按钮 由于首页右下角有一个悬浮按钮所以首页整体我们用了一个Stack组件将右下角的悬浮按钮和顶部的title放在滚动组件层的上边。 // HomeComponent.ets build() { Stack() { Scroll(this.scroller) { Column() { ...Column() { ForEach(this.homeStore.getTaskListOfDay(), (item: TaskInfo) { TaskCard({taskInfoStr: JSON.stringify(item),clickAction: (isClick: boolean) this.taskItemAction(item, isClick)}) }, (item: TaskInfo) JSON.stringify(item))} }}.onScroll(() { this.onScrollAction() })// 悬浮按钮AddBtn({ clickAction: () { this.editTaskAction() } }) // 顶部title Row() { Text($r(app.string.EntryAbility_label))}.position({ x: 0, y: 0 }) .backgroundColor(rgba(${WHITE_COLOR_0X},${WHITE_COLOR_0X},${WHITE_COLOR_0X},${this.naviAlpha})) CustomDialogView() } .allSize() .backgroundColor($r(app.color.primaryBgColor)) }界面跳转及传参 首页任务列表长按时需要跳转到对应的任务编辑界面同时点击悬浮按钮时需要跳转到任务列表页面。页面跳转需要在头部引入router。 // HomeComponent.ets import router from ohos.router;taskItemAction(item: TaskInfo, isClick: boolean): void {if (!this.homeStore.checkCurrentDay()) {return;}if (isClick) {// 点击任务打卡let callback: CustomDialogCallback { confirmCallback: (taskTemp: TaskInfo) { this.onConfirm(taskTemp) }, cancelCallback: () {} };this.broadCast.emit(BroadCastType.SHOW_TASK_DETAIL_DIALOG, [item, callback]);} else {// 长按编辑任务let editTaskStr: string JSON.stringify(TaskMapById[item.taskID - 1]);let editTask: ITaskItem JSON.parse(editTaskStr);editTask.targetValue item?.targetValue;editTask.isAlarm item.isAlarm;editTask.startTime item.startTime;editTask.frequency item.frequency;editTask.isOpen item.isOpen;router.pushUrl({ url: pages/TaskEditPage, params: { params: JSON.stringify(editTask) } });} }任务创建与编辑 功能概述 用户点击悬浮按钮进入任务列表页点击任务列表可进入对应任务编辑的页面中对任务进行详细的设置之后点击完成按钮编辑任务后将返回首页。实现效果如图所示。 任务列表 任务列表页 任务列表页由上部分的标题、返回按钮以及正中间的任务列表组成。使用Navigation以及List组件构成元素使用ForEach遍历生成具体列表。这里是Navigation构成页面导航实现效果如图所示 // TaskListPage.ets Navigation() {Column() {// 页面中间的列表TaskList()}.width(Const.THOUSANDTH_1000).justifyContent(FlexAlign.Center) } .size({ width: Const.THOUSANDTH_1000, height: Const.THOUSANDTH_1000 }) .title(Const.ADD_TASK_TITLE) .titleMode(NavigationTitleMode.Mini)列表右侧有一个判断是否开启的文字标识点击某个列表需要跳转到对应的任务编辑页里。具体的列表实现 // TaskListComponent.ets List({ space: Const.LIST_ITEM_SPACE }) {ForEach(this.taskList, (item: ITaskItem) {ListItem() {Row() {Row() {Image(item?.icon)Text(item?.taskName)...}.width(Const.THOUSANDTH_500)Blank().layoutWeight(1)// 状态显示if (item?.isOpen) {Text($r(app.string.already_open))}Image($r(app.media.ic_right_grey)).width(Const.DEFAULT_8).height(Const.DEFAULT_16)}...}...// 路由跳转到任务编辑页.onClick(() {router.pushUrl({url: pages/TaskEditPage,params: {params: formatParams(item)}})})...}) }任务编辑 任务编辑页 任务编辑页由上方的“编辑任务”标题以及返回按钮主体内容的List配置项和下方的完成按钮组成。任务编辑页面由Navigation和一个自定义组件TaskDetail构成。自定义组件由List以及其子组件ListItem构成实现效果如图所示 // TaskEditPage.ets Navigation() {Column() {TaskDetail()}.width(Const.THOUSANDTH_1000).height(Const.THOUSANDTH_1000) } .size({ width: Const.THOUSANDTH_1000, height: Const.THOUSANDTH_1000 }) .title(Const.EDIT_TASK_TITLE).titleMode(NavigationTitleMode.Mini)// TaskDetailComponent.ets List({ space: Const.LIST_ITEM_SPACE }) {ListItem() {TaskChooseItem()}.listItemStyle()ListItem() {TargetSetItem()}.listItemStyle()// 一些特殊情况的禁用如每日微笑、每日刷牙的目标设置不可编辑.enabled( this.settingParams?.isOpen this.settingParams?.taskID ! taskType.smile this.settingParams?.taskID ! taskType.brushTeeth).onClick(() {this.broadCast.emit(BroadCastType.SHOW_TARGET_SETTING_DIALOG);})ListItem() {OpenRemindItem()}.listItemStyle()// 其中做了禁用判断需要任务打开才可以点击编辑.enabled(this.settingParams?.isOpen)ListItem() {RemindTimeItem()}.listItemStyle()// 提醒时间在开启提醒打开之后才可以编辑.enabled(this.settingParams?.isOpen this.settingParams?.isAlarm).onClick(() {this.broadCast.emit(BroadCastType.SHOW_REMIND_TIME_DIALOG);})ListItem() {FrequencyItem()}.listItemStyle().enabled(this.settingParams?.isOpen this.settingParams?.isAlarm).onClick(() {this.broadCast.emit(BroadCastType.SHOW_FREQUENCY_DIALOG);}) } .width(Const.THOUSANDTH_940)// TaskDetailComponent.ets addTask({// 相关参数... }) .then((res: number) {// 成功的状态成功后跳转首页GlobalContext.getContext().setObject(taskListChange, true);router.back({url: pages/MainPage,params: {editTask: this.backIndexParams()}})Logger.info(addTaskFinished, JSON.stringify(res)); }) .catch((error: Error) {// 失败的状态失败后弹出提示并打印错误日志prompt.showToast({message: Const.SETTING_FINISH_FAILED_MESSAGE})Logger.error(addTaskFailed, JSON.stringify(error)); })任务编辑弹窗 在自定义弹窗CustomDialogView组件内注册打开弹窗的事件当点击对应任务的编辑项时触发该事件进而打开弹窗。 // TaskDialogView.ets targetSettingDialog: CustomDialogController new CustomDialogController({builder: TargetSettingDialog(),autoCancel: true,alignment: DialogAlignment.Bottom,offset: { dx: Const.ZERO, dy: Const.MINUS_20 } }); ...// 注册事件 this.broadCast.on(BroadCastType.SHOW_TARGETSETTING_DIALOG, () {this.targetSettingDialog.open(); })// HomeComponent.ets taskItemAction(item: TaskInfo, isClick: boolean): void {...if (isClick) {let callback: CustomDialogCallback { confirmCallback: (taskTemp: TaskInfo) { this.onConfirm(taskTemp) }, cancelCallback: () {} };this.broadCast.emit(BroadCastType.SHOW_TASK_DETAIL_DIALOG, [item, callback]);} else {...} }任务目标设置有三种类型早睡早起的时间、喝水的量度、吃苹果的个数。故根据任务的ID进行区分将同一弹窗复用如图所示 其余弹窗实现基本类似这里不再赘述。 // TaskSettingDialog.ets if ([taskType.getup, taskType.sleepEarly].indexOf(this.settingParams?.taskID) Const.HAS_NO_INDEX) {TimePicker({selected: new Date(${new Date().toDateString()} 8:00:00),})... } else {TextPicker({ range: this.settingParams?.taskID taskType.drinkWater ? this.drinkRange : this.appleRange })... }// TaskSettingDialog.ets // 校验规则 compareTime(startTime: string, endTime: string) {if (returnTimeStamp(this.currentTime) returnTimeStamp(startTime) || returnTimeStamp(this.currentTime) returnTimeStamp(endTime)) {// 弹出提示prompt.showToast({message: commonConst.CHOOSE_TIME_OUT_RANGE})return false;}return true; }// 设置修改项 setTargetValue() {...if (this.settingParams?.taskID taskType.sleepEarly) {if (!this.compareTime(commonConst.SLEEP_EARLY_TIME, commonConst.SLEEP_LATE_TIME)) {return;}this.settingParams.targetValue this.currentTime;return;}this.settingParams.targetValue this.currentValue; }本文是鸿蒙开发中对OpenHarmony技术的简单运用更多的鸿蒙开发技术可以前往我主页查询下面分享鸿蒙开发4.0技术分布略缩图 高清完整版技术学习路线图如下寻找保存附鸿蒙文档 最后是效果如图