uniapp制作小程序三个页面的源码

以下是一个简单的 Uniapp 小程序项目中的三个页面的源码示例：

1. 首页（index.vue）

<template>
  <view class="container">
    <text class="title">欢迎来到我的小程序</text>
    <view class="button" @tap="goToList">
      <text>进入列表页</text>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    goToList() {
      uni.navigateTo({
        url: '/pages/list/list'
      })
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.title {
  font-size: 24px;
  margin-bottom: 20px;
}

.button {
  background-color: #007AFF;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 50px;
  border-radius: 25px;
}
</style>

2. 列表页（list.vue）

<template>
  <view class="container">
    <text class="title">商品列表</text>
    <view class="list-item" v-for="(item, index) in list" :key="index" @tap="goToDetail(item.id)">
      <text class="item-title">{{ item.title }}</text>
      <text class="item-price">{{ item.price }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, title: '商品1', price: '100元' },
        { id: 2, title: '商品2', price: '200元' },
        { id: 3, title: '商品3', price: '300元' },
        { id: 4, title: '商品4', price: '400元' },
        { id: 5, title: '商品5', price: '500元' },
      ]
    }
  },
  methods: {
    goToDetail(id) {
      uni.navigateTo({
        url: '/pages/detail/detail?id=' + id
      })
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
}

.title {
  font-size: 24px;
  margin-bottom: 20px;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.item-title {
  font-size: 18px;
}

.item-price {
  color: #f00;
}
</style>

3. 详情页（detail.vue）

<template>
  <view class="container">
    <text class="title">{{ detail.title }}</text>
    <text class="price">{{ detail.price }}</text>
    <text class="desc">{{ detail.desc }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      detail: {}
    }
  },
  onLoad(options) {
    const id = options.id
    // 根据id获取详情数据
    this.detail = {
      id: id,
      title: '商品' + id,
      price: id * 100 + '元',
      desc: '这是商品' + id + '的详细介绍。'
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
}

.title {
  font-size: 24px;
  margin-bottom: 20px;
}

.price {
  color: #f00;
  font-size: 20px;
  margin-bottom: 10px;
}

.desc {
  font-size: 16px;
  line-height: 1.5;
}
</style>

以上代码仅供参考，实际项目中的页面代码会根据具体需求有所不同。