HarmonyOS WebView

霹雳桃2024-08-14 21:10

HarmonyOS WebView

  • Web组件提供基础的前端页面加载的能力，包括加载网络页面、本地页面、html格式文本数据。
  • Web组件提供丰富的页面交互的方式，包括：设置前端页面深色模式，新窗口中加载页面，位置权限管理，Cookie管理，应用侧使用前端页面JavaScript等能力。

注意：使用 webview 一定要去开启网络权限，否则页面将无法加载

1.创建一个简单的 webview 页面

1.1 app端 创建 webview 页面

ts 复制代码 
// 1. 引入依赖
import { webview } from '@kit.ArkWeb';

// 2. 创建webview控制器
@State message: string = 'webview page'
private controller: WebviewController = new webview.WebviewController()

build () {
  Column ({ space: 15 }) {
    Text( this.message )
      .fontSize( 50 )
      .fontWeight( FontWeight.Bold )

    // 2. 利用 Web 组件引入对应的 Web端 内容
    Web({ src: '自己本地随便启动一个项目地址', controller: this.controller })
      .width('80%')
      .height(400)
      .backgroundColor('#11dd00')
  }
  .height( '100%' )
  .width( '100%' )
}

2.app端 输出 h5 的日志

  • 正常情况下我们开发会有很多日志输出，开发过webview的同学都知道，h5的日志不太好看，除非使用Vconsole插件
  • 鸿蒙对这个情况做的比较好，可以直接在app端的日志输出h5的日志
  • 使用webvivew属性 OnConsole 监听h5的console.log输出，并在控制台输出日志
ts 复制代码 
Web({ src: '自己本地随便启动一个项目地址', controller: this.controller })
    .width('80%')
    .height(400)
    .backgroundColor('#11dd00')
    .border({
      width: 1,
      radius: 5,
      style: BorderStyle.Solid
    })
    .onConsole((event) => {
      console.log('wuwuwu h5 打印的日志 => ', event?.message.getMessage())
      return true
    })

3.h5 和 app端 方法调用（数据传递）

  • 方法1：在鸿蒙中 h5 和 app端的交互是通过 window 来进行的
    • h5 把方法挂载到 window 对象上，app端 可以通过固定方法调用
    • app端 也可以通过固定api 把方法挂载到 window 对象上让 h5 调用。
    • 如果要做数据传递，在方法中加上返参 或者回调即可
  • 方法2：可以通过双向数据通道进行数据传递
    • 实际上就是通过 postMessage

3.1 app端 调用 h5 的方法

3.1.1 h5 挂载方法到 window 对象上
ts 复制代码 
// 在 h5 中，监听window.onload事件，挂载方法 testA 到 window 对象上
window.onload = () => {
  window.testA = () => {
    console.log('testFn 方法被调用')
  }
}
3.1.2 app端 调用 h5 的方法
ts 复制代码 
// app端 创建一个按钮，通过按钮触发 h5 中的 testA 方法
Button('调用h5按钮')
  .onClick(() => {
    // 使用 webview 控制器中的方法 runJavaScript 调用 h5 中的 testA 方法
    this.controller.runJavaScript('testA()')
    console.log('wuwuwu => 1. 调用 testFn 方法')
  })

3.2 h5 调用 app端 的方法

3.2.1 app端 挂载方法到 window 对象上
  • app端 需要创建一个事件对象
  • 通过固定api挂载到 window对象上
    • 根据api可以分为两种方式
3.2.1.1 创建事件对象
ts 复制代码 
// 通过 class 创建一个全局公共类，里面包含一个方法 testB 
class ToWebObject {
  constructor() {
  }

  public testB() {
    console.log('wuwuwu 我是 App端 的打印信息 => App端 的 testB 函数被调用了')
  }
}
3.2.1.2 使用 web 属性 javaScriptProxy 挂载方法到 window 对象上
ts 复制代码 
// app端 
// 创建要挂载的内容
@State sendObject: ToWebObject = new ToWebObject()

Web({ src: '自己本地随便启动一个项目地址', controller: this.controller })
  .width('80%')
  .height(400)
  .backgroundColor('#11dd00')
  .border({
    width: 1,
    radius: 5,
    style: BorderStyle.Solid
  })
  .onConsole((event) => {
    console.log('wuwuwu h5 打印的日志 => ', event?.message.getMessage())
    return true
  })
  .javaScriptProxy({
      // 挂载的事件对象
      object: this.sendObject,
      // 挂载到 window 对象上的属性名
      name: 'wuwuwu',
      // 注册的方法名，只有在这个数据中的方法 h5 才可以调用
      // 比如 object 中有两个方法 testA 和 testB，h5 只能调用 testB 方法
      methodList: ['testB'],
      controller: this.controller
    })
