onClick事件中添加逻辑代码导致界面白屏 HarmonyOS 鸿蒙Next

发布于 1周前 作者 eggper 来自 鸿蒙OS

onClick事件中添加逻辑代码导致界面白屏 HarmonyOS 鸿蒙Next

在button的点击事件中添加了启动二维码的逻辑界面直接白屏  代码如下:  

typescript Button('点击扫描二维码') .onClick(async () => { new DefaultQRCodeManager().startScanQRCode((code: QRCodeConstants, result: String) => { const urlPattern = /^https?:\/\//i; let title = '扫码内容'; if (code == QRCodeConstants.SUCCESS && urlPattern.test(result.toString())) { const pageParams: PageParams = { extras: new WebParams(result.toString()) }; Lotus.getInstance().router().jump(LotusConstants.WEB_PAGE, pageParams); return; } else { title = '扫码异常' } AlertDialog.show({ title: title, message: result.toString(), autoCancel: false, alignment: DialogAlignment.Center, primaryButton: { value: '确定', action: () => { } } }); }); }) .backgroundColor('#4272ed') .borderRadius(15) .fontColor('#FFFFFF') .fontSize(12) .margin({ top: 20 })  如果删除了onClick事件中的逻辑可以正常显示:  typescript Button('点击扫描二维码') .onClick(async () => { //删除逻辑 }) .backgroundColor('#4272ed') .borderRadius(15) .fontColor('#FFFFFF') .fontSize(12) .margin({ top: 20 })    DefaultQRCodeManager代码如下:  typescript import { QRCodeManager } from 'lotus_api'; import {  scanBarcode } from '@kit.ScanKit'; import { BusinessError } from '@kit.BasicServicesKit'; import { QRCodeConstants } from 'lotus_api/src/main/ets/components/qrcode/QRCodeManager';  export class DefaultQRCodeManager implements QRCodeManager { readonly SUCCESS: QRCodeConstants.SUCCESS = QRCodeConstants.SUCCESS; readonly ERROR: QRCodeConstants.ERROR = QRCodeConstants.ERROR; startScanQRCode(callback: (code: QRCodeConstants,result: string) => void){ // 定义扫码参数options let options: scanBarcode.ScanOptions = { // scanTypes: [scanCore.ScanType.ALL], enableMultiMode: true, enableAlbum: true }; try { scanBarcode.startScanForResult(getContext(this), options).then((result: scanBarcode.ScanResult) => { // 收到扫码结果后返回 callback(QRCodeConstants.SUCCESS,result.originalValue); }).catch((error: BusinessError) => { callback(QRCodeConstants.ERROR,JSON.stringify(error)); }); } catch (error) { callback(QRCodeConstants.ERROR,JSON.stringify(error)); } } }  请协助看下问题出在哪里，应该如何修改代码

Harmonyos Next教程
2 回复
参数code使用枚举白屏，改成number问题就好了，但是我不理解为什么这样就可以解决，可以解释下吗，

代码如下： 

Button('点击扫描二维码')
            .onClick(async () => {
              //code不能使用枚举，改成number正常
              new DefaultQRCodeManager().startScanQRCode((code: number, result: String) => {
                const urlPattern = /^https?:\/\//i;
                let title = '扫码内容';
                if (code == 0 && urlPattern.test(result.toString())) {
                  const pageParams: PageParams = {
                    extras: new WebParams(result.toString())
                  };
                  Lotus.getInstance().router().jump(LotusConstants.WEB_PAGE, pageParams);
                  return;
                } else {
                  title = '扫码异常'
                }
                AlertDialog.show({
                  title: title,
                  message: result.toString(),
                  autoCancel: false,
                  alignment: DialogAlignment.Center,
                  primaryButton: {
                    value: '确定',
                    action: () => {
                    }
                  }
                });
              });
            })
            .backgroundColor('#4272ed')
            .borderRadius(15)
            .fontColor('#FFFFFF')
            .fontSize(12)
            .margin({ top: 20 })

QRCodeConstants枚举没有export出去，使用的是路径引入就白屏，这个问题编译过程中不报错，运行也不报错，只是白屏

在HarmonyOS鸿蒙Next开发中，遇到onClick事件中添加逻辑代码导致界面白屏的问题，通常与以下几个因素有关：

  1. 内存泄漏或资源未释放：检查事件处理逻辑中是否有未正确释放的内存或资源，如大图片加载、数据库操作未关闭等，这些都可能导致内存耗尽，引起白屏。

  2. 长时间运行任务：如果onClick中执行了耗时操作（如大量数据处理、网络请求未异步处理等），会阻塞主线程，导致界面无法更新，从而白屏。确保耗时操作在后台线程或异步任务中执行。

  3. 异常处理：检查逻辑代码中是否有未捕获的异常，未处理的异常可能导致应用崩溃或界面异常。添加适当的异常捕获和处理逻辑。

  4. UI更新不当：在后台线程中直接更新UI可能会导致问题。确保所有UI更新都在主线程中执行，使用Handler或LifecycleDispatcher等机制。

针对上述问题，逐一排查并优化代码。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。在联系客服时，提供详细的代码片段和错误日志，以便更快定位问题。

回到顶部