HarmonyOS鸿蒙Next中如何从h5页面跳转到应用市场的详情页

HarmonyOS鸿蒙Next中如何从h5页面跳转到应用市场的详情页【设备信息】Mate60Pro
【API版本】Api12
【DevEco Studio版本】5.0.5.315
【问题描述】如何从h5页面跳转到应用市场的详情页

参考demo :

//index.ets
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'
    }
    const context = getContext(this) as common.UIAbilityContext;
    context.startAbility(want).then(() => {
      console.log('jumpAgcDetailPage 拉起成功 农行APP的下载页面');
    }).catch(() => {
      console.log('jumpAgcDetailPage 拉起失败');
    })
  }
}

@Entry
@Component
struct WebPage {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State naviApp: NaviAppStore = new NaviAppStore()

  build() {
    Row() {
      Column() {
        Web({ src: $rawfile("index.html"), controller: this.controller })
          .javaScriptProxy({
            object: this.naviApp,
            name: "naviApp",
            methodList: ["jumpAgcDetailPage"],
            controller: this.controller
          })
      }.width('100%')
    }.height('100%')
  }
}

//index.html
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="callArkTS()">Click Me!</button>

<script>
function callArkTS() { 
  let str = naviApp.jumpAgcDetailPage(); 
} 
</script>
</body>
</html>

更多关于HarmonyOS鸿蒙Next中如何从h5页面跳转到应用市场的详情页的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

yibo5220 2楼•13 天前

在HarmonyOS鸿蒙Next中，从H5页面跳转到应用市场的详情页可以通过使用ohos.web.webview模块中的WebMessagePort或WebController来实现。具体步骤如下：

配置WebView：在你的应用中嵌入WebView组件，并加载H5页面。
JavaScript与原生代码通信：在H5页面中，通过JavaScript与原生代码进行通信。可以使用WebMessagePort或WebController来发送消息。
处理跳转逻辑：在原生代码中接收来自H5页面的消息，并解析出需要跳转的应用包名或应用市场的URL。
启动应用市场：使用ohos.app.ability模块中的AbilityContext或Context的startAbility方法来启动应用市场的详情页。可以通过Intent指定应用市场的action和uri参数。

示例代码如下：

import webview from '@ohos.web.webview';
import ability from '@ohos.app.ability.UIAbility';

export default class MainAbility extends ability {
    onCreate(want, launchParam) {
        let webView = new webview.WebView();
        webView.loadUrl('https://your-h5-page-url');
        webView.onMessage((event) => {
            if (event.data === 'gotoAppMarket') {
                let intent = {
                    action: 'ohos.intent.action.VIEW',
                    uri: 'market://details?id=com.example.app'
                };
                this.context.startAbility(intent);
            }
        });
    }
}

在H5页面中，可以通过postMessage方法发送消息：

<button onclick="gotoAppMarket()">跳转到应用市场</button>
<script>
function gotoAppMarket() {
    window.webkit.messageHandlers.yourHandler.postMessage('gotoAppMarket');
}
</script>

通过这种方式，可以在HarmonyOS鸿蒙Next中实现从H5页面跳转到应用市场的详情页。

bupafengyu 3楼•13 天前

在HarmonyOS鸿蒙Next中，要从H5页面跳转到应用市场的详情页，可以使用Intent来实现。首先，确保页面中引入了@ohos.router模块。然后，使用router.push方法，通过指定uri参数为应用市场的详情页URL来实现跳转。例如：

import router from '@ohos.router';
router.push({
  uri: 'market://details?id=com.example.app'
});

其中，market://details?id=com.example.app是应用市场详情页的URL，com.example.app为应用包名。确保设备上已安装应用市场并支持此URL协议。