开发者工具箱-鸿蒙弹窗使用指南

鸿蒙弹窗使用指南

最近在开发鸿蒙应用时，经常需要用到各种弹窗。SDK文档看着还行，真用起来发现坑还不少。这里把踩过的坑和实现细节都记下来，省得以后自己或者同事再掉坑里。

一、基础知识

1.1 什么是弹窗

弹窗就是在应用界面上弹出的一个临时窗口，用于展示重要信息、收集用户输入或者进行确认操作。鸿蒙提供了多种弹窗组件，可以根据需求选择合适的类型。
1.2 主要类型

• 普通弹窗：用于展示简单信息，比如提示、警告
  
• 自定义弹窗：可以完全自定义内容和样式，想怎么玩就怎么玩
  
• 网页弹窗：用于展示网页内容，比如问卷调查
  
• 底部弹窗：从底部滑出的弹窗，适合展示列表
  
• 加载弹窗：显示加载状态的弹窗，别让用户等得心慌
  

二、开发背景

我们项目需要做个问卷调查，本来想自己写个表单，后来发现太麻烦了。正好有个现成的问卷系统，就想着用网页弹窗来实现。这样既能复用已有的问卷系统，又能保持统一的用户体验，一举两得。
三、实现步骤

3.1 基础配置

1. // 该引的都得引，不然编译直接报错
2. import { webview } from '@kit.ArkWeb';
3. import { BreakpointConstants } from '../../utils/BreakpointConstants';
5. // 配置网页Cookie，这个很重要，不配置的话问卷可能提交不了
6. webview.once("webInited", () => {
7.   console.log("配置Cookie同步");
8.   webview.WebCookieManager.configCookieSync("你的问卷地址", "1");
9. });

复制代码

3.2 自定义弹窗实现

1. // 自定义弹窗组件，这里用@CustomDialog装饰器
2. @CustomDialog
3. export struct 问卷调查弹窗 {
4.   // 弹窗控制器，用来控制弹窗的显示和隐藏
5.   控制器: CustomDialogController;
6.   // 网页控制器，用来控制网页的加载和刷新
7.   网页控制器: webview.WebviewController = new webview.WebviewController();
8.   // 当前断点，用来适配不同屏幕尺寸
9.   @StorageLink('当前断点') 当前断点: string = BreakpointConstants.BREAKPOINT_LG;
11.   build() {
12.     Column() {
13.       // 标题栏，这里可以自定义样式
14.       Row() {
15.         Text('问卷调查')
16.           .fontSize(20)
17.           .fontWeight(FontWeight.Medium)
18.           .fontColor($r('app.color.text_primary'))
20.         Blank()
22.         // 关闭按钮，记得加点击事件
23.         Button({ type: ButtonType.Circle }) {
24.           Text('✕')
25.             .fontSize(20)
26.             .fontColor($r('app.color.text_secondary'))
27.         }
28.         .width(32)
29.         .height(32)
30.         .backgroundColor('transparent')
31.         .onClick(() => this.控制器.close())
32.       }
33.       .width('100%')
34.       .padding({ left: 24, right: 16 })
35.       .margin({ top: 16, bottom: 16 })
37.       // 网页内容，这里可以加载任何网页
38.       Column() {
39.         Web({
40.           src: '你的问卷地址',
41.           controller: this.网页控制器
42.         })
43.         .height("90%")
44.       }
45.     }
46.     // 根据屏幕尺寸调整弹窗大小
47.     .width(this.当前断点 === BreakpointConstants.BREAKPOINT_LG ? '50%' : '100%')
48.     .height('90%')
49.     .backgroundColor($r('app.color.background'))
50.     .borderRadius({ topLeft: 24, topRight: 24 })
51.   }
52. }

复制代码

3.3 使用示例

