鸿蒙实现 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()
}
相关推荐
二流小码农1 分钟前
鸿蒙开发:简单实现一个服务卡片
harmonyos
OpenTiny社区5 分钟前
HDC2025即将拉开序幕!OpenTiny重新定义前端智能化解决方案~
前端·vue.js·github
每天都想着怎么摸鱼的前端菜鸟11 分钟前
【uniapp】uniapp开发安卓应用接入谷歌登录获取idtoken
前端·google
anyup14 分钟前
震惊了!中石化将开源组件二次封装申请专利,这波操作你怎么看?
前端·程序员
Oriel15 分钟前
Strapi对接OSS:私有链接导致富文本图片过期问题的解决方案
前端
noodb软件工作室24 分钟前
支持中文搜索的markdown轻量级笔记flatnotes来了
前端·后端
量子位30 分钟前
Day0 迁移、一键部署,华为开源的昇思 MindSpore 成为大模型开发的 “万能钥匙”
人工智能·华为
Catfood_Eason43 分钟前
HTML5 盒子模型
前端·html
小李小李不讲道理1 小时前
「Ant Design 组件库探索」二:Tag组件
前端·react.js·ant design