HarmonyOS 鸿蒙Next：Web组件中点击html页面内图片，如何在原生端获取图片下载链接或图片信息以用Image组件显示

发布于 1周前 作者 eggper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next：Web组件中点击html页面内图片，如何在原生端获取图片下载链接或图片信息以用Image组件显示

Web组件，点击html页面内图片，怎么在原生端获取到图片下载链接，或是图片信息，以供原生端用Image组件显示该图片

Harmonyos Next教程
2 回复

可以采用JSBridge的方式实现点击html，传值给原生端图片信息进行展示。 JSBridge可以参考文档Codelabs中ArkTS与H5的交互 参考链接：https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_NEXT-SelectContact

h5 调用 ArkTS

h5 js 适配方式

function testClick() {
  dsBridge.call('testClick', "hello", (responseData) => {
    document.getElementById("show").innerHTML = "repsonseData from java, data = " + responseData
  })
}
  1. ArkTS实现对应 testClick 方法
@JavaScriptInterface()
testClick(p: string, handler: CompleteHandler) {
  // p 为 h5 js 侧传递参数
  this.cHandler = handler
  this.cHandler.complete("it is arkts default response");
}

ArkTS调用 h5 方法

h5 注册 js 函数

dsBridge.registerAsyn('showAlertAsync', function (a, b, c, callback) {
  let counter = 0
  let id = setInterval(() => {
    if (counter < 5) {
      callback(counter, false)
      alert("原生调用JS showAlertAsync函数" + a + " " + b + " " + c + " " + counter)
      counter++
    } else {
      callback(counter, true)
      alert("原生调用JS showAlertAsync函数" + a + " " + b + " " + c + " " + counter)
      clearInterval(id)
    }
  }, 1000)
})

ArkTS侧调用

Button("调用js函数-异步")
  .margin({ top: 10 })
  .onClick(() => {
    this.controller.callJs("showAlertAsync", [1, 2, '666'], (v: string) => {
      this.message = v + ""
    })
  })

关键代码：jsBridge.ets

import { LogUtils } from '@hzw/ohos-dsbridge/src/main/ets/utils/LogUtils'
import { CompleteHandler, JavaScriptInterface } from '@hzw/ohos-dsbridge'
export class JsBridge{
  private cHandler: CompleteHandler | undefined = undefined
  /**
   * 同步
   * @param p
   * @returns
   */
  @JavaScriptInterface(false)
  testSync(p: string): string {
    LogUtils.d("testSync: " + JSON.stringify(p))
    return "hello native"
  }
  /**
   * 异步
   * @param p
   * @param handler
   */
  @JavaScriptInterface()
  testAsync(p: string, handler: CompleteHandler) {
    LogUtils.d("testAsync: " + JSON.stringify(p))
    this.cHandler = handler
  }
  @JavaScriptInterface()
  testClick(p: string, handler: CompleteHandler) {
    // p 为 h5 返回的数据
    this.cHandler = handler
    this.cHandler.complete("it is arkts default response");
  }
}

index.ets

 
import { JsBridge } from '../common/JsBridge';
import { WebViewControllerProxy } from '@hzw/ohos-dsbridge';
@Entry
@Component
export struct WebJsPage {
  @State message: string = "";
  private controller: WebViewControllerProxy = WebViewControllerProxy.createController();
  aboutToAppear(): void {
    this.controller.addJavascriptObject(new JsBridge())
  }
  build() {
    Column() {
      Text(this.message)
      Web({ src: $rawfile("demo.html"), controller: this.controller.getWebViewController() })
        .javaScriptAccess(true)
        .javaScriptProxy(this.controller.getJavaScriptProxy())
        .onAlert((event) => {
          return false
        })
        .width("100%")
        .height('50%')
      Button("调用js函数-异步")
        .margin({ top: 10 })
        .onClick(() => {
          this.controller.callJs("showAlertAsync", [1, 2, '666'], (v: string) => {
            this.message = v + ""
          })
        })
    }
    .width("100%")
    .height('100%')
  }
}

demo.html

<html>
<head>
  <meta content="text/html; charset=utf-8" http-equiv="content-type">
  <title>
  js调用java
  </title>
  <script src="./dsBridge.js" ></script>
  </head>
  <body>
  <p>
  <div id="show">1111</div>
  </p>
  <p>
  <xmp id="init">
  </xmp>
  </p>
  <p>
  <input type="text" id="text1" value="用户名(username)"/>
  </p>
  <p>
  <input type="text" id="text2" value="password"/>
  </p>
  <p>
  <input type="button" id="enter" value="发消息给Native" onclick="testClick()"/>
  />
  </p>
  <p>
  <input type="button" id="enter1" value="调用Native方法" onclick="testClick();"
  />
  </p>
  </body>
  <script>
  dsBridge.registerAsyn('showAlertAsync', function (a, b, c, callback) {
    let counter = 0
    let id = setInterval(() => {
      if (counter < 5) {
        callback(counter, false)
        alert("原生调用JS showAlertAsync函数" + a + " " + b + " " + c + " " + counter)
        counter++
      } else {
        callback(counter, true)
        alert("原生调用JS showAlertAsync函数" + a + " " + b + " " + c + " " + counter)
        clearInterval(id)
      }
    }, 1000)
  })
function testClick() {
  var str1 = document.getElementById("text1").value;
  var str2 = document.getElementById("text2").value;
  // js 调用原生获取信息，发送消息给原生，原生处理返回
  dsBridge.call('testClick', "hello", (responseData) => {
    document.getElementById("show").innerHTML = "repsonseData from java, data = " + responseData
  })
}
</script>
</html>

在HarmonyOS鸿蒙Next系统中，若想在Web组件中点击HTML页面内的图片后，在原生端获取图片下载链接或图片信息以便用Image组件显示，可以通过以下方式实现：

  1. 前端（Web组件）处理：

    • 在HTML页面中，为图片元素添加点击事件监听器。
    • 当图片被点击时，通过JavaScript获取图片的URL或相关信息。
    • 使用postMessage等方法将图片信息传递给原生端。

  2. 原生端处理：

    • 在原生端监听来自Web组件的消息。
    • 接收消息后，解析出图片URL或相关信息。
    • 将解析出的图片信息传递给Image组件。
    • Image组件根据接收到的信息加载并显示图片。

实现此功能的关键在于前端与原生端之间的通信。确保Web组件能够正确地将图片信息传递给原生端，并且原生端能够接收并处理这些信息。

需要注意的是，不同版本的HarmonyOS系统可能在API和功能上存在差异，因此在实际开发中，应参考对应版本的官方文档进行具体实现。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部