微信小程序---问卷调查

最新推荐文章于 2024-06-01 20:16:21 发布
最新推荐文章于 2024-06-01 20:16:21 发布
阅读量7.4k 收藏 23
点赞数
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42885875/article/details/103899953
版权 
//index.js
const app = getApp()
var arr = new Array()
Page({
  data: {
    name: '',
    age: '',
    currentID: ' ',
    answer: arr
  },
  ForName: function(e) {
    this.setData({
      name: e.detail.value
    })
    console.log('ForName :', this.data.name)
  },
  ForAge: function(e) {
    this.setData({
      age: e.detail.value
    })
    console.log('ForAge :', this.data.age)
  },
  btnChange: function(e) {
    var name = this.data.name
    var age = this.data.ag
    const db = wx.cloud.database()
    db.collection('user-info2').where({
      name: name,
      age: age
    }).get({
      success: res => {
        if (res.data.length != 0) {
          wx.showToast({
            icon: 'success',
            title: '登录成功！'
          })
          this.setData({
            currentID: res.data[0]._id,
          })
          console.log("currentIDIndex", this.data.currentID)
          wx.navigateTo({
            url: '/pages/detail/detail?name=' + this.data.name + '&currentID=' + this.data.currentID   
          })
        } else {
          wx.showToast({
            icon: 'none',
            title: '登录失败！请先注册！'
          })
        }
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '查找用户失败，请先注册！'
        })
      }
    }) 
  },
  btn2Change: function() {
    wx.navigateTo({
      url: '/pages/registered/registered'
    })
  }
});

<!-- index.wxml -->
<view class="page">
  <view class="tab">
    <text class="tab1">问卷调查</text> </view>
  <view class="container">
    <view class="message">
      <view class="Name">
        <view class="label">姓名</view>
        <input class="input" bindinput="ForName" name="name" placeholder="请输入姓名" />
      </view>
      <view class="Age">
        <view class="label">年龄</view>
        <input class="input" bindinput="ForAge" name="age" placeholder="请输入年龄" />
      </view>
    </view>
    <view>
      <button class="btn1" bindtap="btnChange">登录</button>
      <button class="btn2" bindtap="btn2Change">注册</button>
      <!-- <button class="btn2" bindtap="questionsChange">填写问卷</button> -->
    </view>
  </view>
</view>