3.2.1.3 使用 webview 控制器的方法 registerJavaScriptProxy 挂载方法到 window 对象上，使用此方法后必须调用 refresh，方法才能生效
ts 复制代码 
// app端 
// 创建要挂载的内容
@State sendObject: ToWebObject = new ToWebObject()
// 控制器
private controller: WebviewController = new webview.WebviewController()

// web 组件
Web({ src: '自己本地随便启动一个项目地址', controller: this.controller })
  .width('80%')
  .height(400)
  .backgroundColor('#11dd00')
  .border({
    width: 1,
    radius: 5,
    style: BorderStyle.Solid
  })
  .onConsole((event) => {
    console.log('wuwuwu h5 打印的日志 => ', event?.message.getMessage())
    return true
  })
 
// 新建俩按钮用来挂载事件
Row() {
  Button('注册一些事件')
    .onClick(() => {
      this.controller.registerJavaScriptProxy(
        this.sendObject,
        'wuwuwu',
        ['testB'],
      )
    })

  Button('刷新一下激活事件')
    .onClick(() => {
      this.controller.refresh()
    })
}
3.2.1.4 使用 webview 控制器的方法 registerJavaScriptProxy 挂载方法到 window 对象上，可以在声明周期 onControllerAttached 上调用该方法，此时 h5 还未加载
ts 复制代码 
Web({ src: '自己本地随便启动一个项目地址', controller: this.controller })
  .width('80%')
  .height(400)
  .backgroundColor('#11dd00')
  .border({
    width: 1,
    radius: 5,
    style: BorderStyle.Solid
  })
  .onConsole((event) => {
    console.log('wuwuwu h5 打印的日志 => ', event?.message.getMessage())
    return true
  })
  .onControllerAttached(() => {
    this.controller.registerJavaScriptProxy(
      this.sendObject,
      'wuwuwu',
      ['testB'],
    )
	// 这块有个问题 ,在这个声明周期中调用onControllerAttached，在不调用refresh的情况下 h5 可以正常调用testB
	// 官方文档中只是说 onControllerAttached 必须要调用 refresh，才能生效
	// 这里不知道是有真的问题 或者是 官方文档没有跟新这部分内容
	// 我猜测是因为这个生命周期的时候 h5 还没有加载导致，，相当于 refresh 的作用
    this.controller.refresh()
  })
3.2.1.5 h5 调用方法，不管 app端 咋么调用，h5 都通过 window 对象来调用
ts 复制代码 
// h5
// 直接调用 window 方法就行
// window.挂载时的name.要调用的方法名
window.wuwuwu.testB()

3.3 建立 app端 和 h5 双向数据通道

  • 1.创建双向数据通道接口

    • 使用的 API
      • webview 控制器方法 createWebMessagePorts()
    • 返回值:
      • 是一个数组, 数组内有两个接口 [ 接口1, 接口2 ]
      • [0] : 提供给 h5端 使用的, 需要传递给 h5端, h5端 使用这个接口去监听 App端 发来的消息, 同时也是使用这个接口向 App 端发送消息
      • [1] : 提供给 App端 使用的, App端 使用这个接口去监听 h5端 发来的消息, 同时也是使用这个接口向 h5端 发送消息

  • 2.把属于 h5端 的接口传递过去

    • 注意: 此时不是 App端 和 h5端 建立好通道传递
      • 而是先把建立通道的 "工具" 传递过去
      • 所以, 此时是 App端 给 window 发送一个消息( 而不是和 h5端 建立通道连接 )

  • 3.建立通道

    • 使用 webview 控制器方法 postMessage 把 "接口工具" 发过去
    • App端 和 h5端 都利用 "接口工具" 去建立双向连接通道
3.3.1 创建创建双向数据通道接口，并完成事件监听
  • 双向通道数据接口通过 webview 控制器方法 createWebMessagePorts() 创建
ts 复制代码 
// ---------- app端 
// 变量

private controller: WebviewController = new webview.WebviewController()
private posts: webview.WebMessagePort[] = []
private appPort: webview.WebMessagePort = Object()

