鸿蒙实现 web 传值

前言:安卓和 IOS 加载 H5 的时候,都有传值给到 H5 或者接收 H5 值,鸿蒙也可传值和接收 H5 的内容,以下是鸿蒙传值给 H5 端的具体操作

一: 定义好 H5 和鸿蒙传值的方法名,两端必须保持方法名一致

// xxx.ets

import { webview } from '@kit.ArkWeb'

//和 H5 定义的传输内容

class TestObj {

constructor() {

}

test(data1: string, data2: string, data3: string): string {

console.log("data1:" + data1)

console.log("data2:" + data2)

console.log("data3:" + data3)

return "AceString"

}

toString(): void {

console.log('toString' + "interface instead.")

}

}

@Entry

@Component

struct Index {

@State message: string = 'Hello World'

controller: webview.WebviewController = new webview.WebviewController()

testObj = new TestObj();

build() {

Row() {

Column() {

Web({ src: $rawfile('index.html'), controller: this.controller })

.javaScriptAccess(true)

.javaScriptProxy({

object: this.testObj, // 传输的内容

name: "objName", // H5 定义的传值方法名

methodList: ["test", "toString","goBack"], // 具体的方法

controller: this.controller,

})

}.width('100%')

}.height('100%')

}

}

复制代码
// H5 页面返回
goBack() {
  router.back()
}
相关推荐
HMS Core6 分钟前
借助HarmonyOS SDK,《NBA巅峰对决》实现“分钟级启动”到“秒级进场”
华为·harmonyos
蓝倾30 分钟前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong34 分钟前
Docker容器启动postgres端口映射失败问题
前端
二二孚日35 分钟前
自用华为ICT云赛道AI第一章知识点-机器学习概览
人工智能·华为
花海如潮淹37 分钟前
硬件产品研发管理工具实战指南
前端·python
用户38022585982437 分钟前
vue3源码解析:依赖收集
前端·vue.js
WaiterL37 分钟前
一文读懂 MCP 与 Agent
前端·人工智能·cursor
gzzeason40 分钟前
使用Vite创建React初始化项目
前端·javascript·react.js
又双叒叕77840 分钟前
React19 新增Hooks:useOptimistic
前端·javascript·react.js
归于尽1 小时前
V8 引擎是如何给 JS"打扫房间"的 ?
前端·javascript