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

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

我们先看效果是怎么样的

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})},//获取qidgetQid() {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) + 1console.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();},

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

python操作微信小程序云端数据库_微信小程序云开发之数据库操作
本文实例为大家分享了微信小程序云开发之数据库操作的具体代码,供大家参考,具体内容如下新建集合 1.打开云开发控制台,数据库 2.添加集合users 添加代码 onAdd: function () { ...
五十、微信小程序云开发中的云数据库
@Author:Runsen 今天是2020年7月24日.不学习,不复习,那根一条咸鱼差不多. 今天继续学习复习微信小程序中的云开发. 文章目录云开发云数据库云开发开发者可以使用云开发开发微信 ...
微信小程序云开发不完全指北
微信小程序云开发不完全指北首先必须说明云开发的"云"并不是类似云玩家里的云的意思,而是微信小程序真的提供了云开发的接口以及一个简单的提供存储.数据库服务的虚拟后台(对于一些轻量小 ...
python操作微信小程序云端数据库_微信小程序·云开发云数据库的基本使用-微信小程序云开发实例-腾讯云微信小程序...
微信小程序·云开发云数据库的基本使用-微信小程序云开发实例-腾讯云微信小程序浏览量:1120 时间:2020-04-06
微信小程序云开发用户身份登录_你必须要掌握的微信小程序云开发
微信小程序开发已经成为目前最火爆的技能之一,无论是在求职.毕设.兴趣培养等方面都已经成为一项必备技能,而小程序云开发技术的出现更是点燃了整个小程序生态圈. 在2019微信公开课PRO小程序分论坛上,腾 ...
基于微信小程序云开发（校园许愿墙app）2.0稳定版，以发布上线
大家好~我是c站的一个小博主,我会定期更新博文,本篇是围绕微信小程序基于腾讯云开发展开的一个项目,如果看着还不错,或者对您有帮助的话,可以进我的专栏看看我的小程序的其他作品https://blog.c ...
微信小程序云开发实战：网上商城（二）
微信小程序云开发实战:网上商城(二) 主页面入口页面云函数与云数据库代码实现云端实现小程序端实现选择UI组件库 WeUI Vant 整合UI组件库以扩展包的方式引入weui 接下来主页 ...
php访问微信云数据库,第三方服务器php获取微信小程序云开发access_token和云数据库...
微信小程序云开发开放了http api,可以从第三方访问云服务了.方便很多.云服务的后台,可以用PC端写了. 流程大概就是通过appid,appkey获得access_token,这个access_t ...
微信小程序-云开发云调用API没有权限(no permission)问题
今天在学习微信小程序云开发中的在云函数中使用云调用api templateMessage.send 时,在开发环境中运行报错:function has no permission to call th ...

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

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

我们先看效果是怎么样的

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

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

最新文章

热门文章

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

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

我们先看效果是怎么样的

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

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

最新文章

热门文章

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