鸿蒙实现 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()
}
相关推荐
ifeng091821 小时前
HarmonyOS资源加载进阶:惰性加载、预加载与缓存机制
深度学习·缓存·harmonyos
Mapmost21 小时前
【高斯泼溅】从一张好照片开始:Mapmost 3DGS建模之图像采集指南
前端
李少兄21 小时前
解决 Chrome 下载 `.crx` 文件被自动删除及“无法安装扩展程序,因为它使用了不受支持的清单版本”问题
前端·chrome
孟祥_成都21 小时前
最好的组件库教程又回来了,升级为 headless 组件库!
前端·面试·架构
Man21 小时前
当我们执行 npm run xxx 的时候实际执行逻辑和流程
前端·javascript·前端框架
曾富贵1 天前
【eslint】快速配置
前端
阿珊和她的猫1 天前
Webpack Loader 和 Plugin 实现原理详解
前端·webpack·node.js
做怪小疯子1 天前
JavaScript 中Array 整理
开发语言·前端·javascript
香香爱编程1 天前
Electron里的electron-window-state 使用
前端·javascript·vue.js·vscode·electron·前端框架
牧野星辰1 天前
eslint你不懂的都在这里,不信你进来看嘛~
前端·eslint