鸿蒙实现 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()
}
相关推荐
大土豆的bug记录1 小时前
鸿蒙权限授权弹窗(推荐)
华为·harmonyos
Calm5501 小时前
ele表单未输入值提示为英文
前端
爪洼守门员1 小时前
前端性能优化
开发语言·前端·javascript·笔记·性能优化
TOYOAUTOMATON1 小时前
GTH系列模组介绍
前端·目标检测·自动化
2022.11.7始学前端1 小时前
n8n第十节 把Markdown格式的会议纪要发到企微
前端·chrome·n8n
马剑威(威哥爱编程)2 小时前
【鸿蒙开发案例篇】基于MindSpore Lite的端侧人物图像分割案例
华为·harmonyos
fruge2 小时前
Lodash 源码精读:防抖节流的实现细节与边界场景
前端
yuzhiboyouye2 小时前
怎么熟悉一个web前端项目的业务呢?
前端
GISer_Jing2 小时前
AI在前端营销和用户增长领域应用(待补充)
前端·人工智能