微信小程序云开发实现问卷调查的创建与填写

微信小程序云开发实现问卷调查的创建与填写

本人专注使用云开发，实现一个前端可以做后端以及整个项目的部署与上线。
如果觉得我讲的好就可以给我点个赞。也可以加我微信了解详情。

我们先看效果是怎么样的

WeChat_20220515124055

1.首先你需要先了解 一下基本的云开发知识。

我们主要用到的数据库的操作为，查询，添加，更新。
1.查询 我们查的是全部定坐消息，所以我们应该使用云函数请求数据库，可以查询到表中所有数据，这样权限就更高了。如果是在js中查询只能查询自己添加的数据，以及cms添加的 数据。
2.添加，这个操作是属于自己本身 的操作不需要其他的参与，所以我们可以使用本地请求数据库。
3.更新操作，更新是更改数据的重要操作。
1》调查问卷的原理
1.首先我们需要定义一个表单，通过表单来实现其填写的数据，。
2》创建问卷的原理
1.首先我们需要定义一个json字段[{},{}],在这里我们应该把自己的openid和自己的基本信息（头像，昵称等）以及问卷选项放入这个字段中。
我们先看数据结构


从上面数据结构可以看出 其数据排布情况，接下来我们就可以开始做该页面了

我们先看代码。

<scroll-view scroll-x class="bg-white nav">
  <view class="flex text-center">
    <view class="cu-item flex-sub {{0==TabCur?'text-orange cur':''}}" bindtap="tabSelect" data-id="{{0}}">问卷</view>
    <view class="cu-item flex-sub {{1==TabCur?'text-orange cur':''}}" bindtap="tabSelect" data-id="{{1}}">创建</view>
  </view>
</scroll-view>

<view wx:if="{{0==TabCur}}" class="padding">
  <view class="padding-xl radius shadow shadow-lg bg-white margin-top" wx:for="{{questionList}}">
    <view class="solids-bottom padding-xs flex align-center" bindtap="loop_qu" data-id="{{item._id}}">
      <view class="flex-sub text-center">
        <view class=" text-xl padding">
          <text class="text-black text-bold">{{item.qusetions.name}}</text>
        </view>
        <view class="padding">{{item.qusetions.des}}</view>
      </view>
    </view>
  </view>
</view>

<view wx:if="{{1==TabCur}}">
  <view>
    <view class="cu-form-group">
      <view class="title">问卷标题</view>
      <input placeholder="请输入问卷标题" bindinput="name" value="{{qusetions.name}}"></input>
    </view>
    <view class="cu-form-group">
      <view class="title">问卷描述</view>
      <input placeholder="请输入问卷描述" bindinput="des" value="{{qusetions.des}}"></input>
    </view>

    <view class="cu-form-group">
      <view class="title">选择截止时间</view>
      <date-time-picker value="{{qusetions.endTime}}" bindchange="setEndTimeChange">
        <view class="picker">{{qusetions.endTime}}</view>
      </date-time-picker>
    </view>

    <view class="cu-form-group">
      <view class="title">选择问题类型</view>
      <picker bindchange="PickerChange" value="{{index}}" range="{{picker}}" class="text-center">
        {{index?picker[index]:'请选择类型'}}
      </picker>
      <button class="cu-btn bg-green shadow" style="width:200rpx" bindtap="addquest">添加问题</button>
    </view>

    <view wx:for="{{qusetions.questionnaireArray}}">
      <!-- 单选 -->
      <view wx:if="{{item.type == 'SCQ'}}">
        <view class="cu-form-group">
          <view class="title">问题(单)</view>
          <input placeholder="请输入问题" value="{{item.content.description}}" bindinput="description"
            data-index="{{index}}"></input>
          <button class="cu-btn bg-green shadow" style="width:200rpx" bindtap="additem"
            data-index="{{index}}">添加选项</button>
        </view>
        <view class="cu-form-group" wx:for="{{item.content.options}}" wx:for-index="childindex">
          <view class="title">选项{{item.id}}</view>
          <input placeholder="请输入选项{{item.id}}" bindinput="opti" data-index="{{index}}" data-childindex="{{childindex}}"
            value="{{item.name}}"></input>
          <button class="cu-btn bg-red shadow" style="width:200rpx" bindtap="delectitem" data-index="{{index}}"
            data-childindex="{{childindex}}">删除选项</button>
        </view>

      </view>
      <!-- 多选 -->
      <view wx:if="{{item.type == 'MCQ'}}">
        <view class="cu-form-group">
          <view class="title">问题(多)</view>
          <input placeholder="请输入问题" bindinput="description" value="{{item.content.description}}"
            data-index="{{index}}"></input>
          <button class="cu-btn bg-green shadow" style="width:200rpx" bindtap="additem"
            data-index="{{index}}">添加选项</button>
        </view>
        <view class="cu-form-group" wx:for="{{item.content.options}}" wx:for-index="childindex">
          <view class="title">选项{{item.id}}</view>
          <input placeholder="请输入选项{{item.id}}" bindinput="opti" data-index="{{index}}" data-childindex="{{childindex}}"
            value="{{item.name}}"></input>
          <button class="cu-btn bg-red shadow" style="width:200rpx" bindtap="delectitem" data-index="{{index}}"
            data-childindex="{{childindex}}">删除选项</button>
        </view>
      </view>
      <!-- 问答 -->
      <view wx:if="{{item.type == 'SAQ'}}">
        <view class="cu-form-group">
          <view class="title">问题(问答)</view>
          <input placeholder="请输入问题" bindinput="description"value="{{item.content.description}}"
            data-index="{{index}}"></input>
        </view>
      </view>
    </view>
  </view>
  <view class="padding bg-white">
    <button class="cu-btn block bg-blue margin-tb-sm lg button-hover" bindtap="sumbit">提交问卷</button>
  </view>

