⼩程序满意度调查问卷答题类⼩程序实现
最近暂时不⽤忍受学业压⼒，可以⼲⼀些⾃⼰想⼲的事情，由于接的⼩程序的锅太多，决定好好学习⼀下⼩程序，本次主要学习了答题问卷⼩程序的制作，涉及到题⽬切换、答案上传以及简单的完成情况判断等场景，本次设计特点是题库与页⾯分离。
界⾯设置
⾸页
答题页⾯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": "绝⼤部分或全部时间"
}
}
]
qnaire: qnaire
}
核⼼代码：
const db = wx.cloud.database()
const qnaire = require("./sas.js")  //导⼊题库
var ans = new Array(20)  //答案数组初始化，会在onload函数中赋初值""
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() {
data: {
answer: this.data.answer
},
success(res) {
console.log(res._id);
},
fail(res) {
wx.showToast({
icon: 'none',
title: '新增记录失败'
})
<('[数据库] [新增记录] 失败：', err)    }
})
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。