微信小程序 在线调查表

微信小程序在线调查表是一种方便用户参与和收集数据的方式。以下是一个简单的在线调查表示例，您可以根据自己的需求进行修改和扩展：

1. 在微信公众平台上注册一个小程序账号，并创建一个新的小程序项目。

2. 在项目中添加所需的页面，例如首页、调查表页面等。在调查表页面的WXML文件中，编写如下代码：

<view class="container">
  <form bindsubmit="submitForm">
    <view class="form-item">
      <text>姓名：</text>
      <input type="text" name="name" placeholder="请输入您的姓名" />
    </view>
    <view class="form-item">
      <text>年龄：</text>
      <input type="number" name="age" placeholder="请输入您的年龄" />
    </view>
    <view class="form-item">
      <text>性别：</text>
      <radio-group bindchange="genderChange">
        <label>
          <radio value="male">男</radio>
        </label>
        <label>
          <radio value="female">女</radio>
        </label>
      </radio-group>
    </view>
    <view class="form-item">
      <text>兴趣爱好：</text>
      <checkbox-group bindchange="hobbiesChange">
        <label>
          <checkbox value="reading">阅读</checkbox>
        </label>
        <label>
          <checkbox value="music">音乐</checkbox>
        </label>
        <label>
          <checkbox value="sports">运动</checkbox>
        </label>
      </checkbox-group>
    </view>
    <button formType="submit">提交</button>
  </form>
</view>

3. 在调查表页面的JS文件中，编写如下代码：

Page({
  data: {
    name: "",
    age: "",
    gender: "",
    hobbies: []
  },

  submitForm(e) {
    const { name, age, gender, hobbies } = e.detail.value;
    this.setData({
      name,
      age,
      gender,
      hobbies
    });
    wx.showToast({
      title: "提交成功",
      icon: "success",
      duration: 2000
    });
  },

  genderChange(e) {
    this.setData({
      gender: e.detail.value
    });
  },

  hobbiesChange(e) {
    const checkedHobbies = e.detail.value;
    this.setData({
      hobbies: checkedHobbies
    });
  }
});

4. 在调查表页面的WXSS文件中，编写如下代码：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.form-item {
  margin-bottom: 10px;
}

.form-item text {
  width: 80px;
  text-align: right;
}

.form-item input[type="text"],
.form-item input[type="number"] {
  flex: 1;
}

.form-item radio-group,
.form-item checkbox-group {
  display: flex;
  flex-direction: column;
}

.form-item label {
  margin-bottom: 5px;
}

5. 在app.json文件中，添加调查表页面的路径：

{
  "pages": [
    "pages/index/index",
    "pages/survey/survey"
  ]
}

现在，您可以在微信小程序中访问调查表页面，填写并提交问卷。