# H5适配HarmonyOS开发指导

#### 问题现象

其他端已经有完整H5页面代码，如何适配到HarmonyOS应用中？

#### 背景知识

ArkWeb：提供了Web组件，用于在应用程序中显示Web页面内容。常见使用场景包括：

*   应用集成Web页面：应用可以在页面中使用Web组件，嵌入Web页面内容，以降低开发成本，提升开发、运营效率。
*   浏览器网页浏览场景：浏览器类应用可以使用Web组件，打开三方网页，使用无痕模式浏览Web页面，设置广告拦截等。
*   小程序：小程序类宿主应用可以使用Web组件，渲染小程序的页面，实现同层渲染，视频托管等小程序的功能。

#### 解决方案

快速适配流程图如下：

1.  创建Web组件加载：
    *   页面加载是Web组件的基本功能。根据页面加载数据来源可以分为三种常用场景，包括加载网络页面、加载本地页面、加载HTML格式的富文本数据。详情请参考：使用Web组件加载页面。
    *   加载在线网页时需要在module.json5中配置ohos.permission.INTERNET网络访问权限。具体配置方式请参考：声明权限。
    *   创建Web组件时，可通过提供的生命周期回调接口，用于感知状态变化和处理业务。如onPageBegin回调，网页开始加载时触发该回调等。详情请参考：Web组件的生命周期。
    *   创建Web组件时需要配置属性，某些属性是默认关闭的，开启后才能使用对应的功能。如fileAccess，开启后才能访问文件系统。详情请参考：Web的属性。
2.  设置User-Agent ：
    
    其他端使用User-Agent（简称UA）字符串识别请求的来源设备及其特性，从而根据这些信息提供定制化的内容和服务时，需要给HarmonyOS端通过setCustomUserAgent()方法设置HarmonyOS字段，并通过该字段进行HarmonyOS适配。根据业务选择性设置，详情请参考：User-Agent开发指导。
    

3.  设置允许本地资源跨域：
    
    在使用Web组件加载本地离线资源的时候，Web组件会拦截file协议和resource协议的跨域访问。可以通过设置一个路径列表，再使用file协议访问该路径列表中的资源，允许跨域访问本地文件。根据业务选择性设置，详情请参考：解决Web组件本地资源跨域问题。
    
4.  HarmonyOS与前端页面交互：
    *   HarmonyOS端需要调用前端H5页面函数时，可以通过runJavaScript和runJavaScriptExt方法。详情请参考：应用侧调用前端页面函数。
    *   前端H5页面需要调用HarmonyOS端函数时，有两种方式。一种在Web组件初始化调用，使用javaScriptProxy接口。另外一种在Web组件初始化完成后调用，使用registerJavaScriptProxy接口。两种方式都需要和deleteJavaScriptRegister接口配合使用，防止内存泄漏。详情请参考：前端页面调用应用侧函数。