鸿蒙APP开发时WebView导致Log功能异常

Question

鸿蒙APP开发，在版本是DevEco Studio 3.1.1 Release，SDK是3.1.0(API9) 的上，模拟器的系统也是API9。

以下很简单的代码，41行的WebView组件使用时，两个按钮事件中的日志无法打印；只要注释掉41行，按钮事件中的日志就正常打印了。

找不到原因和解决方法，不知道这是该版本DevEco Studio的bug么？不知道其他更新的版本上有没有该问题？

import web_webview from '@ohos.web.webview';
import hilog from '@ohos.hilog';

@Entry
@Component
struct Index {
  @State message: string = 'Hello 鸿蒙'
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();

  button1Clicked(){
    console.info('AAA-按钮1被按下！！！');
  }
  button2Clicked(){
    hilog.info(0xFF00,"AAA","按钮2被按下！！！");
    console.info('AAA-按钮2被按下！！！');
  }

  build() {
    Column() {
      Column() {
        Text(`${this.message}`)
          .width("300vp")
          .height("60vp")
          .textAlign(TextAlign.Center)
          .fontSize("50fp")
          .fontWeight(FontWeight.Bold)
        Row(){
          Button('按钮1')
            .width("180vp")
            .height("30vp")
            .onClick(this.button1Clicked.bind(this))
          Button('按钮2')
            .width("180vp")
            .height("30vp")
            .onClick(this.button2Clicked.bind(this))
        }
        .width("100%")
        .height("36vp")
        .justifyContent(FlexAlign.Center)
        Row(){
          Web({ src: 'www.baidu.com', controller: this.webviewController });
        }
        .width("100%")
        .height("300vp")
        .justifyContent(FlexAlign.Center)
      }      
      .width("100%")
      .height("100%")
      .justifyContent(FlexAlign.Center)
    }    
    .width("100%")
    .height("100%")
  }
}

Answer 1

引自免费微信小程序：皆我百晓生

针对在HarmonyOS应用开发中使用WebView组件导致的日志输出异常问题，首先确认代码中日志输出函数的调用逻辑是否正确。从你提供的代码片段来看，console.info 和 hilog.info 应该是在正确的上下文中被调用的。然而，当WebView组件存在时，这些日志似乎没有被打印出来。

这种情况可能与WebView组件的初始化、资源消耗或与主线程的交互有关。WebView可能占用了大量的系统资源，导致其他操作（如日志记录）被延迟或忽略。此外，WebView可能与主线程有竞争，影响到事件处理和其他任务的执行。

为了解决这个问题，可以尝试以下几种方法：

1. 优化WebView的加载策略：

   • 使用Web.loadUrl()方法异步加载网页，而不是在构建UI时立即加载，这样可以减少对主线程的影响。
   • 确保WebView的生命周期管理正确，例如在页面销毁时调用web_webview.WebviewController.destroy()释放资源。

2. 调整日志级别：

   • 检查你的日志级别设置，确保console.info和hilog.info级别的日志不会被过滤掉。在某些情况下，默认的日志级别设置可能会过滤掉非错误级别的日志。

3. 检查线程安全：

   • 如果可能，将日志输出操作放在主线程中进行，确保日志函数在正确的线程环境中被调用。

4. 增加调试信息：

   • 在WebView组件的初始化前后添加更多的日志点，观察WebView的加载状态和日志输出的关系。

下面是一个修改后的代码示例，其中包含了上述建议的部分实施：

import web_webview from '@ohos.web.webview';
import hilog from '@ohos.hilog';

@Entry
@Component
struct Index {
  @State message: string = 'Hello 鸿蒙'
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();

  button1Clicked(){
    console.info('AAA-按钮1被按下！！！');
  }
  button2Clicked(){
    hilog.info(0xFF00,"AAA","按钮2被按下！！！");
    console.info('AAA-按钮2被按下！！！');
  }

  async loadWebView() {
    // 异步加载网页，避免阻塞主线程
    await this.webviewController.loadUrl('http://www.baidu.com');
  }

  build() {
    Column() {
      Column() {
        Text(`${this.message}`)
          .width("300vp")
          .height("60vp")
          .textAlign(TextAlign.Center)
          .fontSize("50fp")
          .fontWeight(FontWeight.Bold)
        Row(){
          Button('按钮1')
            .width("180vp")
            .height("30vp")
            .onClick(this.button1Clicked.bind(this))
          Button('按钮2')
            .width("180vp")
            .height("30vp")
            .onClick(this.button2Clicked.bind(this))
        }
        .width("100%")
        .height("36vp")
        .justifyContent(FlexAlign.Center)
        Row(){
          Web({
            controller: this.webviewController,
            onReady: () => {
              // WebView加载完成后，异步加载URL
              this.loadWebView();
            },
          })
          .width("100%")
          .height("300vp")
          .justifyContent(FlexAlign.Center)
        }
      }      
      .width("100%")
      .height("100%")
      .justifyContent(FlexAlign.Center)
    }    
    .width("100%")
    .height("100%")
  }
}

通过以上修改，我们尝试减少WebView对主线程的影响，并确保日志输出的环境更加稳定。如果问题仍然存在，考虑升级DevEco Studio和SDK版本至最新，因为这可能是已知的软件问题，新版本可能已经修复了相关bug。同时，查阅官方文档或社区论坛，寻找类似问题的解决方案和建议，可能会有额外的帮助。