EmailFeedbackPage 意见反馈 AboutPage 关于页前言当用户使用「海风日记」一段时间后可能会想这个 App 是谁做的我有问题该反馈给谁于是关于页AboutPage与意见反馈页EmailFeedbackPage成了产品「最后一公里」的关键触点。本文将从源码出发深入讲解EmailFeedbackPage 的反馈类型选择 文本输入 邮箱留档 提交校验AboutPage 的品牌头部 版本信息列表 版权尾部表单校验的enabled联动用户协议、隐私政策的「内部链接」跳转两个页面的视觉一致性原则一个好的「关于页」应该让用户感受到「这是有人在认真做的产品」而不是冷冰冰的版权声明。一、EmailFeedbackPage四段式表单意见反馈页采用经典的「类型选择 文本输入 邮箱留档 提交」结构。EntryComponentstruct EmailFeedbackPage{StatefeedbackType:number0StatefeedbackText:stringStateemail:stringbuild(){Column(){// 1. 导航栏this.NavBarBuilder(意见反馈)// 2. 表单主体Scroll(){Column({space:16}){this.TypeSelectorBuilder()// 反馈类型this.ContentInputBuilder()// 问题描述this.EmailInputBuilder()// 联系邮箱this.SubmitButtonBuilder()// 提交按钮}.padding({left:16,right:16,top:16,bottom:40})}.layoutWeight(1).scrollBar(BarState.Off)}.height(100%).backgroundColor(COLOR_BG)}}1.1 页面结构图┌────────────────────────────┐ │ ‹ 意见反馈 │ ← 导航栏 ├────────────────────────────┤ │ 反馈类型 │ │ [功能建议][问题反馈]… │ ← 类型选择 │ │ │ 问题描述 │ │ ┌────────────────────────┐│ │ │ TextArea 多行输入 ││ ← 文本输入 │ │ ││ │ └────────────────────────┘│ │ │ │ 联系邮箱选填 │ │ ┌────────────────────────┐│ │ │ Email 输入框 ││ ← 邮箱留档 │ └────────────────────────┘│ │ │ │ ┌────────────────────────┐│ │ │ 提交反馈 ││ ← 提交按钮 │ └────────────────────────┘│ └────────────────────────────┘二、反馈类型选择胶囊按钮组BuilderTypeSelectorBuilder(){Column(){Text(反馈类型).fontSize(12).fontColor(COLOR_TEXT_HINT)Row({space:8}){ForEach([功能建议,问题反馈,体验问题,其他],(label,i){Text(label).fontSize(13).fontColor(this.feedbackTypei?COLOR_WHITE:COLOR_TEXT_MAIN).backgroundColor(this.feedbackTypei?COLOR_PRIMARY:COLOR_BUTTON_INACTIVE_BG).borderRadius(14).padding({left:12,right:12,top:5,bottom:5}).onClick((){this.feedbackTypei})})}.margin({top:8})}.alignItems(HorizontalAlign.Start).width(100%)}2.1 视觉对比状态背景色字色选中COLOR_PRIMARY琥珀白色未选COLOR_BUTTON_INACTIVE_BG浅灰主文本色胶囊形borderRadius(14)与按钮高度约 28vp形成半圆符合 iOS 胶囊按钮规范。2.2 为什么不用单选 radio空间占用radio label 横向排列4 个选项需要 2 行可读性胶囊按钮的文字更醒目触控友好胶囊按钮的点击区域更大三、问题描述TextArea 多行输入BuilderContentInputBuilder(){Column(){Text(问题描述).fontSize(12).fontColor(COLOR_TEXT_HINT)TextArea({placeholder:请详细描述您遇到的问题,text:this.feedbackText}).constraintSize({minHeight:140}).backgroundColor(COLOR_CARD_BG).borderRadius(CARD_RADIUS).padding(12).onChange((v)this.feedbackTextv).margin({top:8})}.alignItems(HorizontalAlign.Start).width(100%)}3.1 关键属性属性值作用constraintSize.minHeight140vp输入框最少高度避免一开始只剩一行placeholder提示文字输入为空时显示backgroundColor卡片色与页面背景形成层次3.2 字符校验提交按钮的enabled状态会根据feedbackText的长度变化this.feedbackText.trim().length10少于 10 字按钮禁用避免无意义提交多于 500 字可选截断或提示「请精简描述」四、联系邮箱InputType.EmailBuilderEmailInputBuilder(){Column(){Text(联系邮箱选填).fontSize(12).fontColor(COLOR_TEXT_HINT)TextInput({placeholder:方便我们回复您,text:this.email}).type(InputType.Email).backgroundColor(COLOR_CARD_BG).borderRadius(INPUT_RADIUS).padding(12).onChange((v)this.emailv).margin({top:8})}.alignItems(HorizontalAlign.Start).width(100%)}4.1InputType.Email的作用移动端键盘自动显示和.快捷键部分输入法会校验邮箱格式4.2 邮箱格式校验可选constemailRegex/^[\w.-][\w.-]\.\w$/if(!emailRegex.test(this.email)){promptAction.showToast({message:邮箱格式不正确})return}五、提交按钮条件启用 视觉反馈BuilderSubmitButtonBuilder(){Button(提交反馈).width(90%).height(50).fontSize(16).fontColor(COLOR_WHITE).fontWeight(FontWeight.Bold).backgroundColor(this.feedbackText.trim().length10?COLOR_PRIMARY:COLOR_BUTTON_DISABLED_BG).borderRadius(BTN_RADIUS_FULL).enabled(this.feedbackText.trim().length10).onClick(()this.submitFeedback())}5.1 三层校验submitFeedback(){// 1. 必填校验if(this.feedbackText.trim().length10){promptAction.showToast({message:请至少输入 10 个字符})return}// 2. 邮箱格式校验如果填了if(this.email!/^[\w.-][\w.-]\.\w$/.test(this.email)){promptAction.showToast({message:邮箱格式不正确})return}// 3. 提交伪代码feedbackService.submit({type:this.feedbackType,content:this.feedbackText,email:this.email}).then((){promptAction.showToast({message:反馈已提交感谢支持})router.back()})}六、AboutPage三段式品牌展示关于页采用「品牌头部 信息列表 版权尾部」三段式结构。EntryComponentstruct AboutPage{build(){Column(){this.NavBarBuilder(关于海风)Scroll(){Column({space:24}){this.BrandHeaderBuilder()// 1. 品牌 Logothis.InfoListBuilder()// 2. 信息列表this.CopyrightFooterBuilder()// 3. 版权信息}.padding({left:16,right:16,top:32,bottom:40})}.layoutWeight(1).scrollBar(BarState.Off)}.height(100%).backgroundColor(COLOR_BG)}}七、品牌头部Logo 名称 版本 SloganBuilderBrandHeaderBuilder(){Column({space:12}){Stack(){Circle().width(80).height(80).fill(COLOR_AVATAR_BG)Text().fontSize(38)}Text(海风日记).fontSize(22).fontColor(COLOR_TEXT_MAIN).fontWeight(FontWeight.Bold)Text(Version 1.0.0).fontSize(13).fontColor(COLOR_TEXT_HINT)Text(让每一天随海风飘散).fontSize(14).fontColor(COLOR_TEXT_SECONDARY)}}7.1 Logo 设计80vp 圆形底色COLOR_AVATAR_BG上层叠加 emoji简单直观相比于绘制 SVGemoji 跨平台一致性更好7.2 版本号格式Version 1.0.0遵循语义化版本SemVer1—— 主版本不兼容更新0—— 次版本新增功能向后兼容0—— 修订号bug 修复八、信息列表ForEach 动态渲染BuilderInfoListBuilder(){Column(){ForEach([{label:版本号,value:1.0.0},{label:开发商,value:海风科技},{label:更新日期,value:2025年1月},{label:用户协议,value:查看 ›},{label:隐私政策,value:查看 ›}],(item){Row(){Text(item.label).fontSize(14).fontColor(COLOR_TEXT_MAIN).layoutWeight(1)Text(item.value).fontSize(14).fontColor(item.value.includes(›)?COLOR_AMBER:COLOR_TEXT_SECONDARY)}.height(50).padding({left:PAGE_PADDING,right:PAGE_PADDING})Divider().color(COLOR_DIVIDER).margin({left:PAGE_PADDING})})}.backgroundColor(COLOR_CARD_BG).borderRadius(CARD_RADIUS)}8.1 列表项高度统一每项固定height(50)确保用户在快速浏览时视线流动稳定。8.2 「查看 ›」的视觉提示「用户协议」「隐私政策」这两项是可点击的内部链接用COLOR_AMBER琥珀色标识并附加›箭头符号提示「可跳转」。.onClick((){if(item.label用户协议)router.pushUrl({url:pages/UserAgreementPage})if(item.label隐私政策)router.pushUrl({url:pages/PrivacyPolicyPage})})九、版权尾部Slogan CopyrightBuilderCopyrightFooterBuilder(){Column({space:6}){Text( 用文字守护每一天的珍贵).fontSize(13).fontColor(COLOR_AMBER)Text(© 2025 海风科技).fontSize(11).fontColor(COLOR_TEXT_HINT)}}9.1 版权符号©Unicode 编码U00A9在 HTML 中也可以用copy;表示。9.2 Slogan 的情感价值「用文字守护每一天的珍贵」比「让记录更简单」更有温度。这种情感化文案是品牌差异化的关键。十、视觉一致性原则两个页面虽然功能不同但都遵循统一的设计规范设计要素取值作用页面背景COLOR_BG浅米色温暖卡片背景COLOR_CARD_BG比页面背景略白主色COLOR_PRIMARY/COLOR_AMBER品牌琥珀色标题字号17vp标准导航栏字号正文字号14vp易读圆角CARD_RADIUS12vp /BTN_RADIUS_FULL统一圆角体系十一、常见问题与踩坑记录Q1TextArea 在 iOS 上换行触发onChange频繁原因合成输入期间多次触发。解决用防抖setTimeout或在onSubmit时统一处理。Q2InputType.Email在某些输入法上不显示原因输入法兼容性问题。解决用InputType.Normal 手动校验。Q3版本号写死在代码里更新时容易遗漏原因硬编码。解决从app.json5的versionName动态读取importappfromsystem.appapp.getInfo().then((info){this.versioninfo.versionName})十二、总结本文通过「海风日记」的意见反馈和关于页面深入讲解了EmailFeedbackPage—— 四段式表单类型、内容、邮箱、提交AboutPage—— 三段式品牌展示Logo、信息列表、版权表单校验——enabled联动 字符长度 邮箱正则视觉一致性—— 统一的颜色常量、字号、圆角情感化文案—— Slogan 与 Copyright 的温度如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源TextArea 组件文档TextInput 组件文档Scroll 组件文档海风日记项目源码HarmonyOS 开发者官网开源鸿蒙跨平台社区
HarmonyOS开发实战： EmailFeedbackPage 意见反馈 + AboutPage 关于页
EmailFeedbackPage 意见反馈 AboutPage 关于页前言当用户使用「海风日记」一段时间后可能会想这个 App 是谁做的我有问题该反馈给谁于是关于页AboutPage与意见反馈页EmailFeedbackPage成了产品「最后一公里」的关键触点。本文将从源码出发深入讲解EmailFeedbackPage 的反馈类型选择 文本输入 邮箱留档 提交校验AboutPage 的品牌头部 版本信息列表 版权尾部表单校验的enabled联动用户协议、隐私政策的「内部链接」跳转两个页面的视觉一致性原则一个好的「关于页」应该让用户感受到「这是有人在认真做的产品」而不是冷冰冰的版权声明。一、EmailFeedbackPage四段式表单意见反馈页采用经典的「类型选择 文本输入 邮箱留档 提交」结构。EntryComponentstruct EmailFeedbackPage{StatefeedbackType:number0StatefeedbackText:stringStateemail:stringbuild(){Column(){// 1. 导航栏this.NavBarBuilder(意见反馈)// 2. 表单主体Scroll(){Column({space:16}){this.TypeSelectorBuilder()// 反馈类型this.ContentInputBuilder()// 问题描述this.EmailInputBuilder()// 联系邮箱this.SubmitButtonBuilder()// 提交按钮}.padding({left:16,right:16,top:16,bottom:40})}.layoutWeight(1).scrollBar(BarState.Off)}.height(100%).backgroundColor(COLOR_BG)}}1.1 页面结构图┌────────────────────────────┐ │ ‹ 意见反馈 │ ← 导航栏 ├────────────────────────────┤ │ 反馈类型 │ │ [功能建议][问题反馈]… │ ← 类型选择 │ │ │ 问题描述 │ │ ┌────────────────────────┐│ │ │ TextArea 多行输入 ││ ← 文本输入 │ │ ││ │ └────────────────────────┘│ │ │ │ 联系邮箱选填 │ │ ┌────────────────────────┐│ │ │ Email 输入框 ││ ← 邮箱留档 │ └────────────────────────┘│ │ │ │ ┌────────────────────────┐│ │ │ 提交反馈 ││ ← 提交按钮 │ └────────────────────────┘│ └────────────────────────────┘二、反馈类型选择胶囊按钮组BuilderTypeSelectorBuilder(){Column(){Text(反馈类型).fontSize(12).fontColor(COLOR_TEXT_HINT)Row({space:8}){ForEach([功能建议,问题反馈,体验问题,其他],(label,i){Text(label).fontSize(13).fontColor(this.feedbackTypei?COLOR_WHITE:COLOR_TEXT_MAIN).backgroundColor(this.feedbackTypei?COLOR_PRIMARY:COLOR_BUTTON_INACTIVE_BG).borderRadius(14).padding({left:12,right:12,top:5,bottom:5}).onClick((){this.feedbackTypei})})}.margin({top:8})}.alignItems(HorizontalAlign.Start).width(100%)}2.1 视觉对比状态背景色字色选中COLOR_PRIMARY琥珀白色未选COLOR_BUTTON_INACTIVE_BG浅灰主文本色胶囊形borderRadius(14)与按钮高度约 28vp形成半圆符合 iOS 胶囊按钮规范。2.2 为什么不用单选 radio空间占用radio label 横向排列4 个选项需要 2 行可读性胶囊按钮的文字更醒目触控友好胶囊按钮的点击区域更大三、问题描述TextArea 多行输入BuilderContentInputBuilder(){Column(){Text(问题描述).fontSize(12).fontColor(COLOR_TEXT_HINT)TextArea({placeholder:请详细描述您遇到的问题,text:this.feedbackText}).constraintSize({minHeight:140}).backgroundColor(COLOR_CARD_BG).borderRadius(CARD_RADIUS).padding(12).onChange((v)this.feedbackTextv).margin({top:8})}.alignItems(HorizontalAlign.Start).width(100%)}3.1 关键属性属性值作用constraintSize.minHeight140vp输入框最少高度避免一开始只剩一行placeholder提示文字输入为空时显示backgroundColor卡片色与页面背景形成层次3.2 字符校验提交按钮的enabled状态会根据feedbackText的长度变化this.feedbackText.trim().length10少于 10 字按钮禁用避免无意义提交多于 500 字可选截断或提示「请精简描述」四、联系邮箱InputType.EmailBuilderEmailInputBuilder(){Column(){Text(联系邮箱选填).fontSize(12).fontColor(COLOR_TEXT_HINT)TextInput({placeholder:方便我们回复您,text:this.email}).type(InputType.Email).backgroundColor(COLOR_CARD_BG).borderRadius(INPUT_RADIUS).padding(12).onChange((v)this.emailv).margin({top:8})}.alignItems(HorizontalAlign.Start).width(100%)}4.1InputType.Email的作用移动端键盘自动显示和.快捷键部分输入法会校验邮箱格式4.2 邮箱格式校验可选constemailRegex/^[\w.-][\w.-]\.\w$/if(!emailRegex.test(this.email)){promptAction.showToast({message:邮箱格式不正确})return}五、提交按钮条件启用 视觉反馈BuilderSubmitButtonBuilder(){Button(提交反馈).width(90%).height(50).fontSize(16).fontColor(COLOR_WHITE).fontWeight(FontWeight.Bold).backgroundColor(this.feedbackText.trim().length10?COLOR_PRIMARY:COLOR_BUTTON_DISABLED_BG).borderRadius(BTN_RADIUS_FULL).enabled(this.feedbackText.trim().length10).onClick(()this.submitFeedback())}5.1 三层校验submitFeedback(){// 1. 必填校验if(this.feedbackText.trim().length10){promptAction.showToast({message:请至少输入 10 个字符})return}// 2. 邮箱格式校验如果填了if(this.email!/^[\w.-][\w.-]\.\w$/.test(this.email)){promptAction.showToast({message:邮箱格式不正确})return}// 3. 提交伪代码feedbackService.submit({type:this.feedbackType,content:this.feedbackText,email:this.email}).then((){promptAction.showToast({message:反馈已提交感谢支持})router.back()})}六、AboutPage三段式品牌展示关于页采用「品牌头部 信息列表 版权尾部」三段式结构。EntryComponentstruct AboutPage{build(){Column(){this.NavBarBuilder(关于海风)Scroll(){Column({space:24}){this.BrandHeaderBuilder()// 1. 品牌 Logothis.InfoListBuilder()// 2. 信息列表this.CopyrightFooterBuilder()// 3. 版权信息}.padding({left:16,right:16,top:32,bottom:40})}.layoutWeight(1).scrollBar(BarState.Off)}.height(100%).backgroundColor(COLOR_BG)}}七、品牌头部Logo 名称 版本 SloganBuilderBrandHeaderBuilder(){Column({space:12}){Stack(){Circle().width(80).height(80).fill(COLOR_AVATAR_BG)Text().fontSize(38)}Text(海风日记).fontSize(22).fontColor(COLOR_TEXT_MAIN).fontWeight(FontWeight.Bold)Text(Version 1.0.0).fontSize(13).fontColor(COLOR_TEXT_HINT)Text(让每一天随海风飘散).fontSize(14).fontColor(COLOR_TEXT_SECONDARY)}}7.1 Logo 设计80vp 圆形底色COLOR_AVATAR_BG上层叠加 emoji简单直观相比于绘制 SVGemoji 跨平台一致性更好7.2 版本号格式Version 1.0.0遵循语义化版本SemVer1—— 主版本不兼容更新0—— 次版本新增功能向后兼容0—— 修订号bug 修复八、信息列表ForEach 动态渲染BuilderInfoListBuilder(){Column(){ForEach([{label:版本号,value:1.0.0},{label:开发商,value:海风科技},{label:更新日期,value:2025年1月},{label:用户协议,value:查看 ›},{label:隐私政策,value:查看 ›}],(item){Row(){Text(item.label).fontSize(14).fontColor(COLOR_TEXT_MAIN).layoutWeight(1)Text(item.value).fontSize(14).fontColor(item.value.includes(›)?COLOR_AMBER:COLOR_TEXT_SECONDARY)}.height(50).padding({left:PAGE_PADDING,right:PAGE_PADDING})Divider().color(COLOR_DIVIDER).margin({left:PAGE_PADDING})})}.backgroundColor(COLOR_CARD_BG).borderRadius(CARD_RADIUS)}8.1 列表项高度统一每项固定height(50)确保用户在快速浏览时视线流动稳定。8.2 「查看 ›」的视觉提示「用户协议」「隐私政策」这两项是可点击的内部链接用COLOR_AMBER琥珀色标识并附加›箭头符号提示「可跳转」。.onClick((){if(item.label用户协议)router.pushUrl({url:pages/UserAgreementPage})if(item.label隐私政策)router.pushUrl({url:pages/PrivacyPolicyPage})})九、版权尾部Slogan CopyrightBuilderCopyrightFooterBuilder(){Column({space:6}){Text( 用文字守护每一天的珍贵).fontSize(13).fontColor(COLOR_AMBER)Text(© 2025 海风科技).fontSize(11).fontColor(COLOR_TEXT_HINT)}}9.1 版权符号©Unicode 编码U00A9在 HTML 中也可以用copy;表示。9.2 Slogan 的情感价值「用文字守护每一天的珍贵」比「让记录更简单」更有温度。这种情感化文案是品牌差异化的关键。十、视觉一致性原则两个页面虽然功能不同但都遵循统一的设计规范设计要素取值作用页面背景COLOR_BG浅米色温暖卡片背景COLOR_CARD_BG比页面背景略白主色COLOR_PRIMARY/COLOR_AMBER品牌琥珀色标题字号17vp标准导航栏字号正文字号14vp易读圆角CARD_RADIUS12vp /BTN_RADIUS_FULL统一圆角体系十一、常见问题与踩坑记录Q1TextArea 在 iOS 上换行触发onChange频繁原因合成输入期间多次触发。解决用防抖setTimeout或在onSubmit时统一处理。Q2InputType.Email在某些输入法上不显示原因输入法兼容性问题。解决用InputType.Normal 手动校验。Q3版本号写死在代码里更新时容易遗漏原因硬编码。解决从app.json5的versionName动态读取importappfromsystem.appapp.getInfo().then((info){this.versioninfo.versionName})十二、总结本文通过「海风日记」的意见反馈和关于页面深入讲解了EmailFeedbackPage—— 四段式表单类型、内容、邮箱、提交AboutPage—— 三段式品牌展示Logo、信息列表、版权表单校验——enabled联动 字符长度 邮箱正则视觉一致性—— 统一的颜色常量、字号、圆角情感化文案—— Slogan 与 Copyright 的温度如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源TextArea 组件文档TextInput 组件文档Scroll 组件文档海风日记项目源码HarmonyOS 开发者官网开源鸿蒙跨平台社区
