返回

亲测：无接触 抽奖小程序开发

前端







哈喽，大家好，今天来分享一个小程序的开发过程，基于小程序+后端，当然可以只用小程序完成，但是本人偏爱后端。

## 项目背景

首先先讲讲项目背景。

疫情期间，为了避免聚集，减少接触，很多公司、机构、商场、门店等地方都开始采用小程序进行抽奖。

## 项目需求

那么项目需求就是开发一个小程序，用户扫码进入小程序即可进行抽奖。

## 技术选型

为了满足项目需求，我们选择了以下技术栈：

* 小程序：uni-app
* 后端：Node.js（Express框架）
* 数据库：MongoDB

## 项目搭建

### 1. 小程序端

首先，我们使用uni-app搭建小程序端。

```bash
# 安装uni-app CLI
npm install -g @dcloudio/uni-cli

# 创建项目
uni-app create my-lottery-app

2. 后端

然后，我们使用Node.js搭建后端。

# 安装Node.js和Express框架
npm install nodejs express

# 创建项目
mkdir my-lottery-app-backend
cd my-lottery-app-backend

# 初始化项目
npm init -y

# 安装依赖
npm install express body-parser mongoose

# 创建index.js文件

3. 数据库

最后，我们使用MongoDB作为数据库。

# 安装MongoDB
brew install mongodb-community

# 启动MongoDB
mongod

项目开发

1. 小程序端

1.1 页面设计

首先，我们需要设计小程序的页面。

<!-- index.vue -->
<template>
  <view class="container">
    <view class="title">抽奖小程序</view>
    <view class="button-container">
      <button @click="startLottery">开始抽奖</button>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    startLottery() {
      // 调用后端接口
      uni.request({
        url: 'http://localhost:3000/lottery',
        method: 'POST',
        success: (res) => {
          // 获取抽奖结果
          const result = res.data.result;

          // 显示抽奖结果
          uni.showToast({
            title: result,
            icon: 'success'
          });
        }
      });
    }
  }
}
</script>

1.2 调用后端接口

然后，我们需要调用后端接口。

// index.js
const express = require('express');
const bodyParser = require('body-parser');

const app = express();

app.use(bodyParser.json());

app.post('/lottery', (req, res) => {
  // 获取奖品列表
  const prizes = ['一等奖', '二等奖', '三等奖', '四等奖', '五等奖'];

  // 随机抽取一个奖品
  const result = prizes[Math.floor(Math.random() * prizes.length)];

  // 返回抽奖结果
  res.json({
    result: result
  });
});

app.listen(3000);

2. 后端

2.1 数据库设计

首先，我们需要设计数据库。

{
  "prizes": [
    {
      "name": "一等奖",
      "description": "iPhone 13 Pro Max"
    },
    {
      "name": "二等奖",
      "description": "iPad Air 5"
    },
    {
      "name": "三等奖",
      "description": "Apple Watch Series 7"
    },
    {
      "name": "四等奖",
      "description": "AirPods Pro"
    },
    {
      "name": "五等奖",
      "description": "Starbucks咖啡券"
    }
  ]
}

2.2 查询奖品列表

然后，我们需要查询奖品列表。

// index.js
const mongoose = require('mongoose');

// 连接数据库
mongoose.connect('mongodb://localhost:27017/lottery', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

// 定义奖品模型
const Prize = mongoose.model('Prize', {
  name: String,
  description: String
});

// 查询奖品列表
const getPrizes = async () => {
  const prizes = await Prize.find();

  return prizes;
};

2.3 抽取奖品

最后，我们需要抽取奖品。

// index.js
const getPrize = async () => {
  // 获取奖品列表
  const prizes = await getPrizes();

  // 随机抽取一个奖品
  const result = prizes[Math.floor(Math.random() * prizes.length)];

  return result;
};

项目测试

最后，我们需要测试项目。

# 启动小程序
uni-app serve

# 打开小程序
uni-app preview

项目总结

以上就是如何两步完成一个抽奖小程序的教程。希望对大家有所帮助。

项目源码

项目源码已经上传至GitHub：

https://github.com/your-username/my-lottery-app

项目演示

项目演示地址：

https://your-website.com/my-lottery-app

后记

这只是我临时兴起的一个小项目，如果你觉得还不错，不妨给个赞鼓励下，您的鼓励是我前进的动力。

最后奉上源码。