HarmonyOS鸿蒙Next中Flutter webview的使用

HarmonyOS鸿蒙Next中Flutter webview的使用 Flutter项目中如何使用webview， 找的文档都比较碎化

4 回复

尊敬的开发者您好：

在一楼的回复第一步添加依赖中做了如下修改，不同版本的flutter可参考：flutter_packages

一、基础集成步骤

添加依赖

在 pubspec.yaml中添加插件依赖：

dependencies:

  flutter_inappwebview:

    git:

      url: "https://gitcode.com/openharmony-sig/flutter_inappwebview.git"

      path: "flutter_inappwebview"

剩余部分可参考一楼的回复。

更多关于HarmonyOS鸿蒙Next中Flutter webview的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


一、基础集成步骤

添加依赖

在 pubspec.yaml中添加插件依赖（二选一）：

dependencies:
  flutter_inappwebview: ^6.0.0 # 功能更丰富（推荐）
  # 或
  webview_flutter: ^4.0.0     # 官方基础版

配置 Ability

修改 src/main/module.json5文件声明 WebView 能力：

"abilities": [{
  "name": "EntryAbility",
  "srcEntry": "./ets/entryability/EntryAbility.ets",
  "skills": [{
    "entities": ["entity.system.home"],
    "actions": ["action.system.home"]
  }]
}]

初始化 WebView

示例 1：使用 flutter_inappwebview加载远程 URL

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("https://example.com")),
  onWebViewCreated: (controller) {
    // 可在此处根据 URL 判断加载本地或远程资源
  },
);

示例 2：使用 webview_flutter 加载本地 HTML

WebView(
  initialFile: "assets/local_page.html",
  javaScriptMode: JavaScriptMode.unrestricted, // 启用 JS
);

二、关键配置项

启用 JavaScript

必须显式设置 javaScriptMode为 unrestricted，否则 Vue/React 等框架无法运行：

WebView(
  javaScriptMode: JavaScriptMode.unrestricted
)

解决页面适配问题

若网页布局错乱，需配置 User-Agent：

InAppWebViewSettings(
  userAgent: "Mozilla/5.0 (HarmonyOS; Flutter) AppleWebKit/537.36"
);

缓存控制

禁止缓存加载（如需要实时更新）：

InAppWebViewSettings(cacheEnabled: false);

三、常见问题解决

问题现象 解决方案 来源
Vue/React 页面加载失败 检查 javaScriptMode是否启用 搜索3
白屏或布局错乱 正确设置 User-Agent 搜索4
无法触发错误回调 等待 PR 合入（当前版本暂不支持） 搜索
透明背景失效 等待 PR 合入（当前版本暂不支持） 搜索

四、调试建议

  • 使用 DevTools调试 WebView 内容
  • 通过 hdc hilog命令查看系统级日志
  • 在 onWebViewCreated回调中打印 URL 验证加载路径

扩展场景

  • 混合开发：通过 PlatformView实现 Flutter/ArkTS 同层渲染
  • JS 交互：使用 evaluateJavascript()执行脚本
  • 本地资源：将 HTML/CSS/JS 放入 assets目录并通过 initialFile加载

建议优先选择 flutter_inappwebview（功能更完整），若遇兼容性问题可参考鸿蒙知识地图中的实战案例。

在HarmonyOS Next中，Flutter WebView主要通过ohos_flutter插件桥接鸿蒙的WebView组件实现。开发者需在Flutter工程的pubspec.yaml中引入ohos_flutter插件，并在Dart代码中导入package:ohos_flutter/ohos_flutter.dart来使用WebView组件。该组件支持加载本地HTML或远程URL，并可通过JavaScript接口与Flutter应用进行双向通信。

在HarmonyOS Next的Flutter项目中，你可以使用flutter_webview插件来集成WebView功能。由于HarmonyOS Next对Flutter的支持仍在完善中，建议优先使用社区维护且兼容性较好的插件版本。

核心步骤：

  1. 添加依赖：在项目的pubspec.yaml文件中添加webview_flutter插件依赖。

    dependencies:
  webview_flutter: ^4.4.2 # 建议使用较新稳定版本

  2. 平台配置（针对HarmonyOS）：

    • 确保你的HarmonyOS应用已正确配置网络权限。在module.json5文件中添加：
    "requestPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  }
]

  3. 基本使用：在Dart代码中导入包并嵌入WebView组件。

    import 'package:webview_flutter/webview_flutter.dart';

class MyWebView extends StatelessWidget {
  final WebViewController controller = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..loadRequest(Uri.parse('https://developer.harmonyos.com'));

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('HarmonyOS WebView示例')),
      body: WebViewWidget(controller: controller),
    );
  }
}

关键特性配置：

  • JavaScript支持：通过setJavaScriptMode启用。
  • 导航控制：使用WebViewController的loadRequest、goBack、goForward等方法。
  • 页面加载回调：通过WebViewController的setNavigationDelegate监听页面状态。
  • 与JavaScript通信：使用runJavaScript执行JS代码，或通过addJavaScriptChannel建立通信通道。

注意事项：

  • 目前HarmonyOS Next的Flutter插件生态处于适配阶段，若遇到兼容性问题，可尝试降低webview_flutter插件版本或关注官方更新。
  • 复杂交互（如文件上传、地理位置等）需测试HarmonyOS平台下的具体支持情况。
  • 建议通过flutter_webview插件的GitHub仓库查看最新Issue和兼容性反馈。

以上方法可帮助你在HarmonyOS Next的Flutter应用中快速集成WebView功能。

回到顶部