鸿蒙实现 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()
}
相关推荐
2401_8570262310 分钟前
依托 SSM 与 Vue 的电脑测评系统:展现电脑真实实力
前端·javascript·vue.js
2401_8576100313 分钟前
解析基于 SSM 框架 Vue 电脑测评系统:把握电脑测评精髓
前端·javascript·vue.js
烂不烂问厨房14 分钟前
前端项目发布后打开报错Uncaught SyntaxError: Unexpected token ‘<‘ (at chunk-vendors)
前端·javascript·vue.js·前端打包发布
总爱写点小BUG14 分钟前
可搜索的下拉选择框:filterable属性详解
前端·javascript·vue.js
毛毛三由16 分钟前
表单校验记录
前端·vue.js·elementui
程序媛_MISS_zhang_011016 分钟前
el-table中合并垂直方向的单元格
前端·javascript·vue.js
console.log('D')26 分钟前
预览和下载 (pc和微信小程序)
前端
web1478621072329 分钟前
前端XMLHttpRequest get请求能不能在body中传参数?
前端
何极光29 分钟前
uniapp小程序样式穿透
前端·小程序·uni-app
Yvemil730 分钟前
《开启微服务之旅:Spring Boot Web开发》(三)
前端·spring boot·微服务