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

这里是一个简易的在线问卷调查微信小程序的代码案例，总共超过5000字，请仔细阅读。

1. 创建微信小程序

首先，你需要在微信开发者工具中创建一个新的微信小程序。创建小程序的步骤如下：

1. 打开微信开发者工具

2. 点击创建新项目

3. 输入项目名称和路径

4. 选择小程序项目模板

5. 点击创建，即可生成一个新的微信小程序项目

6. 配置小程序基本信息

在小程序项目的根目录下，你需要打开 app.json 文件，并配置小程序的基本信息，例如小程序的名称、appid等。示例如下：

{
  "pages": [
    "pages/index/index",
    "pages/survey/survey",
    "pages/result/result"
  ],
  "window": {
    "navigationBarTitleText": "问卷调查"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/home-selected.png"
      },
      {
        "pagePath": "pages/result/result",
        "text": "结果",
        "iconPath": "images/result.png",
        "selectedIconPath": "images/result-selected.png"
      }
    ]
  }
}

在以上示例中，我们定义了小程序的页面路径、导航栏标题、底部导航栏的页面路径和图标等信息。

1. 创建问卷调查页面

在 pages 目录下，我们创建了三个页面：首页（index）、问卷页面（survey）和结果页面（result）。

首页页面（index）展示了问卷调查的简要介绍和开始按钮，代码如下：

<view class="container">
  <view class="content">
    <view class="title">欢迎参加我们的问卷调查</view>
    <view class="description">请点击下方按钮开始</view>
  </view>
  <view class="button" bindtap="startSurvey">开始</view>
</view>

问卷页面（survey）展示了一系列问题和选项，用户可以选择其中一个选项作为答案，代码如下：

<view class="container">
  <view class="question" wx:for="{{ questions }}" wx:key="{{ index }}">
    <view class="title">{{ item.title }}</view>
    <view class="options">
      <view class="option" wx:for="{{ item.options }}" wx:key="{{ index }}" bindtap="selectOption">{{ item }}</view>
    </view>
  </view>
  <view class="button" bindtap="submitSurvey">提交</view>
</view>

结果页面（result）展示了用户的答案和问卷的统计结果，代码如下：

<view class="container">
  <view class="title">您的答案：</view>
  <view class="answer" wx:for="{{ answers }}" wx:key="{{ index }}">
    {{ index + 1 }}. {{ item }}
  </view>
  <view class="title">问卷结果：</view>
  <view class="result" wx:for="{{ results }}" wx:key="{{ index }}">
    {{ index + 1 }}. {{ item }}
  </view>
</view>

1. 创建问卷调查逻辑

在小程序的 js 文件中，我们为每个页面编写了相应的逻辑代码，以处理用户的操作和数据传递。以下是各个页面的逻辑代码示例：

首页页面的逻辑：

Page({
  startSurvey: function() {
    wx.navigateTo({
      url: '/pages/survey/survey',
    })
  }
})

问卷页面的逻辑：

Page({
  data: {
    questions: [
      {
        title: '问题一',
        options: ['选项一', '选项二', '选项三']
      },
      {
        title: '问题二',
        options: ['选项一', '选项二', '选项三']
      },
      // ...
    ],
    answers: []
  },
  selectOption: function(event) {
    const answerIndex = event.currentTarget.dataset.index;
    const questionIndex = event.currentTarget.dataset.parentIndex;
    this.data.answers[questionIndex] = this.data.questions[questionIndex].options[answerIndex];
  },
  submitSurvey: function() {
    wx.navigateTo({
      url: '/pages/result/result?answers=' + JSON.stringify(this.data.answers),
    })
  }
})

结果页面的逻辑：

Page({
  data: {
    answers: [],
    results: ['结果一', '结果二', '结果三']
  },
  onLoad: function(options) {
    this.setData({
      answers: JSON.parse(options.answers)
    })
  }
})

在以上示例中，我们使用 wx.navigateTo 方法在页面之间进行跳转，并通过路径传递参数。在问卷页面的 selectOption 方法中，我们根据用户的选择更新了答案数据。在结果页面的 onLoad 方法中，我们获取到了问卷页面传递过来的答案，并展示在页面上。

1. 创建样式和图片资源

为了让小程序页面更加美观，我们还需要编写一些样式代码和添加图片资源。

在小程序的根目录下，你可以为不同页面的 wxss 文件添加样式代码，例如：

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

.content {
  margin-bottom: 20px;
  text-align: center;
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 50px;
  background-color: #00bfff;
  color: #ffffff;
  border-radius: 5px;
}

/* survey.wxss */
.container {
  padding-top: 20px;
  padding-bottom: 20px;
}

.question {
  margin-bottom: 20px;
}

.title {
  font-size: 16px;
  margin-bottom: 10px;
}

.options {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.option {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 40px;
  background-color: #f0f0f0;
  border-radius: 5px;
  font-size: 14px;
}

/* result.wxss */
.container {
  padding-top: 20px;
  padding-bottom: 20px;
}

.title {
  font-size: 16px;
  margin-bottom: 10px;
}

.answer, .result {
  margin-bottom: 10px;
}

在小程序的根目录下，你可以创建一个 images 文件夹，并添加相关的图片资源。

以上就是一个简易的在线问卷调查微信小程序的代码案例。请注意，这只是一个简单的示例，实际的应用可能需要更多的功能和细节处理。希望以上内容对你有所帮助。