HarmonyOS 鸿蒙Next webview打不开的问题

创建了一个Static Library：NormalWebView.ets用来显示传入的网址。参考webview文档中示例创建组件如下：

import webview from '@ohos.web.webview';
import { Logger } from 'utils/Index';

const TAG = '[NormalWebView]'

export interface NormalWebViewParams {
  url: string;
  title: string;
}
@Component
export struct NormalWebView {
  controller: webview.WebviewController = new webview.WebviewController();
  @State url: string = '';
  @State title: string = '';

  build() {
    NavDestination() {
      Web({src: this.url, controller: this.controller})
        .width('100%')
        .height('100%')
    }
    .title(this.title)
    .onReady(ctx => {
      const params = ctx.pathInfo.param as NormalWebViewParams;
      this.url = params.url;
      this.title = params.title;
      Logger.info(TAG, JSON.stringify(ctx));
    })
    .onShown(() => {
      Logger.info(TAG, JSON.stringify(this.controller));
      this.controller.loadUrl(this.url);
    })
  }
}

问题描述：

1、通过NavPageStack跳转到这个组件时传入url和title，网页没有加载出来

2、webview的初始化不正确，打印是{}

zlyuanteng 1楼•2 天前

需要添加网络权限

{
  “module”: {
    “name”: “browser”,
    “type”: “har”,
    “deviceTypes”: [
      “default”
    ],
    “requestPermissions”: [
      {
        “name”: “ohos.permission.INTERNET”,
      }
    ]
  }
}

songsunli 2楼•2 天前

针对HarmonyOS 鸿蒙Next webview打不开的问题，以下是一些专业的排查和解决步骤：

确认设备版本与调试环境：确保HarmonyOS设备版本支持webview功能，并且开发环境（如DevEco Studio）已更新到最新版本。
开启调试权限：在应用中正确配置权限，特别是网络访问权限和调试权限，这通常需要在module.json5文件中添加相应的requestPermissions配置。
设置Web调试开关：通过setWebDebuggingAccess(true)接口开启Web组件的调试能力，并确保在组件显示时调用。
配置端口映射：连接设备到电脑后，配置端口映射以便DevTools访问设备上的webview。
检查网络连接与设备状态：确保设备网络连接稳定，且webview加载的页面URL正确无误。
兼容性检查：检查页面HTML、CSS、JavaScript等代码是否有错误或不支持的特性，确保与HarmonyOS兼容。

如果以上步骤均无法解决问题，可能是系统或webview组件本身的bug。此时，请联系官网客服以获取更专业的帮助。官网地址是：https://www.itying.com/category-93-b0.html。