</view>

js代码如下

 data: {
    TabCur: 0,
    scrollLeft: 0,
    index: null,
    picker: ['单选', '多选', '问答'],
    picker1: ['SCQ', 'MCQ', 'SAQ'],
    questionList: null,
    qusetions: {
      name: '',
      des: '',
      qid: 0,
      creatTime: '',
      endTime_num: null,
      endTime: '2022-05-13 16:24:30',
      questionnaireArray: []
    },
  },

  PickerChange(e) {
    console.log(e);
    this.setData({
      index: e.detail.value
    })
  },
  //设置截止时间
  setEndTimeChange(e) { this.setData({ 'qusetions.endTime': e.detail.dateString }) },
  name(e) { this.setData({ 'qusetions.name': e.detail.value }) },
  des(e) { this.setData({ 'qusetions.des': e.detail.value }) },
  description(e) {
    let value = e.detail.value;
    let index = e.currentTarget.dataset.index;
    let qusetions = this.data.qusetions;
    qusetions.questionnaireArray[index].content.description = value;
    this.setData({ qusetions })
  },
  opti(e) {
    let value = e.detail.value;
    let index = e.currentTarget.dataset.index;
    let childindex = e.currentTarget.dataset.childindex;
    let qusetions = this.data.qusetions;
    qusetions.questionnaireArray[index].content.options[childindex].name = value;
    this.setData({ qusetions })
  },
  tabSelect(e) {
    this.setData({
      TabCur: e.currentTarget.dataset.id,
      scrollLeft: (e.currentTarget.dataset.id - 1) * 60
    })
  },
  //获取qid
  getQid() {
    let qids = 0;
    wx.cloud.database().collection("questions_new").get().then(res => {
      console.log("连接questions_new成功", res)
      qids = (res.data[res.data.length - 1].qusetions.qid) + 1
      console.log("连接成功后qid的值", qids)
      if (qids == '') { this.setData({ 'qusetions.qid': 0 }) } else {
        this.setData({ 'qusetions.qid': qids })
      }
    }).catch(res => { console.log("连接questions_new失败", res) })
  },

  //添加问题
  addquest: function () {
    let tempArray = this.data.qusetions.questionnaireArray;
    let picker1 = this.data.picker1[this.data.index];
    if (this.data.index) {
      if (picker1 == "SCQ") {
        var temp0 = {
          "type": "SCQ",
          "content": {
            "description": "",
            "options": []
          }
        };
        tempArray.push(temp0);
      }
      else if (picker1 == "MCQ") {
        var temp0 = {
          "type": "MCQ",
          "content": {
            "description": "",
            "options": []
          }
        };
        tempArray.push(temp0);
      }
      else if (picker1 == "SAQ") {
        var temp0 = {
          "type": "SAQ",
          "content": {
            "description": "",
            "description_value": ""
          }
        };
        tempArray.push(temp0);
      }
      this.setData({
        'qusetions.questionnaireArray': tempArray,
      });
    } else { wx.showToast({ title: '请选择问题类型', icon: 'none' }) }
  },
  //添加选项
  additem(e) {
    let index = e.currentTarget.dataset.index;
    let qusetion = this.data.qusetions;
    let options = qusetion.questionnaireArray[index].content.options;
    options.push({ "id": options.length + 1, "name": "", "isSelected": false },);
    this.setData({ qusetions: qusetion });
    console.log(e.currentTarget.dataset.index);
  },
  //删除选项
  delectitem(e) {
    let index = e.currentTarget.dataset.index;
    let childindex = e.currentTarget.dataset.childindex;
    let qusetion = this.data.qusetions;
    let options = qusetion.questionnaireArray[index].content.options;
    options.splice(childindex, 1);
    this.setData({ qusetions: qusetion });
  },


  //验证是否为空的函数
  ifnone_data() {
    let qusetions = this.data.qusetions;
    if (qusetions.name == '') { return '请填写问卷标题'; };
    if (qusetions.des == '') { return '请填写问卷描述'; };
    if (this.data.index == null) { return '请选择问题类型'; };
    let stati_top = 200;
    for (let i = 0; i < qusetions.questionnaireArray.length; i++) {
      if (qusetions.questionnaireArray[i].content.description == '') { stati_top = '请填写问题'; break; }
      if (qusetions.questionnaireArray[i].type != 'SAQ') {
        if (qusetions.questionnaireArray[i].content.options.length == 0) { stati_top = '请添加选项'; break; }
        for (let j = 0; j < qusetions.questionnaireArray[i].content.options.length; j++) {
          if (qusetions.questionnaireArray[i].content.options[j].name == '') { stati_top = '请填写选项'; break; }
        }
      }

    }
    return stati_top;
  },
  //提交数据
  sumbit() {
    let ifnone_data = this.ifnone_data();
    let qusetions = this.data.qusetions;
    console.log(ifnone_data)
    console.log(qusetions)
    if (ifnone_data == 200) {
      qusetions.endTime_num = new Date(qusetions.endTime).getTime();
      wx.cloud.database().collection('questions_new').add({
        data: {
          qusetions
        }
      }).then(res => {
        wx.showToast({ title: '添加成功', })
        this.setData({
          index: null,
          qusetions: { name: '', des: '', qid: 0, creatTime: '', endTime_num: '', endTime: '2022-05-13 16:24:30', questionnaireArray: [] },
        })
      })
      console.log(qusetions);
    } else {
      wx.showToast({ title: ifnone_data, icon: 'none' });
    }
  },

  getdata() {
    let _ = wx.cloud.database().command;
    //.where({ endTime: _.gt(+new Date()) })
    wx.cloud.database().collection('questions_new').where({ 'qusetions.endTime_num': _.gte(+new Date()) }).get().then(res => {
      console.log("获取questions_new的全部数据成功", res)
      this.setData({
        questionList: res.data
      })
    })
      .catch(res => {
        console.log("获取questions_new的全部数据失败", res)
      })
  },

  loop_qu(e) {
    let id = e.currentTarget.dataset.id;
    let openid = wx.getStorageSync('openid');
    wx.cloud.database().collection('login_questions').where({ item_inf_id: id, _openid: openid }).get().then(res => {
      if (res.data.length == 0) {
        wx.navigateTo({
          url: '/pages/item/item?id=' + id,
        })
      } else {
        wx.showToast({
          title: '你已回答过改问卷请勿再回答。',
          icon: 'none'
        })
      }
    })

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //创建时间
    const formatTime = format.formatTime(new Date());
    this.setData({ 'qusetions.creatTime': formatTime, 'qusetions.endTime': formatTime })
    this.getdata();
    this.getQid();
  },