HarmonyOS开发：Web 组件本地网页交互

本文概述

本文以web 组件使用为主题，介绍了web 组件的基本使用方式。以本地网页为例，对鸿蒙代码与网页交互进行了探索。

Web 组件的基本使用

基本概述：

代码链接：web 组件的基本使用
设备选择：鸿蒙真机
- DevEco 提供的Previewer 工具能力受限，推荐使用鸿蒙真机
操作步骤：
1. 手动添加网络权限：模拟器默认是全权限，无需手动申请
2. Web 组件参数准备
3. Web 组件参数填充

运行效果：

加载个人博客界面

手动添加网络权限

代码位置：main/module.json5

json 复制代码

{
  "module": {
    ..................
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]
  }
}

Web 组件参数准备

实例化 WebviewController

arduino 复制代码

// Web组件需要的控制器
studyWebController : WebviewController = new webview.WebviewController()

Web 组件参数填充

传入参数：src、controller

kotlin 复制代码

Web({
  src: 'https://juejin.cn/user/3413335797139511',//加载指定链接的网页
  controller: this.studyWebController
})

错误排查

检查权限是否添加正确
检查页面索引是否正确
项目签名是否正确：推荐使用华为账号登录DevEco 进行自动签名
可尝试清除项目缓存

Web 组件交互

基本说明

完整代码： Web 组件与本地网页交互
鸿蒙代码与本地网页、在线网页交互思路相同，此例以本地网页展开，以避免服务器因素影响。
资源说明：华为官方提供了一组本地网页，可实现抽奖功能
业务需求：
- 使用鸿蒙代码与本地网页的JS 代码进行交互，将原有对话框进行拦截并替换
- 核心在于拦截此方法：startDraw()
本地网页代码存放位置

核心代码

拦截原有弹窗：

csharp 复制代码

Web({src: this.params['path'], controller: this.webController})
    ..................
    .onConfirm( (event) => {//拦截原网页事件，例如弹窗等
      AlertDialog.show({
        message: '恭喜您抽中啦:' + event?.message,
        confirm: {//自定义对话框中确认按钮
          value: '确认',
          action: () => {
            event?.result.handleConfirm()//此时，调用了本地网页内的原有逻辑，模拟网页点击确认按钮
          }
        },
        cancel: () => {//自定义对话框中取消按钮
          event?.result.handleCancel()//此时，调用了本地网页内的原有逻辑，模拟网页点击取消按钮
        }
      })

      // 当onConfirm回调返回false的时候：触发默认的弹窗，如果返回true时，系统自定义弹窗
      return true
    })
    ..................
}

运行效果

由于本地网页加载过快，所以"正在加载"图标，显示时间较短

代码细节

工程结构：WebMainPage.ets 是主界面

参数封装：路由跳转

封装示例：

typescript 复制代码

//作为ViewModel层，作为数据来源。用作路由参数传递
// 对于两个及以上的参数传递，均采用ViewModel 进行包裹
export class Model {

  path: Resource | string = ''

  tips: Resource | string = ''

}

参数传递：

php 复制代码

Navigator({target: 'pages/web/WebLocalPage', type: NavigationType.Push}) {
    Button('加载本地网页')
  }
  .params( {path: $rawfile('index.html') , tips: '本地的网页资源'} as Model )

参数接收：

less 复制代码

@State params: object = router.getParams()//接收上级路由携带的参数

数据传递：

数据提供方：

less 复制代码

@Provide('WebLocalPagewebController') webController: webview.WebviewController = new webview.WebviewController()
@Provide('WebLocalPageisLoading') isLoading: boolean = false//判断网页是否正在加载
@Provide('WebLocalPageintervalLoading') intervalLoading: number = -1

数据接收方：

less 复制代码

@Consume('WebLocalPagewebController')  webController: webview.WebviewController
@Consume('WebLocalPageisLoading') isLoading: boolean//判断网页是否正在加载
@Consume('WebLocalPageintervalLoading') intervalLoading: number

Web 组件的权限问题

重要权限

scss 复制代码

