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

微信小程序是一种基于微信平台的应用程序，可以在微信中进行使用，无需下载安装即可使用。在本项目中，我们将使用微信小程序开发一个简易的在线问卷调查应用。

1. 界面设计

首先，我们需要设计一个用户界面，用于显示问卷列表和调查结果。在小程序中，界面设计使用的是WXML和WXSS，类似于HTML和CSS。

在小程序目录的pages文件夹中创建surveys文件夹，用于存放与问卷调查相关的页面。在surveys文件夹中创建index.wxml和index.wxss文件。

index.wxml文件的内容如下：

<view class="container">
  <view class="title">问卷调查</view>
  <view wx:for="{{surveys}}" wx:key="id" class="survey" bindtap="goToSurvey">
    <view class="survey-name">{{item.name}}</view>
    <view class="survey-desc">{{item.description}}</view>
    <view class="survey-link">点击参与</view>
  </view>
</view>

index.wxss文件的内容如下：

.container {
  padding: 20px;
}

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

.survey {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 10px;
}

.survey-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.survey-desc {
  color: #666;
  margin-bottom: 10px;
}

.survey-link {
  color: #00c400;
}

1. 数据管理

接下来，我们需要管理问卷的数据。在小程序中，可以使用data对象来存储和管理数据。

在surveys文件夹中创建index.js文件，用于实现与问卷调查相关的逻辑。

index.js文件的内容如下：

Page({
  data: {
    surveys: [
      {
        id: 1,
        name: '问卷调查1',
        description: '这是问卷调查1的描述'
      },
      {
        id: 2,
        name: '问卷调查2',
        description: '这是问卷调查2的描述'
      },
      {
        id: 3,
        name: '问卷调查3',
        description: '这是问卷调查3的描述'
      }
    ]
  },

  goToSurvey(e) {
    const surveyId = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: '/pages/surveys/detail?id=' + surveyId
    });
  }
})

在上面的代码中，我们使用data对象来存储问卷数据，其中每个问卷是一个包含id、name和description属性的对象。goToSurvey函数用于跳转到问卷详情页面。

1. 问卷详情

我们需要创建问卷详情页面，用于显示问卷的问题和收集用户的答案。在surveys文件夹中创建detail文件夹，并在其中创建index.wxml和index.wxss文件。

index.wxml文件的内容如下：

<view class="container">
  <view class="title">{{survey.name}}</view>
  <view wx:for="{{survey.questions}}" wx:key="id" class="question">
    <view class="question-text">{{item.text}}</view>
    <view wx:if="{{item.type === 'input'}}">
      <input class="input" data-question="{{item}}" bindinput="handleInput" />
    </view>
    <view wx:else>
      <view wx:for="{{item.options}}" wx:key="id" class="option">
        <checkbox value="{{option}}" data-question="{{item}}" bindchange="handleCheckbox">{{option}}</checkbox>
      </view>
    </view>
  </view>
  <button class="submit" bindtap="submitSurvey">提交</button>
</view>

index.wxss文件的内容如下：

.container {
  padding: 20px;
}

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

.question {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 10px;
}

.question-text {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.input {
  width: 100%;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
  margin-bottom: 10px;
}

.option {
  margin-bottom: 10px;
}

.submit {
  width: 100%;
  height: 40px;
  background-color: #00c400;
  color: #fff;
  border: none;
  border-radius: 4px;
  margin-top: 20px;
}

1. 问卷调查逻辑

在detail文件夹中创建index.js文件，用于实现问卷调查的逻辑。

index.js文件的内容如下：

Page({
  data: {
    survey: {
      id: 1,
      name: '',
      questions: [
        {
          id: 1,
          text: '问题1',
          type: 'input'
        },
        {
          id: 2,
          text: '问题2',
          type: 'checkbox',
          options: ['选项1', '选项2', '选项3']
        }
      ]
    },
    answers: []
  },

  onl oad(options) {
    const surveyId = options.id;
    this.setData({
      'survey.id': surveyId
    });
  },

  handleInput(e) {
    const question = e.currentTarget.dataset.question;
    const answer = {
      questionId: question.id,
      value: e.detail.value
    };
    this.updateAnswer(answer);
  },

  handleCheckbox(e) {
    const question = e.currentTarget.dataset.question;
    const values = e.detail.value;
    const answer = {
      questionId: question.id,
      value: values.join(',')
    };
    this.updateAnswer(answer);
  },

  updateAnswer(answer) {
    const answers = this.data.answers;
    const index = answers.findIndex(a => a.questionId === answer.questionId);
    if (index !== -1) {
      answers[index] = answer;
    } else {
      answers.push(answer);
    }
    this.setData({
      answers: answers
    });
  },

  submitSurvey() {
    const answers = this.data.answers;
    // 提交答案的逻辑
    console.log(answers);
    wx.navigateBack();
  }
})

在上面的代码中，我们使用data对象存储问卷详情页的数据，包括问卷的id、name和questions，以及用户的答案answers。onLoad函数用于获取问卷的id参数，并更新问卷数据。

handleInput函数用于处理输入框的输入事件，handleCheckbox函数用于处理复选框的选择事件。updateAnswer函数用于更新答案数据。

submitSurvey函数用于提交问卷答案，这里我们只是简单地打印答案，并返回上一页。

至此，我们已经完成了简易的在线问卷调查应用的开发。在微信开发者工具中运行该小程序，你将看到一个问卷列表的界面，点击问卷可以进入问卷详情页面，并提交答案。

这只是一个基本的示例，实际应用中还可以添加更多功能，例如登录、注册、问卷统计等。希望这个示例能够帮助你理解如何使用微信小程序开发一个简易的在线问卷调查应用。