HarmonyOS NEXT鸿蒙开发入门，ArkWeb调用前端页面js函数

移动开发 2024-11-01 16:32:59 阅读次数: 0

文章目录

1. 前言导读

在上集中，我们学习了ArkWeb的基础使用，这集我们来学习如何跟前端js交互

2. 如何调用前端页面函数

应用侧可以通过runJavaScript()方法调用前端页面的JavaScript相关函数。

runJavaScript(script: string): Promise; 或
runJavaScript(script: string, callback : AsyncCallback): void

异步执行JavaScript脚本，并通过回调方式返回脚本执行的结果。runJavaScript需要在loadUrl完成后，比如onPageEnd中调用。

参数：

参数名	类型	必填	说明
script	string	是	JavaScript脚本。
callback	AsyncCallback	是	回调执行JavaScript脚本结果。JavaScript脚本若执行失败或无返回值时，返回null。

准备好前端页面index2.html

<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<button type="button" style="font-size:80px" onclick="callArkTS()">点我试试看</button>
<h1 id="text" style="font-size:50px">这是一个测试信息，默认字体为黑色，调用runJavaScript方法后字体为绿色，调用changeColor方法后字体为红色</h1>
<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';
    }
    // 点我试试看！触发前端页面callArkTS()函数执行JavaScript传递的代码块。
    function callArkTS() {
      
      
        changeColor();
    }
</script>
</body>
</html>

将index2.html放在项目下的rawfile文件夹下
写一个按钮点击事件,通过runJavaScript调用前端js函数

      Button('鸿蒙调用Js方法')
        .onClick(() => {
    
    
          // 前端页面函数无参时，将param删除。
          this.controller.runJavaScript('htmlTest(param)');
        })

通过runJavaScript也可以传递js代码块片段

      Button('鸿蒙调用js, 传递js代码块,修改颜色字体')
        .onClick(() => {
    
    
          // 传递runJavaScript侧代码方法。
          this.controller.runJavaScript(`function changeColor(){
    
    document.getElementById('text').style.color = 'red'}`);
        })

3. 具体代码实现过程

// xxx.ets
import {
    
     webview } from '@kit.ArkWeb';
import {
    
     router } from '@kit.ArkUI';

@Entry
@Component
struct Index {
    
    
  controller: webview.WebviewController = new webview.WebviewController();

  aboutToAppear() {
    
    
    // 配置Web开启调试模式
    webview.WebviewController.setWebDebuggingAccess(true);
  }

  build() {
    
    
    Column({
    
    space:30}) {
    
    


      Button('鸿蒙调用Js方法,修改颜色字体')
        .onClick(() => {
    
    
          // 前端页面函数无参时，将param删除。
          this.controller.runJavaScript('htmlTest(param)');
        })
      Button('鸿蒙调用js, 传递js代码块,修改颜色字体')
        .onClick(() => {
    
    
          // 传递runJavaScript侧代码方法。
          this.controller.runJavaScript(`function changeColor(){
    
    document.getElementById('text').style.color = 'red'}`);
        })


      Web({
    
     src: $rawfile('index2.html'), controller: this.controller })
    }
    .margin(30)
  }
}