1. 页面布局和网络请求（展示产品信息）

在这个页面中，我们会从网络获取产品数据，并使用 List 组件展示产品信息。

product_list_page.ets

import ui;
import @ohos.net.http;
import ohos.agp.components.List;
import ohos.agp.components.Text;
import ohos.agp.components.Image;
import ohos.agp.utils.Uri;

@Entry
@Component
class ProductListPage extends Page {

    productList: Array<Product> = [];

    // 产品数据模型
    class Product {
        id: string;
        image: string;
        title: string;
        price: string;
    }

    // 发起网络请求，获取产品列表数据
    fetchProducts() {
        const url = "https://api.example.com/products";  // 替换为你的实际 API 地址

        http.get(url, (error, response) => {
            if (error) {
                console.log("请求失败: " + error);
                return;
            }

            if (response && response.body) {
                // 假设返回的是一个包含产品信息的 JSON 数组
                const products: Array<Product> = JSON.parse(response.body);
                this.updateProductList(products);
            }
        });
    }

    // 更新产品列表数据
    updateProductList(products: Array<Product>) {
        this.productList = products;
        this.update();  // 刷新页面显示更新后的数据
    }

    // 页面构建
    build() {
        Column {
            List {
                id: product_list
                width: "match_parent"
                height: "match_parent"
                itemProvider: productList

                itemContent {
                    Row {
                        Image {
                            id: product_image
                            width: "100px"
                            height: "100px"
                            src: Uri.parse("https://example.com/default_image.jpg")  // 默认图片，后续动态加载
                        }
                        Column {
                            Text {
                                id: product_title
                                text: "Product Title"
                                fontSize: 16
                                marginTop: "10px"
                            }
                            Text {
                                id: product_price
                                text: "Price: $0"
                                fontSize: 14
                            }
                        }
                    }
                }
            }
        }

        this.fetchProducts();  // 发起网络请求，加载产品数据
    }
}

代码说明

1. 产品数据模型 (Product)：

   • 定义了一个 Product 类来表示每个产品的基本信息：id（产品 ID）、image（产品图片 URL）、title（产品标题）、price（产品价格）。

2. 网络请求：

   • 使用 http.get 方法向服务器发起 GET 请求，获取产品数据。返回的数据是一个 JSON 数组，包含了多个产品的信息。
   • 请求成功后，将响应的 body 解析为 JSON 格式，并更新产品列表（productList）。

3. 页面展示：

   • 页面上使用 List 组件展示所有产品。在 List 的每一项中，展示产品的图片、标题和价格。
   • 默认的图片地址是 https://example.com/default_image.jpg，在实际应用中，你可以动态更新这个 URL，确保每个产品的图片正确显示。

4. 刷新页面：

   • 当请求完成并更新了 productList 后，调用 this.update() 来刷新页面，显示最新的产品数据。

2. 网络请求成功后的数据展示

• 当数据从网络成功获取后，会通过 this.updateProductList 方法更新 productList，并刷新页面展示。
• 每个产品的图片、标题和价格信息会动态绑定到 List 组件中的相应位置。

3. 注意事项

1. 网络请求的权限：

   • 确保你的应用已在 config.json 或 index.json 中配置了相关的网络权限，例如访问网络权限。

2. 错误处理：

   • 在实际开发中，你需要处理可能发生的网络错误（如网络连接失败、超时等）。当前代码中已经简单地输出了错误信息。

3. API 地址：

   • 需要根据你的实际后端 API 地址来替换 https://api.example.com/products，确保网络请求能够成功发送到你的服务器并获取数据。

4. 配置入口文件（index.json）

确保在 index.json 中配置入口和页面路径。

index.json

{
  "module": "com.example",
  "name": "ProductListPage",
  "type": "Ability",
  "target": "ets"
}

总结

这个代码示例展示了如何在鸿蒙（HarmonyOS）应用中通过 @ohos.net.http 发起网络请求，获取产品数据并展示。你可以根据实际的需求和 API 返回的数据格式进行调整，确保数据能够正确地显示在页面中。