uni-app 做一个饮料成分 容量 含糖量的app

当然，以下是一个使用uni-app框架开发简单饮料信息展示应用的基础代码示例。这个示例将展示饮料的名称、成分、容量和含糖量。由于篇幅限制，这个示例将重点放在前端展示部分，假设后端数据已经准备好，并通过API接口提供。

首先，确保你已经安装了HBuilderX并创建了一个新的uni-app项目。

1. 修改pages/index/index.vue

<template>
  <view class="container">
    <view v-for="(drink, index) in drinks" :key="index" class="drink-item">
      <view class="drink-name">{{ drink.name }}</view>
      <view class="drink-info">
        <text>成分: {{ drink.ingredients.join(', ') }}</text>
        <text>容量: {{ drink.volume }} ml</text>
        <text>含糖量: {{ drink.sugarContent }} g</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      drinks: []
    };
  },
  onLoad() {
    this.fetchDrinks();
  },
  methods: {
    async fetchDrinks() {
      try {
        const response = await uni.request({
          url: 'https://your-api-endpoint.com/getDrinks', // 替换为你的API地址
          method: 'GET'
        });
        if (response.statusCode === 200) {
          this.drinks = response.data;
        } else {
          console.error('Failed to fetch drinks:', response);
        }
      } catch (error) {
        console.error('Error fetching drinks:', error);
      }
    }
  }
};
</script>

<style>
.container {
  padding: 20px;
}
.drink-item {
  margin-bottom: 20px;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 5px;
}
.drink-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
.drink-info text {
  display: block;
  margin-bottom: 5px;
}
</style>

2. 配置API地址

在manifest.json中配置合法域名（如果你的API不是在本地或uni-app的允许列表中），确保https://your-api-endpoint.com被添加到network配置中。

3. 运行项目

在HBuilderX中运行项目，选择小程序、H5或其他目标平台，查看效果。

这个示例展示了如何从API获取饮料信息，并在页面上展示每个饮料的名称、成分、容量和含糖量。你可以根据需要进一步扩展功能，比如添加搜索、排序、详情页等。记得根据实际的API响应结构调整数据绑定部分。