HarmonyOS 原生能用JS开发控件并使用吗

目前能使用JS或者TS开发控件并使用吗？

例如有个进度条控件，目前原生只支持两种颜色，但是H5有比较好用的此类控件，能使用H5的控件来实现吗？

HarmonyOS

fox280

2024-12-25 14:50:11

浏览

回答 1

待解决

回答 1

按赞同

按时间

aquaa

使用webview去加载对应的控件，请参考以下demo：

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-in-app-frontend-page-function-invoking-V5

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

@Entry
@Component
struct WebComponent {
  webviewController: webview.WebviewController = new webview.WebviewController();

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

  build() {
    Column() {
      Button('runJavaScript')
        .onClick(() => {
          // 前端页面函数无参时，将param删除。
          this.webviewController.runJavaScript('move()');
        })
      Web({ src: $rawfile('Slider.html'), controller: this.webviewController })
    }
  }
}


//h5部分
<!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>Progress Bar</title>
  <style>
#myProgress {
  width: 100%;
  background-color: #ddd;
}
#myBar {
  width: 0%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
  transition: width 0.5s;
}
</style>
  </head>
  <body>

  <h1>JavaScript Progress Bar</h1>

  <div id="myProgress">
  <div id="myBar"></div>
  </div>

  <button onclick="move()">Click</button>

  <script>
  function move() {
    var elem = document.getElementById("myBar");
    var width = 0;
    var id = setInterval(frame, 10);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
      } else {
        width++;
        elem.style.width = width + '%';
      }
    }
  }
  </script>

  </body>
  </html>