.tab {
  display: flex;
  flex-direction: column;
  width: 90%;
  height: 100px;
  background-color: rgba(137, 156, 219, 0.623);
  margin: 20px 15px 20px 15px;
  font-size: 30px;
  color: #fff;
  /* text-align: center;
      align-items: center; */
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
 

.tab1 {
  margin-top: 20px;
  text-align: center;
}

.container {
  margin-top: 50px;
}

/* .btn{
   margin: 100px;
   align-items: center;
 } */

.Name {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
}

.Age {
  display: flex;
  flex-direction: row;
}

.label {
  margin-left: 30px;
}

.input {
  margin-left: 40px;
  align-items: center;
}

.btn1 {
  margin-top: 100px;
  background-color: rgba(137, 156, 219, 0.623);
  /* color: rgba(137, 156, 219, 0.623); *//* background-color: rgba(218, 112, 191, 0.658); */
}

.btn2 {
  margin-top: 10px;
}


// miniprogram/pages/registered/registered.js
var arr=new Array()
Page({
  data: {
    name: '',
    age: '',
    answer: arr
  },
  ForName: function (e) {
    this.setData({
      name: e.detail.value
    })
    console.log('ForName :', this.data.name)
  },
  ForAge: function (e) {
    this.setData({
      age: e.detail.value
    })
    console.log('ForAge :', this.data.age)
  },
  onAdd:function(e){
    const db = wx.cloud.database()
    db.collection('user-info2').add({
      data: {
        name: this.data.name,
        age: this.data.age,
        answer: this.data.answer
      },
      success: res => {
        this.setData({
          currentID: res._id
        })
        wx.showToast({
          icon: 'success',
          title:'注册成功!返回登录'
        })
        console.log('注册成功currentID', this.data.currentID)
        wx.navigateBack({
          url: '/pages/index/index?currentID=' + this.data.currentID
        })
        console.log("currentID", this.data.currentID)
      },
      fail: err => {
        console.error('[数据库] [新增记录] 失败：', err)
      }
    })
  }
  
})

<!-- registered.wxml -->
<view class="tab">
  <text class="tab1">用户注册</text>
</view>
<view class="container">
  <view class="message">
    <view class="Name">
      <view class="label">姓名</view>
      <input class="input" bindinput="ForName" name="name" placeholder="请输入姓名" />
    </view>
    <view class="Age">
      <view class="label">年龄</view>
      <input class="input" bindinput="ForAge" name="age" placeholder="请输入年龄" />
    </view>
  </view>
  <view>
    <!-- <button class="btn1" bindtap="btnChange">登录</button> -->
    <button class="btn2" bindtap="onAdd">注册</button>
    <!-- <button class="btn2" bindtap="questionsChange">填写问卷</button> -->
  </view>

</view>

 /* registered.wxss */
 .tab{
      display: flex;
      flex-direction: column;
      width: 90%; 
      height:100px;
      background-color:rgb(137, 156, 219, 0.623);
      margin: 20px 15px 20px 15px;
      font-size: 30px;
      color: #fff;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
 }
  .tab1{
    margin-top: 20px;
   text-align: center;
 }
.container{
  margin-top: 50px;
}
 /* .btn{
   margin: 100px;
   align-items: center;
 } */
 .Name{
   display: flex;
   flex-direction: row;
   margin-bottom: 10px;
 }
 .Age{
  display: flex;
   flex-direction: row
 }
 .label{
   margin-left: 30px;
 }
 .input{
    margin-left: 40px;
    align-items: center;
 }
 .btn1{
   margin-top:100px;
   color: rgba(170, 102, 130, 0.445);
   /* background-color: rgba(218, 112, 191, 0.658); */
   
 }
 .btn2{
   margin-top: 10px;
 }

// detail.js
var ans = new Array(5);
Page({
  data: {
    question: [],
    name: ' ',
    answer: ans,
    id: 0,
    currentID: null
  },
  onLoad: function(options) {
    this.setData({
      name: options.name,
      currentID: options.currentID
    })
     console.log("DetailoptionscurrentID", this.data.currentID)
    // console.log("name", this.data.name, "currentID", this.data.currentID)
    const db = wx.cloud.database()
    db.collection('questions').get({
      success: res => {
        this.setData({
          question: res.data,
        })
        console.log('[questions] [查询记录] 成功: ', res.data)
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '查询记录失败'
        })
        console.error('[数据库] [查询记录] 失败：', err)
      }
    })
  },
  last: function(e) {
    if (this.data.id != 0) {
      this.setData({
        id: this.data.id - 1
      })
    }
  },
  next: function(e) {
    if (this.data.id < 4) {
      this.setData({
        id: this.data.id + 1
      })
    }
  },
  radioChange: function(e) {
    console.log("radioChange", e.detail.value);
  },
  submit: function(e) {
    console.log("id", this.data.id)
    console.log(e.detail.value);
    // var ans = new Array(5);
    var a = e.detail.value.answer;
    var id = this.data.id;
    ans[id] = a;
    this.setData({
      answer: ans,
    })
    console.log('当前的answer数组', this.data.answer);
  },

  //把结果提交到云数据库
  submitAnswerDB: function() {
    const db = wx.cloud.database()
    db.collection('user-info2').doc(this.data.currentID).update({
      data: {
        answer: this.data.answer
      },
      success: res => {
        console.log("答案上传成功！", this.data.answer);
        wx.navigateTo({
          url: '/pages/finalPage/finalPage?currentID=' + this.data.currentID + '&answer=' + this.data.answer + '&name=' + this.data.name + '&age=' + this.data.age
        })
      },
      fail: err => {
        icon: 'none',
        console.error('[数据库] [更新记录] 失败：', err)
      }    
    })
  },
})

