开发者工具箱-鸿蒙弹窗使用指南
鸿蒙弹窗使用指南最近在开发鸿蒙应用时，经常需要用到各种弹窗。SDK文档看着还行，真用起来发现坑还不少。这里把踩过的坑和实现细节都记下来，省得以后自己或者同事再掉坑里。
一、基础知识
1.1 什么是弹窗
弹窗就是在应用界面上弹出的一个临时窗口，用于展示重要信息、收集用户输入或者进行确认操作。鸿蒙提供了多种弹窗组件，可以根据需求选择合适的类型。
1.2 主要类型
[*]普通弹窗：用于展示简单信息，比如提示、警告
[*]自定义弹窗：可以完全自定义内容和样式，想怎么玩就怎么玩
[*]网页弹窗：用于展示网页内容，比如问卷调查
[*]底部弹窗：从底部滑出的弹窗，适合展示列表
[*]加载弹窗：显示加载状态的弹窗，别让用户等得心慌
二、开发背景
我们项目需要做个问卷调查，本来想自己写个表单，后来发现太麻烦了。正好有个现成的问卷系统，就想着用网页弹窗来实现。这样既能复用已有的问卷系统，又能保持统一的用户体验，一举两得。
三、实现步骤
3.1 基础配置
// 该引的都得引，不然编译直接报错
import { webview } from '@kit.ArkWeb';
import { BreakpointConstants } from '../../utils/BreakpointConstants';
// 配置网页Cookie，这个很重要，不配置的话问卷可能提交不了
webview.once("webInited", () => {
console.log("配置Cookie同步");
webview.WebCookieManager.configCookieSync("你的问卷地址", "1");
});3.2 自定义弹窗实现
// 自定义弹窗组件，这里用@CustomDialog装饰器
@CustomDialog
export struct 问卷调查弹窗 {
// 弹窗控制器，用来控制弹窗的显示和隐藏
控制器: CustomDialogController;
// 网页控制器，用来控制网页的加载和刷新
网页控制器: webview.WebviewController = new webview.WebviewController();
// 当前断点，用来适配不同屏幕尺寸
@StorageLink('当前断点') 当前断点: string = BreakpointConstants.BREAKPOINT_LG;
build() {
Column() {
// 标题栏，这里可以自定义样式
Row() {
Text('问卷调查')
.fontSize(20)
.fontWeight(FontWeight.Medium)
.fontColor($r('app.color.text_primary'))
Blank()
// 关闭按钮，记得加点击事件
Button({ type: ButtonType.Circle }) {
Text('✕')
.fontSize(20)
.fontColor($r('app.color.text_secondary'))
}
.width(32)
.height(32)
.backgroundColor('transparent')
.onClick(() => this.控制器.close())
}
.width('100%')
.padding({ left: 24, right: 16 })
.margin({ top: 16, bottom: 16 })
// 网页内容，这里可以加载任何网页
Column() {
Web({
src: '你的问卷地址',
controller: this.网页控制器
})
.height("90%")
}
}
// 根据屏幕尺寸调整弹窗大小
.width(this.当前断点 === BreakpointConstants.BREAKPOINT_LG ? '50%' : '100%')
.height('90%')
.backgroundColor($r('app.color.background'))
.borderRadius({ topLeft: 24, topRight: 24 })
}
}3.3 使用示例
// 在页面中使用弹窗，这里展示最简单的用法
@Entry
@Component
struct 主页面 {
// 弹窗控制器，记得设置对齐方式和偏移量
问卷调查弹窗控制器: CustomDialogController = new CustomDialogController({
builder: 问卷调查弹窗(),
alignment: DialogAlignment.Center,
offset: { dx: 0, dy: 0 },
customStyle: true
});
build() {
Column() {
Button('打开问卷')
.onClick(() => {
this.问卷调查弹窗控制器.open();
})
}
}
}四、踩坑记录
[*]弹窗样式问题
[*]弹窗背景色设置不生效，需要设置父容器背景色，这个坑我踩了好几次
[*]弹窗圆角设置不完整，需要同时设置四个角，不然看起来很奇怪
[*]弹窗阴影效果需要自己实现，SDK没有提供现成的
[*]网页加载问题
[*]网页加载慢，需要添加加载提示，不然用户以为卡住了
[*]Cookie同步不及时，需要等待webview初始化，这个很关键
[*]网页内容高度自适应问题，有时候会显示不全
[*]性能问题
[*]弹窗打开关闭动画卡顿，需要优化
[*]网页内容加载影响主线程，需要异步处理
[*]内存占用过大，需要及时释放资源
五、注意事项
[*]开发配置
[*]需要配置网页域名白名单，不然加载不了
[*]需要处理网页加载失败情况，给用户友好提示
[*]需要适配不同屏幕尺寸，别只考虑手机
[*]安全考虑
[*]网页内容需要是HTTPS，别用HTTP
[*]需要处理网页注入攻击，安全第一
[*]需要保护用户隐私数据，别泄露
[*]性能优化
[*]弹窗组件需要懒加载，别一次性全加载
[*]网页内容需要缓存，减少重复请求
[*]需要及时释放资源，别内存泄漏
[*]用户体验
[*]添加加载提示，让用户知道在加载
[*]优化关闭动画，别太生硬
[*]处理网络异常情况，给用户友好提示
六、最佳实践
[*]弹窗设计
[*]保持简洁，不要放太多内容，用户会烦
[*]提供明显的关闭按钮，别让用户找不到
[*]适配深色模式，别只考虑浅色
[*]代码组织
[*]弹窗组件单独文件，别都写一起
[*]使用TypeScript类型，别用any
[*]添加必要注释，方便维护
[*]测试建议
[*]测试不同屏幕尺寸，别只测手机
[*]测试网络异常情况，别只测正常情况
[*]测试内存占用情况，别内存泄漏
七、常见问题
[*]弹窗不显示
[*]检查控制器是否正确初始化，这个最常见
[*]检查弹窗组件是否正确注册，别漏了
[*]检查样式是否正确设置，别写错
[*]网页加载失败
[*]检查网络连接，别是网络问题
[*]检查域名白名单，别是配置问题
[*]检查Cookie配置，别是Cookie问题
[*]性能问题
[*]使用懒加载，别一次性全加载
[*]优化网页内容，别加载太多
[*]及时释放资源，别内存泄漏
有问题欢迎留言，大家一起踩坑一起填。方案适合大部分场景，特殊需求记得多测几遍。
[*]鸿蒙应用开发指南
欢迎体验
这个弹窗组件已经集成到鸿蒙开发者工具箱里了,欢迎下载体验！
鸿蒙开发者工具箱
作者：在人间耕耘
版权声明：本文为博主原创文章，转载请附上原文出处链接及本声明。
本文由博客一文多发平台 OpenWrite 发布！
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]