使用微信小程序开发制作一个简易的在线问卷调查应用

以下是一个基于微信小程序的简易在线问卷调查应用的代码案例。本文涵盖了用户登录、创建问卷、发布问卷、填写问卷、查看问卷结果等功能的实现。代码示例如下：

1. 创建微信小程序项目

在微信开发者工具中创建一个新的微信小程序项目，并填写相应的项目信息。

1. 创建页面

2.1 创建登录页面

在项目的pages目录下创建一个名为login的文件夹，并在该文件夹下创建一个名为login的页面文件。页面文件的目录结构如下：

- pages
  - login
    - login.js
    - login.wxml
    - login.wxss

login.js：

Page({
  data: {
    username: '',
    password: ''
  },
  onUsernameInput: function(event) {
    this.setData({
      username: event.detail.value
    });
  },
  onPasswordInput: function(event) {
    this.setData({
      password: event.detail.value
    });
  },
  login: function() {
    // 检查用户名和密码是否为空
    if (this.data.username.trim() === '' || this.data.password.trim() === '') {
      wx.showToast({
        title: '用户名和密码不能为空',
        icon: 'none'
      });
      return;
    }
    
    // 发送登录请求
    wx.request({
      url: 'http://example.com/login',
      method: 'POST',
      data: {
        username: this.data.username,
        password: this.data.password
      },
      success: function(res) {
        // 登录成功，保存登录状态
        wx.setStorageSync('token', res.data.token);
        
        // 跳转到首页
        wx.switchTab({
          url: '/pages/index/index'
        });
      },
      fail: function() {
        wx.showToast({
          title: '登录失败',
          icon: 'none'
        });
      }
    });
  }
});

login.wxml：

<view class="container">
  <input bindinput="onUsernameInput" type="text" placeholder="请输入用户名"></input>
  <input bindinput="onPasswordInput" type="password" placeholder="请输入密码"></input>
  <button bindtap="login">登录</button>
</view>

login.wxss：

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

input {
  width: 80%;
  height: 40rpx;
  margin-bottom: 20rpx;
  padding: 0 10rpx;
  border: 1rpx solid #ccc;
  border-radius: 4rpx;
}

button {
  width: 80%;
  height: 40rpx;
  background-color: #409eff;
  color: #fff;
  border: none;
  border-radius: 4rpx;
}

2.2 创建首页

在项目的pages目录下创建一个名为index的文件夹，并在该文件夹下创建一个名为index的页面文件。页面文件的目录结构如下：

- pages
  - index
    - index.js
    - index.wxml
    - index.wxss

index.js：

Page({
  data: {
    questionnaires: []
  },
  onLoad: function() {
    // 从服务器获取当前用户的问卷列表
    const token = wx.getStorageSync('token');
    wx.request({
      url: 'http://example.com/questionnaires',
      method: 'GET',
      header: {
        'Authorization': 'Bearer ' + token
      },
      success: function(res) {
        this.setData({
          questionnaires: res.data.questionnaires
        });
      }.bind(this),
      fail: function() {
        wx.showToast({
          title: '获取问卷列表失败',
          icon: 'none'
        });
      }
    });
  },
  createQuestionnaire: function() {
    wx.navigateTo({
      url: '/pages/create-questionnaire/create-questionnaire'
    });
  },
  viewQuestionnaire: function(event) {
    const questionnaireId = event.currentTarget.dataset.questionnaireId;
    wx.navigateTo({
      url: '/pages/view-questionnaire/view-questionnaire?id=' + questionnaireId
    });
  }
});

index.wxml：

<view class="container">
  <button bindtap="createQuestionnaire">创建新问卷</button>
  <view class="questionnaires">
    <view wx:for="{{questionnaires}}" wx:key="{{index}}">
      <view class="questionnaire" bindtap="viewQuestionnaire" data-questionnaire-id="{{item.id}}">
        <text class="title">{{item.title}}</text>
        <text class="description">{{item.description}}</text>
      </view>
    </view>
  </view>
</view>

index.wxss：

.container {
  padding: 20rpx;
}

.button {
  width: 100%;
  height: 40rpx;
  background-color: #409eff;
  color: #fff;
  border: none;
  border-radius: 4rpx;
}

.questionnaires {
  margin-top: 20rpx;
}

.questionnaire {
  padding: 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 4rpx;
  margin-bottom: 20rpx;
}

.title {
  font-size: 16rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.description {
  font-size: 14rpx;
  color: #666;
}

1. 创建问卷页面

在项目的pages目录下创建一个名为create-questionnaire的文件夹，并在该文件夹下创建一个名为create-questionnaire的页面文件。页面文件的目录结构如下：

- pages
  - create-questionnaire
    - create-questionnaire.js
    - create-questionnaire.wxml
    - create-questionnaire.wxss

create-questionnaire.js：

const QUESTION_TYPES = [
  { name: '单选题', value: 'single-choice' },
  { name: '多选题', value: 'multiple-choice' },
  { name: '文本题', value: 'text' }
];

Page({
  data: {
    title: '',
    description: '',
    questions: [
      { type: 'single-choice', title: '', choices: ['选项1', '选项2'] }
    ]
  },
  onTitleInput: function(event) {
    this.setData({
      title: event.detail.value
    });
  },
  onDescriptionInput: function(event) {
    this.setData({
      description: event.detail.value
    });
  },
  onQuestionTitleInput: function(event) {
    const index = event.target.dataset.index;
    const value = event.detail.value;
    
    const questions = this.data.questions;
    questions[index].title = value;
    
    this.setData({
      questions: questions
    });
  },
  onQuestionChoiceInput: function(event) {
    const index = event.target.dataset.index;
    const subIndex = event.target.dataset.subIndex;
    const value = event.detail.value;
    
    const questions = this.data.questions;
    questions[index].choices[subIndex] = value;
    
    this.setData({
      questions: questions
    });
  },
  addQuestion: function() {
    const questions = this.data.questions;
    questions.push({ type: 'single-choice', title: '', choices: ['选项1', '选项2'] });
    
    this.setData({
      questions: questions
    });
  },
  deleteQuestion: function(event) {
    const index = event.target.dataset.index;
    
    const questions = this.data.questions;
    questions.splice(index, 1);
    
    this.setData({
      questions: questions
    });
  },
  createQuestionnaire: function() {
    // 检查问卷标题和问题标题是否为空
    if (this.data.title.trim() === '') {
      wx.showToast({
        title: '问卷标题不能为空',
        icon: 'none'
      });
      return;
    }
    
    let isEmptyQuestion = false;
    this.data.questions.forEach(function(question) {
      if (question.title.trim() === '') {
        isEmptyQuestion = true;
      }
    });
    
    if (isEmptyQuestion) {
      wx.showToast({
        title: '问题标题不能为空',
        icon: 'none'
      });
      return;
    }
    
    // 发送创建问卷请求
    const token = wx.getStorageSync('token');
    wx.request({
      url: 'http://example.com/questionnaires',
      method: 'POST',
      header: {
        'Authorization': 'Bearer ' + token
      },
      data: {
        title: this.data.title,
        description: this.data.description,
        questions: this.data.questions
      },
      success: function(res) {
        wx.showToast({
          title: '创建问卷成功',
          icon: 'success'
        });
        
        // 返回首页
        wx.switchTab({
          url: '/pages/index/index'
        });
      },
      fail: function() {
        wx.showToast({
          title: '创建问卷失败',
          icon: 'none'
        });
      }
    });
  }
});

create-questionnaire.wxml：