1. // 在页面中使用弹窗，这里展示最简单的用法
2. @Entry
3. @Component
4. struct 主页面 {
5.   // 弹窗控制器，记得设置对齐方式和偏移量
6.   问卷调查弹窗控制器: CustomDialogController = new CustomDialogController({
7.     builder: 问卷调查弹窗(),
8.     alignment: DialogAlignment.Center,
9.     offset: { dx: 0, dy: 0 },
10.     customStyle: true
11.   });
13.   build() {
14.     Column() {
15.       Button('打开问卷')
16.         .onClick(() => {
17.           this.问卷调查弹窗控制器.open();
18.         })
19.     }
20.   }
21. }

复制代码

四、踩坑记录

• 弹窗样式问题
  
  
  
  • 弹窗背景色设置不生效，需要设置父容器背景色，这个坑我踩了好几次
    
  • 弹窗圆角设置不完整，需要同时设置四个角，不然看起来很奇怪
    
  • 弹窗阴影效果需要自己实现，SDK没有提供现成的
    
  
  
• 网页加载问题
  
  
  
  • 网页加载慢，需要添加加载提示，不然用户以为卡住了
    
  • Cookie同步不及时，需要等待webview初始化，这个很关键
    
  • 网页内容高度自适应问题，有时候会显示不全
    
  
  
• 性能问题
  
  
  
  • 弹窗打开关闭动画卡顿，需要优化
    
  • 网页内容加载影响主线程，需要异步处理
    
  • 内存占用过大，需要及时释放资源
    
  
  

五、注意事项

• 开发配置
  
  
  
  • 需要配置网页域名白名单，不然加载不了
    
  • 需要处理网页加载失败情况，给用户友好提示
    
  • 需要适配不同屏幕尺寸，别只考虑手机
    
  
  
• 安全考虑
  
  
  
  • 网页内容需要是HTTPS，别用HTTP
    
  • 需要处理网页注入攻击，安全第一
    
  • 需要保护用户隐私数据，别泄露
    
  
  
• 性能优化
  
  
  
  • 弹窗组件需要懒加载，别一次性全加载
    
  • 网页内容需要缓存，减少重复请求
    
  • 需要及时释放资源，别内存泄漏
    
  
  
• 用户体验
  
  
  
  • 添加加载提示，让用户知道在加载
    
  • 优化关闭动画，别太生硬
    
  • 处理网络异常情况，给用户友好提示
    
  
  

六、最佳实践

• 弹窗设计
  
  
  
  • 保持简洁，不要放太多内容，用户会烦
    
  • 提供明显的关闭按钮，别让用户找不到
    
  • 适配深色模式，别只考虑浅色
    
  
  
• 代码组织
  
  
  
  • 弹窗组件单独文件，别都写一起
    
  • 使用TypeScript类型，别用any
    
  • 添加必要注释，方便维护
    
  
  
• 测试建议
  
  
  
  • 测试不同屏幕尺寸，别只测手机
    
  • 测试网络异常情况，别只测正常情况
    
  • 测试内存占用情况，别内存泄漏
    
  
  

七、常见问题

• 弹窗不显示
  
  
  
  • 检查控制器是否正确初始化，这个最常见
    
  • 检查弹窗组件是否正确注册，别漏了
    
  • 检查样式是否正确设置，别写错
    
  
  
• 网页加载失败
  
  
  
  • 检查网络连接，别是网络问题
    
  • 检查域名白名单，别是配置问题
    
  • 检查Cookie配置，别是Cookie问题
    
  
  
• 性能问题
  
  
  
  • 使用懒加载，别一次性全加载
    
  • 优化网页内容，别加载太多
    
  • 及时释放资源，别内存泄漏
    
  
  

有问题欢迎留言，大家一起踩坑一起填。方案适合大部分场景，特殊需求记得多测几遍。

• 鸿蒙应用开发指南
  

欢迎体验

这个弹窗组件已经集成到鸿蒙开发者工具箱里了,欢迎下载体验！
鸿蒙开发者工具箱

作者：在人间耕耘
版权声明：本文为博主原创文章，转载请附上原文出处链接及本声明。
本文由博客一文多发平台 OpenWrite 发布！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！