uni-app 2000 做一个活动抽奖小程序

当然，针对您提到的使用uni-app开发一个活动抽奖小程序的需求，这里提供一个简单的示例代码框架，以帮助您快速上手。这个示例将涵盖基本的抽奖逻辑和页面展示。

1. 项目结构

首先，确保您的uni-app项目已经创建。项目的基本结构如下：

/pages
  /draw
    draw.vue  -- 抽奖页面
/static
  -- images, styles, etc.
App.vue
main.js
manifest.json
pages.json

2. 配置页面

在pages.json中添加抽奖页面的路径：

{
  "pages": [
    {
      "path": "pages/draw/draw",
      "style": {
        "navigationBarTitleText": "抽奖活动"
      }
    }
  ]
}

3. 抽奖页面（draw.vue）

在pages/draw/draw.vue中编写抽奖逻辑和页面展示：

<template>
  <view class="container">
    <button @click="startDraw">开始抽奖</button>
    <view v-if="prize">恭喜您抽中：{{ prize }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      prizes: ['一等奖', '二等奖', '三等奖', '谢谢参与'],
      prize: null
    };
  },
  methods: {
    startDraw() {
      const randomIndex = Math.floor(Math.random() * this.prizes.length);
      this.prize = this.prizes[randomIndex];
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 16px;
}
</style>

4. 运行项目

确保您的开发环境已经安装好HBuilderX或其他支持uni-app的开发工具，然后运行项目：

# 如果使用HBuilderX，直接点击运行按钮即可

5. 说明

• 抽奖逻辑：在startDraw方法中，通过Math.random()生成一个随机数，并根据奖品数组的长度确定抽中的奖品。
• 页面展示：点击“开始抽奖”按钮后，页面会显示抽中的奖品，如果未抽中则显示“谢谢参与”。

这个示例提供了一个基础的抽奖功能，您可以根据实际需求进一步扩展，比如添加用户登录、奖品库存检查、抽奖次数限制等功能。希望这个示例对您有所帮助！