@react-native-ohos/react-native-webview 13.16.2-beta.2 → 13.16.2

package/README.md

@@ -1,13 +1,469 @@
-# @react-native-ohos/react-native-webview
-
-This project is based on [react-native-webview@13.15.0](https://github.com/react-native-webview/react-native-webview/tree/v13.15.0)
-
-## Documentation
-
-- [中文](https://gitcode.com/CPF-RN/usage-docs/blob/master/zh-cn/react-native-webview.md)
-
-- [English](https://gitcode.com/CPF-RN/usage-docs/blob/master/en/react-native-webview.md)
-
-## License
-
-This library is licensed under [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-webview/blob/sig/LICENSE)
+> 模板版本：v0.4.1
+
+<p align="center">
+  <h1 align="center"> <code>react-native-webview</code> </h1>
+</p>
+<p align="center">
+    <a href="https://github.com/react-native-webview/react-native-webview">
+        <img src="https://img.shields.io/badge/platforms-android%20%7C%20ios%20%7C%20windows%20%7C%20macos%20%7C%20harmony%20-lightgrey.svg" alt="Supported platforms" />
+    </a>
+    <a href="https://github.com/react-native-webview/react-native-webview/blob/master/LICENSE">
+        <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License" />
+    </a>
+</p>
+
+ 本项目基于 [react-native-webview](https://github.com/react-native-webview/react-native-webview)开发。
+
+## 安装与使用
+
+请到三方库的 Releases 发布地址查看配套的版本信息：
+
+| 三方库名称 | 三方库版本   | 发布信息                                                                         | 支持RN版本 | Autolink | 编译API版本 | 社区基线版本 | npm地址                      
+| ------------ |---------|---------------------------------------------------------------------------------------------|----------------------|--------------------|-------------------|----------------------------|----------------------------------|
+|@react-native-ohos/react-native-webview| ~13.16.1 | [Gitcode Releases](https://gitcode.com/CPF-RN/rntpc_react-native-webview/releases) | 0.82.*                | 否                  | API20+                   | 13.16.0  | [Npm Address](https://www.npmjs.com/package/@react-native-ohos/react-native-webview)|
+
+对于未发布到npm的旧版本，请参考[安装指南](https://gitcode.com/CPF-RN/usage-docs/blob/master/zh-cn/tgz-usage.md)安装tgz包。
+
+进入到工程目录并输入以下命令：
+
+
+<!-- tabs:start -->
+
+#### **npm**
+
+```bash
+npm install @react-native-ohos/react-native-webview
+```
+
+#### **yarn**
+
+```bash
+yarn add @react-native-ohos/react-native-webview
+```
+
+<!-- tabs:end -->
+
+下面的代码展示了这个库的基本使用场景：
+
+> [!WARNING] 使用时 import 的库名不变。
+
+```js
+import { WebView } from "react-native-webview";
+
+export default function WebViewDemo() {
+  return (
+      <WebView source={{ uri: "https://reactnative.dev/" }} />
+  );
+}
+```
+
+## Link
+
+|                                      | 是否支持 Autolink  | 支持的 RN 版本 |
+|--------------------------------------|-----------------------|----------------------|
+| ~13.16.1                             |  否              |  0.82     |
+
+使用AutoLink的工程需要根据该文档配置，Autolink框架指导文档：https://gitcode.com/CPF-RN/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md
+
+如您使用的版本支持 Autolink，并且工程已接入 Autolink，可跳过ManualLink配置。
+ManualLink: 此步骤为手动配置原生依赖项的指导
+
+首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony`
+
+### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段
+
+```json
+{
+  ...
+  "overrides": {
+    "@rnoh/react-native-openharmony" : "./react_native_openharmony"
+  }
+}
+```
+
+### 2.引入原生端代码
+
+目前有两种方法：
+
+1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
+2. 直接链接源码。
+
+方法一：通过 har 包引入
+
+> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。
+
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+    "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
+
+    "@react-native-ohos/react-native-webview": "file:../../node_modules/@react-native-ohos/react-native-webview/harmony/rn_webview.har"  
+}
+```
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+方法二：直接链接源码
+
+> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](https://gitcode.com/CPF-RN/usage-docs/blob/master/zh-cn/link-source-code.md)
+
+### 3.配置 CMakeLists 和引入 WebViewPackage
+
+打开 `entry/src/main/cpp/CMakeLists.txt`，添加：
+
+```diff
+project(rnapp)
+cmake_minimum_required(VERSION 3.4.1)
+set(CMAKE_SKIP_BUILD_RPATH TRUE)
+set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}")
+set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules")
+set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
++set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
+set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp")
+set(LOG_VERBOSITY_LEVEL 1)
+set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments")
+set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie")
+set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use
+add_compile_definitions(WITH_HITRACE_SYSTRACE)
+
+add_subdirectory("${RNOH_CPP_DIR}" ./rn)
+
+# RNOH_BEGIN: manual_package_linking_1
+add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package)
++ add_subdirectory("${OH_MODULE_DIR}/@react-native-ohos/react-native-webview/src/main/cpp" ./webview)
+
+# RNOH_END: manual_package_linking_1
+
+file(GLOB GENERATED_CPP_FILES "./generated/*.cpp")
+
+add_library(rnoh_app SHARED
+    ${GENERATED_CPP_FILES}
+    "./PackageProvider.cpp"
+    "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
+)
+target_link_libraries(rnoh_app PUBLIC rnoh)
+
+# RNOH_BEGIN: manual_package_linking_2
+target_link_libraries(rnoh_app PUBLIC rnoh_sample_package)
++ target_link_libraries(rnoh_app PUBLIC rnoh_webview)
+# RNOH_END: manual_package_linking_2
+```
+
+打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：
+
+```diff
+#include "RNOH/PackageProvider.h"
+#include "SamplePackage.h"
++ #include "WebViewPackage.h"
+
+using namespace rnoh;
+
+std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
+    return {
+      std::make_shared<SamplePackage>(ctx),
++     std::make_shared<WebViewPackage>(ctx)
+    };
+}
+```
+
+### 4.在 ArkTs 侧引入 webview 组件
+
+找到 **function buildCustomComponent()**，一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`，添加：
+
+```diff
++ import { WebView, WEB_VIEW } from "@react-native-ohos/react-native-webview"
+
+@Builder
+function buildCustomComponent(ctx: ComponentBuilderContext) {
++ if (ctx.componentName === WEB_VIEW) {
++   WebView({
++     ctx: ctx.rnComponentContext,
++     tag: ctx.tag
++   })
++ }
+ ...
+}
+...
+```
+
+> [!TIP] 本库使用了混合方案，需要添加组件名。
+
+在`entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets` 找到常量 `arkTsComponentNames` 在其数组里添加组件名
+
+```diff
+const arkTsComponentNames: Array<string> = [
+  SampleView.NAME,
+  GeneratedSampleView.NAME,
+  PropsDisplayer.NAME,
++ WEB_VIEW
+  ];
+```
+
+### 5.在 ArkTs 侧引入 WebViewPackage
+
+打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+
+```diff
+import type {RNPackageContext, RNPackage} from 'rnoh/ts';
+import {SamplePackage} from 'rnoh-sample-package/ts';
++ import { WebViewPackage } from '@react-native-ohos/react-native-webview/ts';
+
+export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
+  return [
+    new SamplePackage(ctx),
++   new WebViewPackage(ctx)
+  ];
+}
+```
+</details>
+
+## 运行
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+然后编译、运行即可。
+
+## 约束与限制
+
+### 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+在以下版本验证通过：
+
+1. RNOH: 0.82.1; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
+
+### 权限要求
+
+> [!TIP] 以下权限为按需申请：若不使用相关功能，无需配置。
+
+| 权限名 | 触发场景 |
+| --- | --- |
+| `ohos.permission.APPROXIMATELY_LOCATION` | 设置 `geolocationEnabled={true}`，网页请求定位时。 |
+| `ohos.permission.CAMERA` | 网页通过 `mediaCapturePermissionGrantType` 请求摄像头（`TYPE_VIDEO_CAPTURE`）时。 |
+| `ohos.permission.MICROPHONE` | 网页通过 `mediaCapturePermissionGrantType` 请求麦克风（`TYPE_AUDIO_CAPTURE`）时。 |
+
+在 `entry` 目录下的 `module.json5` 中添加权限
+
+```
+"requestPermissions": [
++  {
++    "name": "ohos.permission.APPROXIMATELY_LOCATION",  // 定位权限名称
++    "reason": "$string:webview_location_reason",
++    "usedScene": {
++      "abilities": [
++        "EntryAbility"
++      ],
++      "when":"inuse"
++    }
++  },
++  {
++    "name": "ohos.permission.CAMERA", // 相机权限名称
++    "reason": "$string:webview_camera_reason",
++    "usedScene": {
++      "abilities": [
++        "EntryAbility"
++      ],
++      "when":"inuse"
++    }
++  },
++  {
++    "name": "ohos.permission.MICROPHONE", // 麦克风权限名称
++    "reason": "$string:webview_microphone_reason",
++    "usedScene": {
++      "abilities": [
++        "EntryAbility"
++      ],
++      "when":"inuse"
++    }
++  },
+]
+```
+
+在 entry 目录下添加申请以上权限的原因
+打开 `entry/src/main/resources/base/element/string.json`，添加：
+```
+{
+  "string": [
++    {
++      "name": "webview_location_reason",
++      "value": "用于网页获取地理位置"
++    },
++    {
++      "name": "webview_camera_reason",
++      "value": "用于网页访问摄像头"
++    },
++    {
++      "name": "webview_microphone_reason",
++      "value": "用于网页访问麦克风"
++    },
+  ]
+}
+```
+
+## 属性
+> [!WARNING]ignoreSilentHardwareSwitch需要设置true网页播放才有声音
+
+> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+详情请查看[webview 官方文档](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md)
+
+| 名称                                                     | 描述                                                         | 类型     | 必填     | 平台                | 鸿蒙支持                                                                           |
+|----------------------------------------------------------| ------------------------------------------------------------ | -------- |----------|---------------------|------------------------------------------------------------------------------------|
+| `source`                                                 | 在 WebView 中加载静态 HTML 或 URI（可选附带 headers） | object   | 是       | All                 | 部分支持（仅支持：**加载 URI：** uri  headers  **静态 HTML：** html  baseUrl）     |
+| `ref`                                                    | 用于获取组件实例的引用 | object   | 是       | All                 | 是                                                                                |
+| `injectedJavaScript?`                                    | 设置在页面文档加载完成后注入到网页中的 JavaScript 代码 | string   | 否       | All                 | 是                                                                                |
+| `originWhitelist?`                                       | 允许导航到的来源字符串列表。          | string[] | 否       | iOS,Android,macOS   | 否                                                                                 |
+| `scalesPageToFit?`                                       | 布尔值，控制网页内容是否缩放以适应视图，并允许用户改变缩放比例。 | boolean  | 否       | Android             | 是                                                                                |
+| `startInLoadingState?`                                   | 布尔值，强制 WebView 在首次加载时显示加载视图。 | boolean  | 否       | iOS,Android,macOS   | 否                                                                                 |
+| `style?`                                                 | 样式对象，用于自定义 WebView 的样式。 | Style    | 否       | ALL                 | 是                                                                                |
+| `domStorageEnabled?`                                     | 布尔值，控制是否启用 DOM Storage。仅在 Android 和鸿蒙上使用。Harmony 中的默认值为 `false` | boolean  | 否       | Android             | 是                                                                                |
+| `javaScriptEnabled?`                                     | 布尔值，控制是否在 WebView 中启用 JavaScript。           | boolean  | 否       | All                 | 是                                                                                |
+| `showsHorizontalScrollIndicator?`                        | 布尔值，控制是否在 WebView 中显示水平滚动指示器。 | boolean  | 否       | iOS,Android,macOS   | 是                                                                                |
+| `showsVerticalScrollIndicator`                           | 布尔值，控制是否在 WebView 中显示垂直滚动指示器。 | boolean  | 否       | iOS,Android,macOS   | 是                                                                                |
+| `overScrollMode?`                                        | 覆盖过滚动模式 | string   | 否       | Android             | 否                                                                               |
+| `bounces?`                                               | 布尔值，控制 WebView 内容滚动到边界时是否产生弹性回弹效果。默认值为 `true`。在未显式设置 `overScrollMode` 时生效，作为回弹开关的兜底。 | boolean  | 否       | iOS                 | 是                                                                                |
+| `ignoreSilentHardwareSwitch`                             | 布尔值，设置为 true 时将忽略硬件静音开关。 | boolean  | 否       | iOS                 | 是                                                                                |
+| `cacheEnabled?`                                          | 设置 WebView 是否使用浏览器缓存。             | boolean  | 否       | iOS,Android,macOS   | 是                                                                                |
+| `cacheMode?`                                             | 覆盖缓存的使用方式。                         | string   | 否       | Android             | 是                                                                                |
+| `textZoom?`                                              | 如果用户在 Android 和鸿蒙系统中设置了自定义字体大小，WebView 中的网页界面会发生不必要的缩放。 | number   | 否       | Android             | 是                                                                                |
+| `incognito?`                                             | 在 WebView 的生命周期内不存储任何数据。  | boolean  | 否       | All                 | 是                                                                                |
+| `mediaPlaybackRequiresUserAction?`                       | 布尔值，决定 HTML5 音视频是否需要用户点击后才能开始播放。默认值为 `true`。（Android API 最低版本 17）。 | boolean | 否       | iOS,Android,macOS   | 是                                                                                |
+| `geolocationEnabled?`                                    | 设置是否在 `WebView` 中启用地理位置功能。默认值为 `false`。仅在 Android 上使用。 | boolean | 否       | Android             | 是                                                                                |
+| `fraudulentWebsiteWarningEnabled?`                       | 布尔值，指示 Web 视图是否对可疑欺诈内容（如恶意软件或钓鱼攻击）显示警告。默认值为 `true`。（iOS 13+） | boolean | 否       | iOS                 | 是（该接口不生效，调用不会产生任何实际效果，非法和欺诈网站是强制启用的，鸿蒙 OS 当前实现如此。）                                |
+| `userAgent?`                                             | 为 `WebView` 设置 User-Agent。 | string | 否       | iOS,Android,macOS   | 是                                                                                |
+| `minimumFontSize?`                                       | Android 根据此值强制设置最小字体大小。取值为 1 到 72 之间的非负整数。超出范围的值将被限定。默认值为 8。如果使用较小的字体大小且无法将整个窗口适配到一屏，尝试将此值设为更小的值。 | number | 否       | Android             | 是                                                                                |
+| `forceDarkOn?`                                           | 配置深色主题 | boolean | 否       | Android             | 是(依赖系统开启深色模式)                                                                            |
+| `injectedJavaScriptBeforeContentLoaded?`                 | 设置在文档元素创建后、其他子资源完成加载前注入到网页中的 JavaScript 代码。 | string | 否       | iOS,Android,macOS   | 是                                                                                |
+| `automaticallyAdjustContentInsets?`                      | 控制是否为放置在导航栏、标签栏或工具栏后面的 Web 视图调整内容间距。默认值为 `true` | boolean | 否       | iOS                 | 否                                                                                 |
+| `automaticallyAdjustsScrollIndicatorInsets?`             | 控制是否为放置在导航栏、标签栏或工具栏后面的 Web 视图调整滚动指示器间距。默认值为 `false`。（iOS 13+） | boolean | 否       | iOS                 | 否                                                                                 |
+| `injectedJavaScriptBeforeContentLoadedForMainFrameOnly?` | 如果为 `true`（默认值；Android 下为必填），仅在主框架中加载 `injectedJavaScriptBeforeContentLoaded`。 | boolean | 否       | iOS                 | 否                                                                                 |
+| `nativeConfig?`                                          | 覆盖用于渲染 WebView 的原生组件。允许使用与原 WebView 相同 JavaScript 的自定义原生 WebView。 | object | 否       | iOS, Android, macOS | 否                                                                                 |
+| `decelerationRate?`                                      | 浮点数，决定用户抬起手指后滚动视图减速的速度。也可使用字符串快捷方式 `"normal"` 和 `"fast"`，对应 iOS 底层实现。 | number | 否       | iOS                 | 否                                                                                 |
+| `javaScriptCanOpenWindowsAutomatically?`                 | 布尔值，指示 JavaScript 是否可以在没有用户交互的情况下打开窗口。默认值为 `false`。 | boolean | 否       | iOS, Android, macOS | 否                                                                                 |
+| `AndroidLayerType?`                                      | 指定图层类型。 | string | 否       | Android             | 否                                                                                 |
+| `mixedContentMode?`                                      |指定混合内容模式。即 WebView 是否允许安全来源加载来自任何其他来源的内容。  | string | 否       | Android             | 否                                                                                 |
+| `allowsFullscreenVideo?`                                 | 布尔值，决定是否允许视频全屏播放。默认值为 false。 | boolean | 否 | Android          | 是                                                                                 |
+| `allowsInlineMediaPlayback?`                             | 布尔值，决定 HTML5 视频是内联播放还是使用原生全屏控制器。默认值为 `false`。 | boolean | 否 | iOS | 否                                                                                 |
+| `allowsAirPlayForMediaPlayback?`                         | 布尔值，指示是否允许 AirPlay。默认值为 `false`。 | boolean | 否 | iOS and macOS | 否                                                                                 |
+| `contentInset?`                                          | Web 视图内容与滚动视图边缘的间距量。默认为 {top: 0, left: 0, bottom: 0, right: 0}。 | object | 否 | iOS | 否                                                                                 |
+| `contentInsetAdjustmentBehavior?`                        | 此属性指定如何使用安全区域间距来修改滚动视图的内容区域。此属性的默认值为 "never"。iOS 11 及以上可用。默认为 `never`。 | string | 否 | iOS | 否                                                                                 |
+| `contentMode?`                                           | 控制加载的内容类型。iOS 13 及以上可用。默认为 `recommended`，即在 iPhone 和 iPad Mini 上加载移动端内容，在更大的 iPad 上加载桌面端内容。 | string | 否 | iOS | 否                                                                                 |
+| `dataDetectorTypes?`                                     | 决定 Web 视图内容中哪些类型的数据被转换为可点击的 URL。默认仅检测电话号码。 | string, or array | 否 | ios | 否                                                                                 |
+| `setBuiltInZoomControls?`                                | 设置 WebView 是否使用其内置缩放机制。默认值为 `true`。设置为 `false` 将阻止使用捏合手势控制缩放。 | boolean | 否 | Android | 否                                                                                 |
+| `setDisplayZoomControls?`                                | 设置使用内置缩放机制时 WebView 是否显示屏幕缩放控件（参见 `setBuiltInZoomControls`）。默认值为 `false`。 | boolean | 否 | Android | 否                                                                                 |
+| `directionalLockEnabled?`                                | 布尔值，决定是否在特定方向上禁用滚动。默认值为 `true`。 | boolean | 否 | iOS | 否                                                                                 |
+| `allowFileAccessFromFileURLs?`                           | 布尔值，设置在 file 协议 URL 上下文中运行的 JavaScript 是否允许访问其他 file 协议 URL 的内容。默认值为 `false`。 | boolean | 否 | iOS, Android, macOS | 否                                                                                 |
+| `allowUniversalAccessFromFileURLs?`                      | boolean | 否 | 否 | iOS, Android, macOS | 否                                                                                 |
+| `allowingReadAccessToURL`                                | 字符串值，指示 WebView 的文件可以在脚本、AJAX 请求和 CSS 导入中引用哪些 URL。仅适用于通过 `source.uri` 设置为 `'file://'` URL 加载的 WebView。如未提供，默认仅允许对 `source.uri` 中提供的 URL 进行读取访问。 | string | 否 | iOS and macOS | 否                                                                                 |
+| `keyboardDisplayRequiresUserAction?`                     | 如果为 `false`，网页内容可以通过编程方式显示键盘。默认值为 `true`。 | boolean | 否 | iOS and macOS | 否                                                                                 |
+| `hideKeyboardAccessoryView?`                             | 如果为 `true`，将隐藏键盘附件视图（< > 和 Done）。 | boolean | 否 | iOS | 否                                                                                 |
+| `allowsBackForwardNavigationGestures?`                   | 如果为 `true`，将支持水平滑动手势。默认值为 `false`。 | boolean | 否 | iOS | 否                                                                                 |
+| `allowFileAccess?`                                       | 如果为 `true`，将允许通过 `file://` URI 访问文件系统。默认值为 `false`。 | boolean | 否 | Android | 否                                                                                 |
+| `saveFormDataDisabled?`                                  | 设置 WebView 是否禁用保存表单数据。默认值为 `false`。从 Android API 26 级开始此功能不再有效，因为有自动填充功能来存储表单数据。 | boolean | 否 | Android | 否                                                                                 |
+| `pagingEnabled?`                                         | 如果此属性值为 `true`，滚动视图在用户滚动时会停在滚动视图边界的倍数位置。默认值为 `false`。 | boolean | 否 | iOS | 否                                                                                 |
+| `allowsLinkPreview?`                                     | 布尔值，决定点击链接时是否显示链接目标的预览。在 iOS 中，此属性在支持 3D Touch 的设备上可用。iOS 10 及以上默认值为 `true`；之前默认值为 `false`。 | boolean | 否 | iOS and macOS | 否                                                                                 |
+| `sharedCookiesEnabled?`                                  | 如果为 `true`，每次 WebView 加载请求时将使用 `[NSHTTPCookieStorage sharedHTTPCookieStorage]` 中的共享 Cookie。默认值为 `false`。更多关于 Cookie 的信息，请阅读 [指南](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md#Managing-Cookies) | boolean | 否 | iOS and macOS | 否                                                                                 |
+| `limitsNavigationsToAppBoundDomains?`                    | 如果为 `true`，向 WebKit 表明 WKWebView 将仅在应用绑定的域中导航。仅适用于 iOS 14 或更高版本。 | boolean | 否 | iOS                 | 否                                                                                 |
+| `textInteractionEnabled?`                                | 如果为 false，向 WebKit 表明 WKWebView 不会与文本交互，因此不显示文本选择循环。仅适用于 iOS 14.5 或更高版本。 | boolean | 否 | iOS | 否                                                                                 |
+| `suppressMenuItems?`                                     | 允许从默认上下文菜单中隐藏菜单项。 | array of strings | 否 | iOS | 否                                                                                 |
+| `mediaCapturePermissionGrantType?`                       | 此属性指定如何处理媒体捕获权限请求。默认为 `prompt`，即反复提示用户。iOS 15 及以上可用。 | string | 否 | iOS | 是                                                                                |
+| `autoManageStatusBarEnabled?`                            | 如果设置为 `true`，WebView 将自动隐藏/显示状态栏，特别是在观看全屏视频时。如果为 `false`，WebView 将完全不管理状态栏。默认值为 `true`。 | boolean | 否 | iOS | 否                                                                                 |
+| `basicAuthCredential`?                                   | 对象，指定用于基本身份验证的用户凭据。 | object | 否 | iOS, Android | 否                                                                                 |
+| `useWebView2?`                                           | 使用 WinUI WebView2 控件代替 WebView 控件作为原生 Web 视图。WebView2 控件是使用 Microsoft Edge (Chromium) 渲染引擎渲染网页内容的 WinUI 控件。可在运行时切换并支持 Fast Refresh。 | boolean | 否 | Windows | 否                                                                                 |
+| `applicationNameForUserAgent?`                           | 追加到现有的 User-Agent。设置 `userAgent` 将覆盖此项。 | string | 否 | All | 是                                                                                |
+| `thirdPartyCookiesEnabled?`                              | 布尔值，在 `WebView` 中启用第三方 Cookie。仅在 Android Lollipop 及以上使用，因为 Android Kitkat 及以下和 iOS 上默认启用第三方 Cookie。默认值为 `true`。 | boolean | 否 | All | 是                                                                                |
+| `menuItems?`                                             | 自定义菜单项对象数组，在选择文本时显示。空数组将隐藏菜单 | array of objects | 否 | iOS,Android             | 是                                                                                                                                                                                             |
+| `paymentRequestEnabled`               | 是否为 WebView 启用 Payment Request API。默认值为 `false`。 | boolean | 否 | Android | 否                                                                                 |
+| `webviewDebuggingEnabled?`            | 布尔值，控制是否允许通过远程调试工具（如 DevTools）调试 WebView 中加载的网页。默认值为 `false`。建议仅在开发环境开启，生产环境关闭以避免安全风险。 | boolean | 否 | Android | 是                                                                                |
+| `allowsPictureInPictureMediaPlayback` | 布尔值，指示 HTML5 视频是否可以画中画播放。默认值为 `false`。 | boolean | 否 | Android | 否                                                                                 |
+| `refreshControlLightMode`             | （仅 iOS）布尔值，决定刷新控件颜色是否为白色。默认值为 `false`。 | boolean | 否 | iOS | 否                                                                                 |
+| `indicatorStyle `                     | 滚动指示器的颜色样式。 | string | 否 | iOS, Android | 否                                                                                 |
+| `renderMode`  | 此属性用于控制 Web 组件的渲染模式，是 OpenHarmony 特有属性。枚举值：`SYNC_RENDER`（默认）、`ASYNC_RENDER`   | string | 否 | - | 是    |
+| `scrollEnabled`  | 布尔值，决定 WebView 中是否启用滚动。默认值为 true。设置为 false 将阻止键盘出现在输入框上方时 webview 移动文档正文。默认值为 `false`。  | boolean | 否 | iOS and macOS | 是    |
+
+
+##  事件回调
+
+> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+| 名称                                                          | 描述                                                        | 类型     | 必填     | 平台                    | 鸿蒙支持          |
+|---------------------------------------------------------------| ------------------------------------------------------------ | -------- | -------- | ----------------------- |-------------------|
+| `onScroll?: (event) => void`                                  | 当 `WebView` 中触发滚动事件时调用的函数。 | function | 否       | iOS and macOS           | 是               |
+| `onHttpError?: (event) => void`                               | 当 `WebView` 收到 HTTP 错误时调用的函数。 | function | 否       | 是                     | 是               |
+| `onLoadStart?: (event) => void`                               | 当 `WebView` 开始加载时调用的函数。  | function | 否       | All                     | 是               |
+| `onLoad?: (event) => void`                                    | 当 `WebView` 完成加载时调用的函数。 | function | 否       | All                     | 是               |
+| `onOpenWindow?`                                               | 当 `WebView` 需要打开新窗口时调用的函数。 | function | 否       | iOS, Android, macOS     | 否                |
+| `onLoadEnd?: (event) => void`                                 | 当 WebView 加载成功或失败时调用的函数。 | function | 否       | All                     | 是               |
+| `onLoadProgress?: (event) => void`                            | 当 WebView 正在加载时调用的函数。        | function | 否       | All                     | 是               |
+| `onMessage?: (event) => void`                                 | 当 webview 调用 window.ReactNativeWebView.postMessage 时调用的函数。 | function | 否       | iOS,Android,macOS       | 是               |
+| `onShouldStartLoadWithRequest?: (event) => void` | 允许自定义处理任何 Web 视图请求的函数。此功能需要与 worker 线程结合使用，相关配置可参考 [worker 线程](https://gitcode.com/CPF-RN/ohos_react_native/blob/master/docs/zh-cn/TurboModule.md#%E8%AE%BE%E7%BD%AE%E8%87%AA%E5%AE%9A%E4%B9%89turbomodule%E8%BF%90%E8%A1%8C%E5%9C%A8worker%E7%BA%BF%E7%A8%8B)的第三步。| function | 否       | iOS,Android,macOS       | 是               |
+| `onContentProcessDidTerminate: (event) => void`               | 当 `WebView` 内容进程终止时调用的函数。 | function | 否       | iOS and macOS WKWebView | 否                |
+| `onRenderProcessGone?: (event) => void`                       | 当 WebView 的渲染进程崩溃或被系统回收时调用的函数。可用于感知页面渲染异常并做恢复处理（如 `reload`）。 | function | 否       | Android                 | 否                |
+| `renderLoading?`                                              | 返回加载指示器的函数。必须将 `startInLoadingState` 属性设置为 `true` 才能使用此属性。 | function | 否       | iOS, Android, macOS     | 否                |
+| `onCustomMenuSelection?`                                      | 当选择自定义菜单项时调用的函数。接收一个 Native 事件，包含三个自定义键：`label`、`key` 和 `selectedText`。 | function | 否       | iOS, Android            | 是               |
+| `onNavigationStateChange?: (event) => void`                   | 当 WebView 开始或结束加载时调用的函数。 | function | 否       | iOS, Android            | 是               |
+| `onError: (event) => void`      | 处理加载错误的回调函数。 | function | 否       | iOS,Android            | 是               |
+| `onLoadSubResourceError: (event) => void ` | 子资源 SSL 错误处理的函数。 | function | 否       | Android            | 是               |
+## 函数
+
+> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+> [!NOTE] 以下方法均为实例方法，需通过组件 `ref` 调用，例如：`ref.current?.goBack()`。
+
+| 名称                               | 描述                                                        | 类型     | 必填     | 平台     | 鸿蒙支持          |
+| ---------------------------------- | ------------------------------------------------------------ | -------- | -------- | -------- | ----------------- |
+| `goForward()`                      | 在 Web 视图的历史记录中前进一页。               | function | 否       | All      | 是               |
+| `goBack()`                         | 在 Web 视图的历史记录中后退一页。                  | function | 否       | All      | 是               |
+| `reload()`                         | 重新加载当前页面。                                    | function | 否       | All      | 是               |
+| `stopLoading()`                    | 停止加载当前页面。                               | function | 否       | All      | 是               |
+| `injectJavaScript(script: string)` | 向 WebView 注入 JavaScript 代码。重要提示：此函数必须在调用 onRestoreUserInterfaceForPictureInPictureStop 之后调用。 | function | 否       | All      | 是               |
+| `requestFocus()`                   | 请求 WebView 获取焦点。（开发 TV 应用的用户可能需要关注此项！） | function | 否       | All      | 是               |
+| `postMessage(data:string)`         | 向 WebView 发送消息，由 `onMessage` 处理。           | function | 否       | All      | 是               |
+| `clearFormData()`                  | 移除当前焦点表单字段上的自动填充弹窗（如果存在）。 | function | 否       | Android  | 否                |
+| `clearCache(status:boolean)`       | 清除资源缓存。注意缓存是应用级别的，因此会清除所有使用的 WebView 的缓存。 | function | 否       | All      | 是               |
+| `clearHistory()`                   | 通知此 WebView 清除其内部的前进/后退列表。  | function | 否       | Android  | 是               |
+| `loadUrl(url: string)`                   | 加载URL。  | function | 否       | Android  | 是               |
+
+## 静态方法
+
+> [!NOTE] 静态方法无需 `ref`，直接通过 `WebView` 调用，例如：`WebView.isFileUploadSupported()`。
+
+| 名称                               | 描述                                                        | 类型     | 必填     | 平台     | 鸿蒙支持          |
+| ---------------------------------- | ------------------------------------------------------------ | -------- | -------- | -------- | ----------------- |
+| `isFileUploadSupported()`          | 检查设备是否支持文件上传，返回 `Promise<boolean>`。 | function | 否       | All      | 是 |
+
+## 遗留问题
+
+- [ ]  webview 部分属性未实现 HarmonyOS 化[issue#17](https://gitcode.com/CPF-RN/rntpc_react-native-webview/issues/17)
+- [ ]  webview 部分属性未实现 HarmonyOS 化[issue#200](https://github.com/react-native-oh-library/react-native-webview/issues/200)
+- [ ]  V13.15.1 新增属性未实现 HarmonyOS 化[issue#2](https://gitcode.com/CPF-RN/rntpc_react-native-webview/issues/2)
+- [X]  中文乱码[issue#18](https://github.com/react-native-oh-library/react-native-webview/issues/18)
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/react-native-webview/react-native-webview/blob/master/LICENSE) ，请自由地享受和参与开源。
+

package/harmony/rn_webview/.gitignore

@@ -0,0 +1,6 @@
+/node_modules
+/oh_modules
+/.preview
+/build
+/.cxx
+/.test

package/harmony/rn_webview/BuildProfile.ets

@@ -0,0 +1,17 @@
+/**
+ * Use these variables when you tailor your ArkTS code. They must be of the const type.
+ */
+export const HAR_VERSION = '13.16.2';
+export const BUILD_MODE_NAME = 'debug';
+export const DEBUG = true;
+export const TARGET_NAME = 'default';
+
+/**
+ * BuildProfile Class is used only for compatibility purposes.
+ */
+export default class BuildProfile { 
+	static readonly HAR_VERSION = HAR_VERSION;
+	static readonly BUILD_MODE_NAME = BUILD_MODE_NAME;
+	static readonly DEBUG = DEBUG;
+	static readonly TARGET_NAME = TARGET_NAME;
+}

package/harmony/rn_webview/OAT.xml

@@ -1,45 +1,45 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<configuration>
-	<oatconfig>
-	<licensefile>LICENSE</licensefile>
-		<filefilterlist>
-			<filefilter name="copyrightPolicyFilter" desc="Filters for compatibility，license header policies">
-				<filteritem type="filename" name="hvigorfile.ts" desc="hvigor构建脚本，DevEco Studio自动生成，不需要添加版权头"/>
-				<filteritem type="filename" name="*.json5" desc="hvigor工程配置文件，DevEco Studio自动生成，不需要添加版权头"/>
-				<filteritem type="filename" name="*.proto" desc="资源文件，不需要添加版权头"/>
-				<filteritem type="filename" name="*.json" desc="资源文件，不需要添加版权头"/>
-				<filteritem type="filepath" name="hvigorw" desc="工程模板，不修改版权头，以防有修改版权风险"/>
-				<filteritem type="filepath" name="hvigorw.bat" desc="工程模板，不修改版权头，以防有修改版权风险"/>
-				<filteritem type="filepath" name="hvigor/hvigor-wrapper.js" desc="工程模板，不修改版权头，以防有修改版权风险"/>
-                <filteritem type="filename" name="LICENSE" desc="工程文件，不修改版权头"/>
-				<filteritem type="filepath" name="src/test/List.test.ets" desc="工程模板，不修改版权头"/>
-				<filteritem type="filepath" name="src/test/LocalUnit.test.ets" desc="工程模板，不修改版权头"/>
-			</filefilter>
-			<filefilter name="defaultPolicyFilter" desc="Filters for compatibility，license header policies">
-				<filteritem type="filename" name="hvigorfile.ts" desc="hvigor构建脚本，DevEco Studio自动生成，不需要添加许可证头"/>
-				<filteritem type="filename" name="*.json5" desc="hvigor工程配置文件，DevEco Studio自动生成，不需要添加许可证头"/>
-				<filteritem type="filename" name="LICENSE" desc="原三方库证书文件无需更改，因此添加过滤"/>
-				<filteritem type="filename" name="NOTICE" desc="NOTICE文件，因此添加过滤"/>
-				<filteritem type="filename" name="*.proto" desc="资源文件，不需要添加许可证头"/>
-				<filteritem type="filename" name="*.json" desc="资源文件，不需要添加许可证头"/>
-				<filteritem type="filepath" name="hvigorw" desc="工程模板，不修改版权头，以防有修改版权风险"/>
-				<filteritem type="filepath" name="hvigorw.bat" desc="工程模板，不修改版权头，以防有修改版权风险"/>
-				<filteritem type="filepath" name="hvigor/hvigor-wrapper.js" desc="工程模板，不修改版权头，以防有修改版权风险"/>
-				<filteritem type="filepath" name="src/test/List.test.ets" desc="工程模板，不需要添加许可证头"/>
-				<filteritem type="filepath" name="src/test/LocalUnit.test.ets" desc="工程模板，不需要添加许可证头"/>
-			</filefilter>
-			<filefilter name="binaryFileTypePolicyFilter" desc="Filters for resources files policies">
-				<filteritem type="filename" name="icon.png" desc="应用图标"/>
-				<filteritem type="filename" name="app_icon.png" desc="应用图标"/>
-				<filteritem type="filename" name="warn.png" desc="页面展示图标"/>
-			</filefilter>
-		</filefilterlist>
-        <policylist>
-            <policy name="projectPolicy" desc="">
-                <policyitem type="license" name="MIT" path="src/.*" desc="license under the MIT"/>
-				<policyitem type="license" name="MIT" path="Index.ets" desc="license under the MIT"/>
-				<policyitem type="license" name="MIT" path="ts.ts" desc="license under the MIT"/>
-            </policy>
-        </policylist>
-	</oatconfig>
+<?xml version="1.0" encoding="UTF-8"?>
+<configuration>
+	<oatconfig>
+	<licensefile>LICENSE</licensefile>
+		<filefilterlist>
+			<filefilter name="copyrightPolicyFilter" desc="Filters for compatibility，license header policies">
+				<filteritem type="filename" name="hvigorfile.ts" desc="hvigor构建脚本，DevEco Studio自动生成，不需要添加版权头"/>
+				<filteritem type="filename" name="*.json5" desc="hvigor工程配置文件，DevEco Studio自动生成，不需要添加版权头"/>
+				<filteritem type="filename" name="*.proto" desc="资源文件，不需要添加版权头"/>
+				<filteritem type="filename" name="*.json" desc="资源文件，不需要添加版权头"/>
+				<filteritem type="filepath" name="hvigorw" desc="工程模板，不修改版权头，以防有修改版权风险"/>
+				<filteritem type="filepath" name="hvigorw.bat" desc="工程模板，不修改版权头，以防有修改版权风险"/>
+				<filteritem type="filepath" name="hvigor/hvigor-wrapper.js" desc="工程模板，不修改版权头，以防有修改版权风险"/>
+                <filteritem type="filename" name="LICENSE" desc="工程文件，不修改版权头"/>
+				<filteritem type="filepath" name="src/test/List.test.ets" desc="工程模板，不修改版权头"/>
+				<filteritem type="filepath" name="src/test/LocalUnit.test.ets" desc="工程模板，不修改版权头"/>
+			</filefilter>
+			<filefilter name="defaultPolicyFilter" desc="Filters for compatibility，license header policies">
+				<filteritem type="filename" name="hvigorfile.ts" desc="hvigor构建脚本，DevEco Studio自动生成，不需要添加许可证头"/>
+				<filteritem type="filename" name="*.json5" desc="hvigor工程配置文件，DevEco Studio自动生成，不需要添加许可证头"/>
+				<filteritem type="filename" name="LICENSE" desc="原三方库证书文件无需更改，因此添加过滤"/>
+				<filteritem type="filename" name="NOTICE" desc="NOTICE文件，因此添加过滤"/>
+				<filteritem type="filename" name="*.proto" desc="资源文件，不需要添加许可证头"/>
+				<filteritem type="filename" name="*.json" desc="资源文件，不需要添加许可证头"/>
+				<filteritem type="filepath" name="hvigorw" desc="工程模板，不修改版权头，以防有修改版权风险"/>
+				<filteritem type="filepath" name="hvigorw.bat" desc="工程模板，不修改版权头，以防有修改版权风险"/>
+				<filteritem type="filepath" name="hvigor/hvigor-wrapper.js" desc="工程模板，不修改版权头，以防有修改版权风险"/>
+				<filteritem type="filepath" name="src/test/List.test.ets" desc="工程模板，不需要添加许可证头"/>
+				<filteritem type="filepath" name="src/test/LocalUnit.test.ets" desc="工程模板，不需要添加许可证头"/>
+			</filefilter>
+			<filefilter name="binaryFileTypePolicyFilter" desc="Filters for resources files policies">
+				<filteritem type="filename" name="icon.png" desc="应用图标"/>
+				<filteritem type="filename" name="app_icon.png" desc="应用图标"/>
+				<filteritem type="filename" name="warn.png" desc="页面展示图标"/>
+			</filefilter>
+		</filefilterlist>
+        <policylist>
+            <policy name="projectPolicy" desc="">
+                <policyitem type="license" name="MIT" path="src/.*" desc="license under the MIT"/>
+				<policyitem type="license" name="MIT" path="Index.ets" desc="license under the MIT"/>
+				<policyitem type="license" name="MIT" path="ts.ts" desc="license under the MIT"/>
+            </policy>
+        </policylist>
+	</oatconfig>
 </configuration>