<!--miniprogram/pages/detail/detail.wxml-->
<view class="container">
  <view class="text">亲爱的{{name}},感谢您填写问卷！</view>
  <!-- <view class="text">当前ID：{{currentID}}</view> -->
  <swiper class="swiper" current="{{id}}">
    <block wx:for="{{question}}" wx:key="key">
      <swiper-item>
        <form bindsubmit='submit'>
          <view class="weui-cells__title label">第{{item._id}}题、{{item.question}}</view>
          <radio-group class="radio-group" name="answer" bindchange="radioChange">
            <label class='radio'>
              <radio value="{{item.optionA}}" />{{item.optionA}}</label>
            <label class='radio'>
              <radio value="{{item.optionB}}" />{{item.optionB}}</label>
            <label class='radio'>
              <radio value="{{item.optionC}}" />{{item.optionC}}</label>
            <label class='radio'>
              <radio value="{{item.optionD}}" />{{item.optionD}}</label>
          </radio-group>
          <view class="btn-group">
            <button class="btn" form-type="submit" bindtap='last' disabled='{{id==0}}'>上一题</button>
            <button class="btn" form-type="submit" bindtap='next' disabled='{{id==4}}'>下一题</button>
            <button class="btn" form-type="submit" bindtap='submitAnswerDB' disabled='{{id==0}}'>提交</button>
          </view>
        </form>
      </swiper-item>
    </block>
  </swiper>
</view>

/* miniprogram/pages/detail/detail.wxss */

.container {
  margin-top: 50px;
  height: 350px;
}

.btn {
  margin: 20px;
}

.radio {
  display: flex;
  flex-direction: column;
  color: rgb(128, 119, 119);
  font-size: 14px;
  margin-left: 20px;
}

.label {
  color: rgb(46, 43, 43);
}

.radio-group {
  display: flex;
  flex-direction: column;
  font-size: 30rpx;
  text-indent: 14rpx;
  margin-top: 40rpx;
}

.radio {
  display: flex;
  flex-direction: row;
  margin-bottom: 14rpx;
}

.swiper {
  height: 350px;
  display: flex;
  flex-direction: column;
  /* justify-content: flex-start; */
  margin-top: 20px;
}

.btn-group {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  width: 90%;
  margin: auto;
}

.btn {
  background-color: rgba(137, 156, 219, 0.623);
  font-size: 12px;
 
}

.btn-right {
  background-color: rgba(214, 160, 187, 0.555);
  font-size: 12px;
 
}

.btn-left {
  background-color: rgba(214, 160, 187, 0.555);
  font-size: 12px;
 
}


// miniprogram/pages/finalPage.js
const db = wx.cloud.database()
Page({
  data: {
    final: [],
    currentID: null,
    question: [],
    name: null
  },
  onLoad: function(options) {
    this.setData({
      currentID: options.currentID,
      // answer: options.answer,
       name: options.name
    })
     console.log("finalCurrentID", this.data.currentID )
    db.collection('user-info2').where({
      _id:this.data.currentID
    }).get({
      success: res => {
      this.setData({
         final:res.data
      })
        console.log('[数据库] [查询记录] 成功final: ', this.data.final)
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '查询记录失败'
        })
        console.error('[数据库] [查询记录] 失败：', err)
      }
    })
    db.collection('questions').get({
      success: res => {
        this.setData({
          question: res.data
        })
        console.log('[数据库] [查询记录] 成功answer: ', this.data.question)
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '查询记录失败'
        })
        console.error('[数据库] [查询记录] 失败：', err)
      }
    })
  } 
})

