微信小程序 滿意度調查問卷答題類小程序實現

最近暫時不用忍受學業壓力，可以幹一些自己想幹的事情，由於接的小程序的鍋太多，決定好好學習一下小程序，本次主要學習了答題問卷小程序的製作，涉及到題目切換、答案上傳以及簡單的完成情況判斷等場景，本次設計特點是題庫與頁面分離。

界面設置

首頁

答題頁面1

答題界面2
功能描述
在主頁中點擊對應的按鈕進入對應的答題頁面。
答題界面包括題目、選項、上/下一題、當前題號等，並且，第一題時【上一題】按鈕禁用；最後一題時【下一題】變爲【提交】
每題之間橫向切換（使用了微信小程序中的swiper組件）
答題完成後判斷是否有未答題，若有，則返回至第一道未答題，如全部答完則將答案提交至雲開發中的數據庫進行保存
代碼
 

<!--miniprogram/pages/testSAS/testSAS.wxml-->
<view class='container'>
 
 
    <swiper class='sheet' current='{{id}}'>
      <block wx:for="{{qnaire}}">
        <swiper-item>
          <form bindsubmit='submit'>
            <view class='naire'>
              <view class='question'>{{item.question}}</view>
              <!--view class='border' /-->
              <radio-group class='radio-group' name='answer' bindchange='radioChange'>
                <label class='radio'><radio value="A" color='#fcbe39' />{{item.option.a}}</label>
                <label class='radio'><radio value="B" color='#fcbe39' />{{item.option.b}}</label>
                <label class='radio'><radio value="C" color='#fcbe39' />{{item.option.c}}</label>
                <label class='radio'><radio value="D" color='#fcbe39' />{{item.option.d}}</label>
              </radio-group>
            </view>
            <view class='button-group'>
              <button class='button' hover-class='none' bindtap='lastq' disabled='{{id==0}}'>上一題</button>
              <button wx:if="{{id<19}}" class='button' hover-class='none' form-type='submit' bindtap='nextq'>下一題</button>
              <button wx:else class='button' hover-class='none' form-type='submit' bindtap='formSubmit'>提交</button>
            </view>
            <view class='id'>{{id+1}}/{{qnaire.length}}</view>
          </form>
        </swiper-item>
      </block>
    </swiper>
 
    
</view>

此處本來是沒有打算使用swiper組件的，由於直接使用wx:for會導致全部題目出現在同一個頁面上；不使用循環語句，改用[id]直接進行下標索引會造成radio選中後切換題目選中狀態不變，使用checked也無法解決問題，因此改爲使用swiper組件。

在使用swiper時，目前還不清楚爲什麼當把題號顯示代碼<view class='id'>{{id+1}}/{{qnaire.length}}</view>寫在block塊和swiper塊之後會無法顯示，所以保持它隨swiper-item一起切換。