Web({src: $rawfile('index.html'), controller: this.controller})
    .height('50%')
    .domStorageAccess(true) // 设置开启存储权限（HTML JS DOM）
    .fileAccess(true) // 设置文件系统的访问权限（HTML JS DOM）
    .imageAccess(true) // 设置允许加载图片资源（HTML JS DOM）
    .javaScriptAccess(true) // 运行执行JavaScript脚本，默认是打开的
    .mixedMode(MixedMode.All) // 默认情况下，不允许，加载 HTTP 与 HTTP的（HTML JS DOM）
    .zoomAccess(true) // 是否可以手势进行缩放
    .overviewModeAccess(true) // 设置是否使用预览模式 加载网页
    .databaseAccess(true) // 是否开启数据存储权限（HTML JS DOM）
    .geolocationAccess(true) // 是否打开获取地理位置权限（HTML JS DOM）
    .mediaPlayGestureAccess(true) // 设置有声音的视频播放是否 需要用户手动点击才能有声音（HTML JS DOM）
    .multiWindowAccess(true) // 是否开启多窗口权限（HTML JS DOM）

示例代码

typescript 复制代码

import webview from '@ohos.web.webview'
import promptAction from '@ohos.promptAction';
@Entry
@Component
struct WebLoad {
  controller: webview.WebviewController =  new webview.WebviewController();

  build() {
    Column() {
      /*// 加载本地的H5
      Web({src: $rawfile('index.html'), controller: this.controller})
        .height('50%')
        .domStorageAccess(true) // 设置开启存储权限（HTML JS DOM）
        .fileAccess(true) // 设置文件系统的访问权限（HTML JS DOM）
        .imageAccess(true) // 设置允许加载图片资源（HTML JS DOM）
        .javaScriptAccess(true) // 运行执行JavaScript脚本，默认是打开的
        .mixedMode(MixedMode.All) // 默认情况下，不允许，加载 HTTP 与 HTTP的（HTML JS DOM）
        .zoomAccess(true) // 是否可以手势进行缩放
        .overviewModeAccess(true) // 设置是否使用预览模式 加载网页
        .databaseAccess(true) // 是否开启数据存储权限（HTML JS DOM）
        .geolocationAccess(true) // 是否打开获取地理位置权限（HTML JS DOM）
        .mediaPlayGestureAccess(true) // 设置有声音的视频播放是否 需要用户手动点击才能有声音（HTML JS DOM）
        .multiWindowAccess(true) // 是否开启多窗口权限（HTML JS DOM）*/

      // 加载在线的H5
      Web({src: 'https://juejin.cn/user/3413335797139511', controller: this.controller})
        .height('90%')
        .horizontalScrollBarAccess(false) // 设置显示横向滚动条
        .verticalScrollBarAccess(false) // 设置显示纵向滚动条
        .cacheMode(CacheMode.Default) // 设置缓存模式
        // .textZoomAtio(1000) // 默认是100的正常比例，文字的比例
        .initialScale(100) // 默认是100的正常比例，网页整体的比例
        .defaultFontSize(853) // 网页字体大小，默认是13,此处修改不生效，推测是网页的问题 
        .darkMode(WebDarkMode.On) // 默认值：WebDarkMode.Off， On跟随系统的白天黑夜模式
        .forceDarkAccess(true) // 强制性修改深色模式，暴力修改的
        // 在开发过程中，出现了Web组件的问题，可以来分析调试Web组件
        .onConsole((event) => {
          console.log('message.getMessage():' + event.message.getMessage())
          console.log('message.getMessageLevel():' + event.message.getMessageLevel())
          promptAction.showToast({message: event.message.getMessage()})
          return false
        })

      Row() {
        Button('前进动作').onClick(() => {
          this.controller.forward()
        })
        Button('后退动作').onClick(() => {
          this.controller.backward()
        })
        Button('刷新').onClick(() => {
          this.controller.refresh()
        })
        Button('停止').onClick(() => {
          this.controller.stop()
        })
        Button('清除历史').onClick(() => {
          this.controller.clearHistory()
        })
      }
    }
    .width('100%')
  }
}