微信小程序之问卷调查

最新推荐文章于 2024-07-26 21:12:43 发布

TzerQ

最新推荐文章于 2024-07-26 21:12:43 发布

阅读量6.8k

点赞数 8

分类专栏：微信小程序开发

本文链接：https://blog.csdn.net/qq_42280544/article/details/103892608

版权

本文详细介绍了如何使用微信小程序开发一套完整的问卷调查应用，包括登录和注册界面的实现，主界面展示问题的逻辑，以及用户个人选择结果的展示。涉及到的文件包括js、wxml和wxss等。

摘要由CSDN通过智能技术生成

在这里插入图片描述

登录界面

// miniprogram/pages/login/login.js
Page({
   

  data: {
   
    username: null,
    password: null,
    currentId:null,
  },
  formLogin: function(e) {
   //表单提交数据
    //判断输入是否为空
    if (e.detail.value.inputname == "" | e.detail.value.inputpass == "") {
   
      wx.showToast({
   
        icon: 'none',
        title: '请输入有效值',
      })
    } else {
   
      const db = wx.cloud.database()
      var username = e.detail.value.inputname
      var password = e.detail.value.inputpass
      db.collection('user_info').where({
   //查询用户信息数据库
        username: username,
        password: password
       
      }).get({
   
        success: res => {
   

          if (res.data.length != 0) {
   
            wx.showToast({
   
              title: '登录成功',
            })
            this.data.currentId = res.data[0]._id
            this.data.username=res.data[0].username
            wx.navigateTo({
   
              //跳转到投票界面，同时将该用户id和用户名传到index界面
              url: '/pages/home/home?currentId=' + this.data.currentId+"&username="+this.data.username
            })
           
            console.log('Login成功: ', res.data)
          } else {
   
            wx.showToast({
   
              icon: 'none',
              title: '登录失败',
            })
            console.log('Login失败: ', res)
          }
        },

        fail: err => {
   
          wx.showToast({
   
            icon: 'none',
            title: '数据库连接失败'
          })
          console.error('数据库连接失败：', err)
        }
      })
    }
    console.log("submit: ", e.detail.value)
  },

  btnRegister: function(e) {
   //点击注册界面
    wx.navigateTo({
   
      url: '/pages/register/register'
    })
  },

})

<view class="content">
<image class="imag"  src="cloud://cloud-awkue.636c-cloud-awkue-1300500689/questionnaire/login.png" style="height:300rpx;width:40rpx；"></image >
  <!-- <view class="header">Questionnaire Survey</view> -->
  <form bindsubmit="formLogin">
    <view class="weui-cells weui-cells_after-title">
      <view class="user_pass">
        <!-- <view class="weui-cell__hd">
          <view class="weui-label">用户名</view>
        </view> -->
        <view class="weui-cell__bd username">
          <input class="weui-input " placeholder="username" name="inputname" value="{
    {username}}" />
        </view>
      </view>
      <view class="user_pass">
        <!-- <view class="weui-cell__hd">
          <view class="weui-label">密码</view>
        </view> -->
        <view class="weui-cell__bd password">
          <input class="weui-input" placeholder="password" type="password"  name="inputpass" value="{
    {password}}" />
        </view>
      </view>
    </view>
    <view class="weui-btn-area">
      <button class="btnlogin" type="primary" form-type="submit">登录</button>
      <button class="btnregister" type="default" bindtap="btnRegister">注册</button>
    </view>
  </form>
</view>

/* miniprogram/pages/login/login.wxss */

.content {
   
  background-color: white;
}

.header {
   
  /* margin: 10 auto; */
  font: 2400px;
  font-family: Arial;
  font-size: 40px;
  text-align: center;
  color: rgb(24, 223, 24);
}
.radio {
   
margin-bottom: 
        14rpx;
}
.username{
   
 left: 200px;
top: 300px;
width: 300px;
height: 50px;
border-radius: 0px;
background-color