HarmonyOS相关

鸿蒙 ~web组件 runJavaScript()、javaSc

2023-12-18  本文已影响0人  胡修波

一、应用侧调用前端页面函数 使用 runJavaScript()

二、前端页面调用应用侧函数

注册应用侧代码有两种方式，

三、代码 : ets 代码(已编译通过，可运行)


import web_webview from '@ohos.web.webview';

const TAG = "huxiubo"

@Entry
@Component
struct Mainindex {
  @State count : number = 0;
  // 定义Web组件的控制器controller
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();

  // js中回调 etc 方法
  contentCall = {
    callbackOne : () =>{
      this.count+=1;
      console.log(TAG, 'callbackOne success')
    },
    callbackTwo : () =>{
      this.count-=1;
      console.log(TAG, 'callbackTwo success')
    }
  }

  build() {
    Column({space:12}) {
      Text(`js修改ets属性text: ${this.count}`)
        .fontSize(25)

      Button('ets调用js方法改变text值+1')
        .fontSize(25)
        .onClick(()=>{
          //调用js方法
          this.webviewController.runJavaScript("change_text_add()")
        })

      Button('ets调用js方法改变text值-1')
        .fontSize(25)
        .onClick(()=>{
          //调用js方法
          this.webviewController.runJavaScript("change_text_reduce()")
        })

      Button('ets调用js方法改变web显示')
        .fontSize(25)
        .onClick(()=>{
          this.webviewController.runJavaScript("change_html_context('"+this.count+"')")
        })

      Web({ src: $rawfile('index.html'), controller: this.webviewController })
        .fileAccess(true)
        .javaScriptAccess(true)
        .zoomAccess(true)
        .imageAccess(true)
        .height(500)
        .padding(20)
          //注入JavaScript对象到window对象中，并在window对象中调用该对象的方法
        .javaScriptProxy({
          object : this.contentCall,
          name : "callBackToApp",
          methodList : ["callbackOne","callbackTwo"],
          controller : this.webviewController
        })
    }
  }
}

HTML 代码, 需要把index.html 放入对应模块 resources->rawfile 目录中

<!DOCTYPE html>
<html>
<body>
Hello world!
<div id="indexjs" contenteditable="true"></div>
<script>

    var INDEX = {};

    INDEX.editor = document.getElementById('indexjs'); //获取html中元素

    INDEX.setHtml = function(contents) {
        INDEX.editor.innerHTML = contents; //给id=“indexjs”的div元素赋值
    }

    function change_html_context(contents) {
        INDEX.setHtml(contents);
    }

    //ets调用js方法，间接回调ets的方法
    function change_text_add() {
        console.log('change_text_add start');
        var str = callBackToApp.callbackOne(); //js调用ets方法，实现ets访问
        console.log('change_text_add end');
    }

    //ets调用js方法，间接回调ets的方法
    function change_text_reduce() {
        console.log('change_text_reduce start');
        var str = callBackToApp.callbackTwo(); //js调用ets方法，实现ets访问
        console.log('change_text_reduce end');
    }
</script>
</body>
</html>

四 官网 例子

ets

import web_webview from '@ohos.web.webview';

const TAG = "huxiubo"
class testClass {
  constructor() {
  }

  test(): string {
    console.info(TAG, `hxuibuo`);
    return 'ArkTS Hello World!';
  }
}

@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  // 声明需要注册的对象
  @State testObj: testClass = new testClass();

  build() {
    Column({space: 20}) {
      Button("huxiubo")
      // web组件加载本地index.html页面
      Web({ src: $rawfile('index.html'), controller: this.webviewController})
        // 将对象注入到web端
        .javaScriptProxy({
          object: this.testObj,
          name: "testObjName",
          methodList: ["test"],
          controller: this.webviewController
        })
    }
  }
}

html

<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="callArkTS()">Click Me!</button>
<p id="demo"></p>
<script>
    function callArkTS() {
        let str = testObjName.test();
        document.getElementById("demo").innerHTML = str;
        console.info('ArkTS Hello World! :' + str);
    }
</script>
</body>
</html>

注意：其中 ets 中 name: "testObjName", 需要和 HTML 中 let str = testObjName.test(); 一致，
官网上不一致

五 注意点

本地模拟上HTML button 不能点击，需要真实手机、远程模拟器、远程真机测试

上一篇下一篇

猜你喜欢

热点阅读