registerPortMessage() {
  this.posts = this.controller.createWebMessagePorts()
  // this.posts === [ h5端使用的接口, App端使用的接口 ]
  this.appPort = this.posts[1]

  // 把 h5 使用的接口传递给 h5
  this.controller.postMessage('__init__port__', [this.posts[0]], '*')

  // 监听 h5 发送的消息
  this.posts[1].onMessageEvent((event) => {
    this.messageEventHandle(event)
  })
}

messageEventHandle(event: webview.WebMessage) {
  const resultInfo = JSON.parse(event as string) as ResultInfoType

  if (resultInfo.message === '__awu__') {
    console.log('wuwuwu app 端 接收到数据了', resultInfo.info.username, resultInfo.info.password, resultInfo.info.msg)

    // 接收到数据之后，告诉 h5 我接收到了数据
    this.appPort.postMessageEvent(JSON.stringify({
      message: '__awu__',
      info: '我接收到数据了'
    }))
  }
}

// ----------h5端 
// 变量 
const count = ref(0)
const webPort = ref()

// 监听 window 消息
window.addEventListener('message',(event)=>{
  // data 需要和 app端 发送消息的一致
  if(event.data === '__init__port__' && event.ports[0] !== null){
    // 表示发来的消息是 __init__port__
    // 并且携带了属于 h5端 的那个接口
    webPort.value = event.ports[0]
    // 至此, 你需要给 App端 发送消息的时候, 就可以使用 webPort 发送消息

    // 利用接口工具建立连接通道
    // 利用接口工具建立连接通道, 利用的事 App端 发送过来的接口工具
    webPort.value.onmessage = (event:any) => {
      // 接收到 App端 发送的消息 事件处理
      console.log('messageEventHandler',event.data)
    }
  }
})
3.3.2 发送消息
  • 发送消息通过 通道 发送
ts 复制代码 
// app端 
Button('发送点信息')
  .onClick(() => {
    // 1. 发送数据
    // this.appPort.postMessageEvent(JSON.stringify({
    //   message: '__awu__',
    //   info: '按钮发送的数据'
    // }))

    // 2. 发送数据
    this.appPort.postMessageEvent('按钮发送的数据')
  })

// h5 端
const sendMessage = ()=>{
  webPort.value.postMessage(JSON.stringify({
    message: '__awu__',
    info: { username: 'admin', password: '1234567',msg:`这是发送的第${count.value}消息` }
  }))

  count.value++
}
相关推荐
MarkHD6 小时前
第十八天 WebView深度优化指南
华为·harmonyos
塞尔维亚大汉7 小时前
OpenHarmony（鸿蒙南向）——平台驱动开发【MIPI CSI】
harmonyos·领域驱动设计
别说我什么都不会7 小时前
鸿蒙轻内核M核源码分析系列十五 CPU使用率CPUP
操作系统·harmonyos
塞尔维亚大汉9 小时前
OpenHarmony（鸿蒙南向）——平台驱动开发【I3C】
harmonyos·领域驱动设计
今阳11 小时前
鸿蒙开发笔记-6-装饰器之@Require装饰器，@Reusable装饰器
android·app·harmonyos
余多多_zZ11 小时前
鸿蒙初学者学习手册(HarmonyOSNext_API14)_组件截图（@ohos.arkui.componentSnapshot (组件截图) ）
学习·华为·harmonyos·鸿蒙·鸿蒙系统
一个处女座的程序猿O(∩_∩)O13 小时前
鸿蒙开发技术指南：从入门到精通
华为·harmonyos
陈无左耳、15 小时前
HarmonyOS学习第4天: DevEco Studio初体验
学习·华为·harmonyos
月未央17 小时前
HarmonyOS Next 开发系列：Local 状态管理实践
harmonyos
openinstall全渠道统计1 天前
免填邀请码工具：赋能六大核心场景，重构App增长新模型
android·ios·harmonyos
热门推荐
01DeepSeek各版本说明与优缺点分析02如何在WPS和Word/Excel中直接使用DeepSeek功能03DeepSeek本地部署详细指南04太炸裂了！清华大学deepseek从入门到精通使用手册又出第三版了，《普通人如何抓住DeepSeek红利》（无套路，直接下载）05本地部署DeepSeek教程（Mac版本）06DeepSeek r1本地安装全指南07DeepSeek RAGFlow构建本地知识库系统08本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程09DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具10【docker】Windows10安装Docker Desktop - WSL update failed