前言:安卓和 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()
}