鸿蒙实现 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()
}
相关推荐
赵锦川4 分钟前
微信小程序设置屏幕安全距离
前端·javascript·vue.js
GISer_Jing35 分钟前
Javascript——设计模式(一)
前端·javascript·设计模式
yqcoder42 分钟前
react 中 useCallback Hook 作用
前端·javascript·react.js
jun7788951 小时前
React状态管理之Redux
前端·react.js·前端框架
熊的猫1 小时前
实现 Toy-React , 实现 JSX 渲染
前端·javascript·chrome·react.js·webpack·前端框架·node.js
白墨阳1 小时前
vue3: ref, reactive, readonly, shallowReactive
前端·javascript·vue3.js
白墨阳1 小时前
vue3: toRef, reactive, toRefs, toRaw
前端·javascript·vue3.js
蓝冰凌1 小时前
前端pdf预览方案
前端·pdf·状态模式
叶浩成5201 小时前
vue2+a-table——实现框选选中功能——js技能提升
开发语言·前端·javascript
迂 幵1 小时前
vue 提交表单抹除字段为空的数据
前端·javascript·vue.js