// index.html
<!DOCTYPE html>
<html>
<body>
调用原生!
这是一个测试信息，默认字体为黑色，调用runJavaScript方法后字体为绿色，调用runJavaScriptCodePassed方法后字体为红色
<script>
// 调用有参函数时实现。
var param = "param: JavaScript Hello World!";
function htmlTest(param) {
document.getElementById('text').style.color = 'green';
console.log(param);
}
// 调用无参函数时实现。
function htmlTest() {
document.getElementById('text').style.color = 'green';
}
// Click Me！触发前端页面callArkTS()函数执行JavaScript传递的代码。
function callArkTS() {
objName.test('success');
}
</script>
</body>
</html>
// Index.ets
// xxx.ets
import { webview } from ‘@kit.ArkWeb’;
import router from ‘@system.router’;
class TestObj {
constructor() {
}
test(data1: string) {
console.log(“data1:” + data1);
getContext(this).eventHub.emit(‘next’);
}
}
@Entry
@Component
struct WebComponent {
webviewController: webview.WebviewController = new webview.WebviewController();
testObj = new TestObj();
aboutToAppear() {
// 配置Web开启调试模式
webview.WebviewController.setWebDebuggingAccess(true);
getContext(this).eventHub.on(‘myEvent’, () => this.runJS());
getContext(this).eventHub.on(‘next’, () => {
router.push({
uri: ‘pages/ResultPage’
});
});
}
runJS() {
console.log(‘webviewController’,this.webviewController)
this.webviewController.runJavaScript(‘htmlTest(param)’);
}
build() {
Column() {
Button(‘runJavaScript’)
.onClick(() => {
// 前端页面函数无参时，将param删除。
this.webviewController.runJavaScript(‘htmlTest(param)’);
})
Button(‘nextPage’).onClick(() => {
router.push({
uri: ‘pages/ResultPage’
});
})
Web({ src: $rawfile(‘index.html’), controller: this.webviewController })
.onControllerAttached(() => {
this.webviewController.registerJavaScriptProxy(this.testObj, “objName”, [“test”]);
})
}
}
}
// ResultPage.ets
import router from ‘@system.router’;
@Entry
@Component
struct ResultPage {
@State message: string = ‘Hello World’;
build() {
RelativeContainer() {
Text(this.message)
.id(‘ResultPageHelloWorld’)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.alignRules({
center: { anchor: ‘container’, align: VerticalAlign.Center },
middle: { anchor: ‘container’, align: HorizontalAlign.Center }
})
.onClick(() => {
// 测试原生成功返回
getContext(this).eventHub.emit(‘myEvent’);
router.back();
})
}
.height(‘100%’)
.width(‘100%’)
}
}
