鸿蒙实现 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()
}
相关推荐
用户938515635073 分钟前
Type vs Interface:读完这篇就没有面试官能难倒你了
前端·面试·typescript
油丶酸萝卜别吃1 小时前
jquery-ajax.js 说明文档
前端·javascript·jquery
windliang1 小时前
Claude Code 源码分析(九):子 Agent 如何分叉、继续与回到父会话
前端·javascript·面试
柒和远方2 小时前
V063: TS 面试必考:interface 与 type 的四大差异,与 LLM Harness 的自动化择优
前端·javascript
半个落月2 小时前
React useRef 详解:DOM 引用、持久化值与 Worker 实例
前端·react.js
阿黎梨梨2 小时前
TypeScript 类型编程:从新手到 Harness 工程实践
前端
黄金决明子2 小时前
Vue3 + Vite 打包后打开空白?
前端
张龙6872 小时前
终端效率翻倍实战:fzf + zoxide + ripgrep + bat 组合拳,告别重复敲命令
前端
宿6742 小时前
vue3-env环境
前端·vue.js
蔬菜_2 小时前
前端转全栈-day5(数组、list、set)
java·前端·数据结构·list