HarmonyOS 鸿蒙Next h5点击跳转至华为应用市场app应用内详情

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

HarmonyOS 鸿蒙Next h5点击跳转至华为应用市场app应用内详情

h5 网页 希望点击按钮直接跳转至应用市场某个应用详情内

Harmonyos Next教程
2 回复
可以看下此demo：
也可以参考下论坛中的回答：https://developer.huawei.com/consumer/cn/forum/topic/0203157391541717201?fid=0109140870620153026
参考文档：https://developer.huawei.com/consumer/cn/doc/best-practices-V5/web-app-jump-and-pull-up-V5 
import web_webview from '@ohos.web.webview';
import { common, Want } from '@kit.AbilityKit';
class NaviAppStore {
  constructor() {
  }
  jumpAgcDetailPage() {
    const want: Want = {
      uri: `store://appgallery.huawei.com/app/detail?id=appid` //跳转拉起应用市场APP首页
    }
    const context = getContext(this) as common.UIAbilityContext;
    context.startAbility(want).then(() => {
      console.log('jumpAgcDetailPage 拉起成功 农行APP的下载页面');
    }).catch(() => {
      console.log('jumpAgcDetailPage 拉起失败');
    })
  }
}
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index{
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  [@State](/user/State) naviApp: NaviAppStore = new NaviAppStore()
  build() {
    Row() {
      Column() {
        Web({ src: $rawfile("go_to_agc_unipay.html"), controller: this.controller })
          .javaScriptProxy({
            object: this.naviApp,
            name: "naviApp",
            methodList: ["jumpAgcDetailPage"],
            controller: this.controller
          })
      }.width('100%')
    }.height('100%')
  }
}
go_to_agc_unipay.html:
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="callArkTS()">Click Me!</button>
<p id="demo"></p>
<script> function callArkTS() { let str = naviApp.jumpAgcDetailPage(); } </script>
</body>
</html>
 

在HarmonyOS鸿蒙Next中，若要从H5页面跳转至华为应用市场内的应用详情页，你可以使用以下方式：

  1. 使用URI Scheme：

    H5页面可以通过JavaScript调用一个特定的URI Scheme来触发跳转。例如，可以构造一个包含应用ID的URI，如store://appgallery.huawei.com/app/detail?id=YOUR_APP_ID。然后，通过H5页面的按钮或其他交互元素触发这个URI的调用。

  2. ArkTS与H5交互：

    在ArkTS中定义一个跳转函数，然后在H5页面中通过JavaScript Proxy调用这个函数。具体实现时，需要先在ArkTS中设置WebView的JavaScript Proxy，然后在H5页面中调用对应的函数并传入应用ID。

  3. 确保应用已上架：

    上述方法仅适用于已在华为应用市场上架的应用。如果应用未上架，则无法直接跳转到对应的详情页。

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

回到顶部