使用微信小程序开发制作一个简易的在线投票应用

以下是一个使用微信小程序开发的简易在线投票应用的代码案例。该应用允许用户创建投票活动，分享给其他用户进行投票，并实时统计投票结果。

首先，我们需要创建一个新的微信小程序项目，并在小程序后台配置合法域名。然后就可以开始编写代码了。

1. 创建一个新的页面

在小程序项目的pages文件夹下新建一个vote文件夹，并在vote文件夹下创建三个文件：index.js、index.wxml、index.wxss。接下来，我们将在这三个文件中编写代码。

index.js：

Page({
  data: {
    voteTitle: '',
    options: []
  },

  onLoad: function () {
    wx.setNavigationBarTitle({
      title: '创建投票'
    })
  },

  bindTitleInput: function (e) {
    this.setData({
      voteTitle: e.detail.value
    })
  },

  bindOptionInput: function (e) {
    var options = this.data.options;
    options[e.target.dataset.index] = e.detail.value;
    this.setData({
      options: options
    })
  },

  addOption: function () {
    var options = this.data.options;
    options.push('');
    this.setData({
      options: options
    })
  },

  removeOption: function (e) {
    var options = this.data.options;
    var index = e.target.dataset.index;
    options.splice(index, 1);
    this.setData({
      options: options
    })
  },

  createVote: function () {
    // 将投票信息存储到云数据库中
    const db = wx.cloud.database();
    db.collection('votes').add({
      data: {
        title: this.data.voteTitle,
        options: this.data.options,
        votes: []
      },
      success: function (res) {
        // 跳转到投票详情页面
        wx.navigateTo({
          url: '/pages/vote/detail?id=' + res._id
        })
      }
    })
  }
})

index.wxml：

<view class="container">
  <view class="title-container">
    <text>投票标题：</text>
    <input class="input" bindinput="bindTitleInput" />
  </view>
  
  <view>
    <view class="option-container" wx:for="{{options}}" wx:for-index="index">
      <text>选项{{index+1}}：</text>
      <input class="input" bindinput="bindOptionInput" data-index="{{index}}" />
      <text class="delete" bindtap="removeOption" data-index="{{index}}">删除</text>
    </view>
    <view class="option-container">
      <text class="add" bindtap="addOption">新增选项</text>
    </view>
  </view>
  
  <button class="create-btn" bindtap="createVote">创建投票</button>
</view>

index.wxss：

.container {
  margin: 20px;
}

.title-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.input {
  flex-grow: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-left: 10px;
}

.option-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.delete {
  color: red;
  margin-left: 10px;
}

.add {
  color: #007aff;
  margin-left: 10px;
}

.create-btn {
  width: 100%;
  height: 40px;
  background-color: #007aff;
  border: none;
  color: #fff;
  font-size: 16px;
  border-radius: 4px;
  margin-top: 20px;
}

1. 创建投票详情页面

在vote文件夹下再创建一个detail文件夹，并在detail文件夹下创建三个文件：index.js、index.wxml、index.wxss。

index.js：

Page({
  data: {
    vote: null,
    optionIndex: null
  },

  onLoad: function (options) {
    var that = this;
    var db = wx.cloud.database();
    db.collection('votes').doc(options.id).get({
      success: function (res) {
        that.setData({
          vote: res.data
        })
      }
    })
  },

  selectOption: function (e) {
    this.setData({
      optionIndex: e.target.dataset.index
    })
  },

  submitVote: function () {
    var that = this;
    var optionIndex = this.data.optionIndex;
    var vote = this.data.vote;

    // 更新投票记录
    var db = wx.cloud.database();
    db.collection('votes').doc(vote._id).update({
      data: {
        votes: db.command.push(optionIndex)
      },
      success: function (res) {
        // 跳转到投票结果页面
        wx.redirectTo({
          url: '/pages/vote/result?id=' + vote._id
        })
      }
    })
  }
})

index.wxml：

<view class="container">
  <view class="title-container">
    <text class="title">{{vote.title}}</text>
  </view>

  <view class="options-container">
    <view class="option" wx:for="{{vote.options}}" wx:for-index="index" bindtap="selectOption" data-index="{{index}}">
      <text class="option-title">{{index+1}}. {{item}}</text>
      <image class="tick" src="/images/tick.png" wx:if="{{optionIndex == index}}"></image>
    </view>
  </view>

  <button class="submit-btn" wx:if="{{optionIndex != null}}" bindtap="submitVote">提交</button>
</view>

index.wxss：

.container {
  margin: 20px;
}

.title-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
}

.options-container {
  margin-top: 30px;
}

.option {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.option-title {
  flex-grow: 1;
}

.tick {
  width: 20px;
  height: 20px;
  margin-left: 10px;
}

.submit-btn {
  width: 100%;
  height: 40px;
  background-color: #007aff;
  border: none;
  color: #fff;
  font-size: 16px;
  border-radius: 4px;
  margin-top: 20px;
}

1. 创建投票结果页面

在vote文件夹下再创建一个result文件夹，并在result文件夹下创建三个文件：index.js、index.wxml、index.wxss。

index.js：

Page({
  data: {
    vote: null,
    totalVotes: null
  },

  onLoad: function (options) {
    var that = this;
    var db = wx.cloud.database();
    db.collection('votes').doc(options.id).get({
      success: function (res) {
        var vote = res.data;
        var totalVotes = vote.votes.length;
        var optionVotes = {};
        
        for (var i = 0; i < vote.votes.length; i++) {
          var optionIndex = vote.votes[i];
          if (optionVotes[optionIndex] === undefined) {
            optionVotes[optionIndex] = 1;
          } else {
            optionVotes[optionIndex]++;
          }
        }

        that.setData({
          vote: vote,
          totalVotes: totalVotes,
          optionVotes: optionVotes
        })
      }
    })
  }
})

index.wxml：

<view class="container">
  <view class="title-container">
    <text class="title">{{vote.title}}</text>
  </view>

  <view class="options-container">
    <view class="option" wx:for="{{vote.options}}" wx:for-index="index">
      <text class="option-title">{{index+1}}. {{item}}</text>
      <text class="option-votes">{{optionVotes[index] || 0}} 票</text>
    </view>
  </view>

  <view class="total-votes">总投票数：{{totalVotes}} 票</view>
</view>

index.wxss：

.container {
  margin: 20px;
}

.title-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
}

.options-container {
  margin-top: 30px;
}

.option {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.option-title {
  flex-grow: 1;
}

.option-votes {
  color: #007aff;
  font-size: 16px;
}

.total-votes {
  margin-top: 20px;
}

以上就是一个简易的在线投票应