/* miniprogram/pages/testSAS/testSAS.wxss */
page {
  background: #fcbe3960;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
 
.sheet {
  background: #fff;
  border-radius: 36rpx;
  margin-top: 160rpx;
  width: 84%;
  height: 580rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.naire {
  height: 420rpx;
}
.question {
  font-size: 36rpx;
  font-weight: bold;
  margin-top: 40rpx;
  margin-left: 32rpx;
}
.border {
  height: 2rpx;
  width: 90%;
  background-color: #d4d4d4;
  margin: 16rpx auto;
}
.radio-group {
  display: flex;
  flex-direction: column;
  font-size: 30rpx;
  text-indent: 14rpx;
  margin-top: 40rpx;
}
.radio {
  margin-bottom: 14rpx;
}
.button-group {
  display: flex;
  flex-direction: row;
  width: 80%;
  margin: auto;
  justify-content: space-between;
}
.button {
  background: #fcbe39;
  border-radius: 100rpx;
  font-size: 30rpx;
  line-height: 52rpx;
  height: 52rpx;
  width: 172rpx;
  font-weight: bold;
  color: #fff;
}
.button::after {
  border: 0;
}
.id {
  text-align: center;
  font-size: 24rpx;
  color: #c2c2c2;
  margin: auto;
  margin-top: 20rpx;
}

題庫：

const qnaire = [
  {
    "question": "1. 我覺得比平時容易緊張或着急",
    "option": {
      "a": "沒有或很少時間",
      "b": "小部分時間",
      "c": "相當多時間",
      "d": "絕大部分或全部時間"
    }
  },
  {
    "question": "2. 我無緣無故在感到害怕",
    "option": {
      "a": "沒有或很少時間",
      "b": "小部分時間",
      "c": "相當多時間",
      "d": "絕大部分或全部時間"
    }
  },
  {
    "question": "3. 我容易心裏煩亂或感到驚恐",
    "option": {
      "a": "沒有或很少時間",
      "b": "小部分時間",
      "c": "相當多時間",
      "d": "絕大部分或全部時間"
    }
  },
// …省略… //
  {
    "question": "19. 我容易入睡並且一夜睡得很好",
    "option": {
      "a": "沒有或很少時間",
      "b": "小部分時間",
      "c": "相當多時間",
      "d": "絕大部分或全部時間"
    }
  },
  {
    "question": "20. 我作惡夢",
    "option": {
      "a": "沒有或很少時間",
      "b": "小部分時間",
      "c": "相當多時間",
      "d": "絕大部分或全部時間"
    }
  }
]
 
module.exports = {
  qnaire: qnaire
}

核心代碼：

const db = wx.cloud.database()
const qnaire = require("./sas.js")  //導入題庫
var ans = new Array(20)  //答案數組初始化，會在onload函數中賦初值""
 
data: {
  qnaire: qnaire.qnaire,
  answer: ans,
  id: 19
}
 
radioChange: function (e) {
  console.log(e.detail.value)
}
 
nextq: function () {
  if (this.data.id < 19) {
    this.setData({
      id: this.data.id + 1,
    })
  }
}
 
lastq: function (e) {
  if (this.data.id != 0) {
    this.setData({
      id: this.data.id - 1,
    })
  }
}
 
submit: function (e) {
  console.log(e.detail.value);
  var a = e.detail.value.answer;
  var id = this.data.id;
  ans[id] = a;
  this.setData({
    answer: ans,
  })
  console.log(this.data.answer);
 
}
 
//判斷答題完成情況
formSubmit: function() {
  var finish;
  var i = 0;
  var _this = this;
  while (i < 20) {
    if (ans[i] == "") {
      finish = 'false';
      break;
    } else {
      finish = 'true';
    }
    i++;
  }
  if (finish == 'false') {
    wx.showModal({
      title: '無法提交',
      content: '您還有部分題目未完成，請檢查後重新提交',
      showCancel: false,
      confirmColor: '#fcbe39',
      confirmText: "好的",
      success(res) {
        _this.setData({
          id: i,
        })
      }
    })
  } else {
    wx.showLoading({
      title: '加載中',
    })
    setTimeout(function () {
      wx.hideLoading({
        success(res) {
          _this.answer2db();
          wx.navigateBack({
            delta: 1
          })
        }
      })
    }, 2000)
  }
}
 
//將用戶完成的答案數組上傳至雲數據庫
answer2db: function() {
  db.collection('SAS').add({
    data: {
      answer: this.data.answer
    },
    success(res) {
      console.log(res._id);
    },
    fail(res) {
      wx.showToast({
        icon: 'none',
        title: '新增記錄失敗'
      })
      console.error('[數據庫] [新增記錄] 失敗：', err)
    }
  })
}

主要學習內容：
swiper的使用
js的模塊引入
js中循環語句的寫法（原來和c++一樣啊…）
仍需改進的問題：
禁用按鈕圖標樣式
radio圖標爲自帶的對勾圖標，只能實現顏色的改變，還無法改變圖標樣式，【猜測需要自己重新使用view視圖寫新模塊】
需實現更可靠的交互能力，有的時候開發者工具會報錯，說代碼中可能存在死循環
————————————————
版權聲明：本文爲CSDN博主「實驗室小彩筆」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_43896241/article/details/92833984