uni-app 基本外卖模板

针对uni-app开发一个基本的外卖模板，你可以从页面结构、数据绑定、列表渲染、以及简单的用户交互等几个方面来构建。以下是一个简单的示例代码，展示了如何创建一个基本的外卖应用模板。

1. 项目结构

uni-app-food-delivery/
│
├── pages/
│   ├── index/
│   │   ├── index.vue
│   │   └── index.json
│   ├── food-list/
│       ├── food-list.vue
│       └── food-list.json
│
├── static/
│   └── images/
│       └── example.png
│
├── App.vue
├── main.js
├── manifest.json
└── pages.json

2. App.vue

<template>
  <App />
</template>

<script>
import App from './App'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()
</script>

<style>
/* Global styles */
</style>

3. pages/index/index.vue

<template>
  <view>
    <navigator url="/pages/food-list/food-list">进入菜品列表</navigator>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

<style scoped>
/* Index page styles */
</style>

4. pages/food-list/food-list.vue

<template>
  <view>
    <block v-for="(food, index) in foods" :key="index">
      <view class="food-item">
        <image :src="food.image" mode="aspectFill"></image>
        <text>{{ food.name }}</text>
        <text>{{ food.price }}元</text>
      </view>
    </block>
  </view>
</template>

<script>
export default {
  data() {
    return {
      foods: [
        { name: '汉堡', price: 20, image: '/static/images/example.png' },
        { name: '薯条', price: 10, image: '/static/images/example.png' },
        // 更多菜品...
      ]
    }
  }
}
</script>

<style scoped>
.food-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
image {
  width: 100px;
  height: 100px;
}
</style>

5. 配置文件

pages.json、manifest.json 和 main.js 文件中进行相关配置，确保页面路径和全局样式正确设置。

以上代码提供了一个基本的外卖应用模板，包含了一个首页和一个菜品列表页。你可以在此基础上继续扩展功能，如添加购物车、用户登录、支付等功能。