HarmonyOS开发商城商品详情页

目录

一：功能概述

二：代码实现

三：效果图

一：功能概述

这一节，我们实现商品详情页的开发，具体流程就是在首页的商品列表点击商品跳转到商品详情页面，同时传递参数到该页面，通过参数调用商品详情接口在详情页展示商品的的详情信息。这里我们为了方便返回首页，在最顶部加入返回和回到首页按钮，这样快速返回首页或者上一个页面。下面我们具体看下代码实现。

1：主要功能组件：

webview: 实现商品详情html页面的显示；

router： 获取页面跳转的传递的参数，以及页面的回退等。

Navigation:路由导航组件，实现页面的跳转管理。

二：代码实现

1：头部返回和回到首页

build(){
    //   头部部分
    Row({ space: 5 }) {
      Image('image/back.png')
        .width(30)
        .onClick(() => {
          router.back()
        })

      Blank()

      Image('image/home.png')
        .width(30)
        .onClick(() => {