<!-- finalpage.wxml -->
<view class="container">

  <view class="one" wx:for='{{final}}' wx:key='{{key}}'>
    <view class="name">您的名字：{{item.name}}</view>
    <view class="age">您的年龄：{{item.age}}</view>
  </view>

  <!-- <view wx:for='{{question}}' wx:key='key'>
    <view class="question">{{item.question}}</view>
  </view> -->
  <view class="two" wx:for='{{final}}' wx:key='key'>
    <view class="option">{{item.answer }}</view>
  </view>
</view>

/* miniprogram/pages/finalPage.wxss */
.con{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
 
 .one{
   margin-left: 40px;
   margin-top: 80px; 
 }
 .name{
   margin-bottom: 15px;
 }
 .age{
    margin-bottom: 50px; 
 }
 .two{
    margin-left: 40px; 
 }
weixin_42885875
关注
  • 0
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序开发 调查问卷
qq_36158551的博客
01-27 1755
开发一个“调查问卷”的案例来学习常用表单组件的使用，收集用户填写胡表单信息提交给服务器，或者从服务器获取数据后显示在表单中。调查问卷分为单选、多选、单行填空、多行填空，选项为必填时候，提交弹出必填项未提交提示。
一个问卷小程序源码.zip
06-06
一个问卷小程序源码.zip
HTML前端代码问卷星仿写（学习使用）
最新发布
2401_83334819的博客
06-01 1104
HTML前端代码问卷星仿写，仅学习交流使用
问卷调查微信小程序源码
ms张的博客
10-11 6271
问卷调查小程序源码 在微信小程序里搜索：问卷调查统计，翻页找到如下图中的小程序可以打开查看 效果如下图： 服务端源码：http://errornoerror.com/question/1586959663051114/ 如需所有源码可以联系下面微信，免费提供 微信号：eeeeazy ...
微信小程序开发 案例二 调查问卷
weixin_43366149的博客
03-02 6231
微信小程序 表单提交本地服务器
微信小程序 教学质量问卷调查 小程序实现
Jing0921的博客
07-16 3317
微信小程序 教学质量问卷调查 小程序实现 界面 功能描述 1.在首页获得openid后，填写按钮生效 2.当未在填写页面提交数据时，在我的页面会提示先去填写 3.对于必选选择题，未填写会提示并不提交数据 4.当填写页面提交数据后，不可再次填写，可以在我的页面进行修改 5.当填写页面提交数据后，我的页面会展示出曾经的填写数据，可以多次修改 浏览小程序（体验版） ...
【微信小程序】问卷调查/答题类小程序实现
热门推荐
实验室小彩笔的博客
06-19 2万+
版权声明：个人原创，转载请注明出处 最近暂时不用忍受学业压力，可以干一些自己想干的事情，由于接的小程序的锅太多，决定好好学习一下小程序，本次主要学习了答题问卷小程序的制作，涉及到题目切换、答案上传以及简单的完成情况判断等场景，本次设计特点是题库与页面分离。 界面设置 首页 答题页面1 答题界面2 功能描述 在主页中点击对应的按钮进入对应的答题页面。 答题界面包括题目、选项、上......
微信小程序之问卷调查
极光时流
01-08 6835
登录界面 login.js // miniprogram/pages/login/login.js Page({ data: { username: null, password: null, currentId:null, }, formLogin: function(e) {//表单提交数据 //判断输入是否为空 if (e.detail...
微信小程序调查问卷
TIANJING_er的博客
05-10 1万+
首先我做的这个是评教系统中调查问卷页面并实现该功能&lt;view class='header'&gt;被评教师：{{teachername}}&lt;/view&gt; &lt;swiper bindchange='swiper_change' current='{{currentid}}'&gt; &lt;block class="center" wx:for="{{paperdetails}...
问卷调查微信小程序-微信原生语言开发
04-21
问卷调查微信小程序-微信原生语言开发 使用微信原生语言+ JS+HTML+CSS开发 ### 主要功能 * 登录/注册 * 用户中心 * 创建/发布问卷 * 问卷分享，快速收集 * 结果分析与统计 * 丰富的问卷调查模板 备注：两种进入...
微信小程序开发-调查问卷-案例实现.pptx
11-28
本案例将深入讲解如何利用微信小程序进行一个调查问卷的开发，涵盖页面设计、表单元素使用以及服务器端接口的搭建。 首先，我们来看【案例实现】中的页面代码。`index.json`文件用于定义页面的全局配置，如导航栏的...
在线调查问卷系统 zhiyi_questionnaire 1.0.9.zip微信小程序模板源码
08-12
在线调查问卷系统 zhiyi_questionnaire 1.0.9.zip微信小程序模板源码
微信小程序Demo：问卷调查
03-15
在“微信小程序Demo：问卷调查”这个项目中，我们将会探讨如何利用微信小程序来实现一个基本的问卷调查功能。 首先，微信小程序的开发涉及到的主要技术包括WXML（微信小程序标记语言）和WXSS（微信小程序样式语言）...
微信小程序开发-调查问卷-案例分析.pptx
11-28
本讲义将围绕“调查问卷”这个案例，深入探讨微信小程序中的表单组件、数据交互和API的使用。 1. **Checkbox组件与Radio组件**： - Checkbox（复选框）：用于多选情况，用户可以勾选多个选项。在微信小程序中，...
微信小程序问卷调查学习-完整项目
04-02
初始化一个空白小程序项目，删除不需要的文件和函数。 我们将从这个项目结构开始开发。 ## 02_static_project 静态页面开发完成时的源代码。 主要写 wxml 和 wxss 做页面结构和样式。 ## 03_render 用 json 结构...
java问卷调查小程序源码
wfuhui的博客
08-09 475
大等于jdk1.8，大于mysql5.5，idea（eclipse），微信开发者工具。代码注释齐全，没有多余代码，适合学习(毕设)，二次开发，包含论文技术相关文档。个人中心显示我的信息（可编辑），我的问卷（可点击到详情，查看自己答题记录）首页显示轮播图以及问卷列表，点击问卷到答题界面，选择选项提交即可。问卷管理：问卷增删改查，以及查看统计。用户管理：查看注册用户信息，及删除。管理员管理：后台管理员增删改查。登录注册（含授权登录）题库管理：题库增删改查。轮播管理：轮播图维护。
【源码更新】活动报名登记预约问卷表单系统微信小程序支持导入导出自定义表单填报字段
湖南随心科技
08-11 743
本源码没加密，支持二次开发，深度优化等多种方案，此项目我们已经有客户做过运营并且反馈还不错，设计，填写以及收集等功能可用于商超问卷调查，会员意见反馈，校园数据收集等场景。我司开发，仅供购买者自己使用，支持二开，不支持二次销售发行，不支持盗卖，已有软著。字段类型支持单选，多选，输入框，下拉，地区选择器，时间选择器，图片上传等.有需要看后台测试的可以联系客服，功能不是很多，但是麻雀虽小该有的都有。一款问卷调查系统，用于日常的问卷调查回收，公众号问卷关联，数据上传等。...
使用微信小程序开发制作一个简易的在线问卷调查应用
吃不胖.
09-22 1081
我们可以在每个 view 中添加一个 text 组件来显示问题的标题，并根据问题的类型添加相应的控件来收集答案。我们首先需要设计应用的界面，包括两个页面：一个是问卷列表页面，用户可以在这个页面看到所有可用的问卷，并可以单击某个问卷来填写它；在我们的应用中，我们需要获取和保存两种不同类型的数据：一个是问卷的元数据，包括每个问卷的标题、描述和创建时间；另一个是问卷的答案，包括每个问题的答案。我们可以使用一个名为 answers 的对象来存储所有的问卷答案，并在用户提交问卷时将其发送给服务器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值