微信小程序之問卷調查

原創 极光时流 2020-02-21 06:00

在這裏插入圖片描述

登錄界面

login.js

// 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'
    })
  },

})

login.wxml

<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>

login.wxss

/* 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: rgba(246, 251, 246, 0.2);
color: rgba(136, 136, 136, 1);
font-size: 25px;
text-align: center;
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
font-family: Roboto;
border: 1px solid rgba(255, 255, 255, 0);
}
.password{
  left: 200px;
top: 400px;
width: 300px;
height: 50px;
border-radius: 0px;
background-color: rgba(249, 246, 246, 0.3);
color: rgba(136, 136, 136, 1);
font-size: 25px;
text-align: center ;
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
font-family: Roboto;
border: 1px solid rgba(255, 255, 255, 0);
}
.btnlogin{

margin: 10px;
opacity: 0.78;
border-radius: 5px 5px 5px 5px;
background-color: rgba(26, 173, 25, 1);
color: rgba(51, 46, 46, 1);
font-size: 25px;
text-align: center;
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
font-family: Roboto;
border: 1px solid rgba(5, 5, 5, 0.08);
}

.btnregister{

margin: 20px;
border-radius: 5px 5px 5px 5px;
background-color: rgba(26, 173, 25, 1);
color: rgba(16, 16, 16, 1);
font-size: 25px;
text-align: center;
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
font-family: Roboto;
font-style: normal;
border: 1px solid rgba(5, 5, 5, 0.08);
}

.user_pass{
  margin: 15px  10px 15px 10px;
}

在這裏插入圖片描述

註冊界面

register.js

// miniprogram/pages/register/register.js
var arr=new Array(5)
Page({
  data: {
    username: null,
    password1: null,
    password2: null,
    currentId:null,
    resu:arr,
    salt:"7db92494758df7d0f0a4f39162a48f4",
  },

  formLogin: function(e) {
    if (e.detail.value.inputname == "" | e.detail.value.inputpass == "" | e.detail.value.inputpass2=="") {//判斷用戶輸入是否爲空
      wx.showToast({
        icon: 'none',
        title: '請輸入有效值',
      })
    }
    else if (e.detail.value.inputpass1 != e.detail.value.inputpass2){//判斷用戶輸入註冊密碼是否一致
      wx.showToast({
        icon: 'none',
        title: '密碼不一致！',
      })
    } 
    else {
      const db = wx.cloud.database()
      var username = e.detail.value.inputname
      var password1 = e.detail.value.inputpass1
      var passwor2 = e.detail.value.inputpass2
      
      const _ = db.command
      db.collection('user_info').add({//將用戶存入user_info數據庫
        data: {
          username: username,
          password: password1,
          result:this.data.resu,//結果數組
          salt:this.data.salt
        },
        success: res => {
          wx.showToast({
            title: '用戶註冊成功！',
          })
          this.data.currentId = res._id
          this.data.username = e.detail.value.inputname
          wx.navigateTo({
            url: '/pages/home/home?currentId=' + this.data.currentId + "&username=" + this.data.username//將用戶id和用戶名傳到index界面
          })
          console.log('用戶 _id: ', this.data.currentId)
          console.log('用戶名: ', this.data.username)
          console.log('用戶註冊成功，記錄 _id: ', res._id)
        },
        fail: err => {
          wx.showToast({
            icon: 'none',
            title: '用戶註冊失敗！'
          })
          console.error('用戶註冊失敗：', err)
        }
      })
    }
    console.log("submit: ", e.detail.value)
  }

})

register.wxml

<view class="content">
<image class="imag"  src="cloud://cloud-awkue.636c-cloud-awkue-1300500689/questionnaire/register.png" style="height:150px;width:120px；"></image >
  <form bindsubmit="formLogin">
    <view class="weui-cells weui-cells_after-title">
      <view class="user_pass ">
       
        <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__bd username">
          <input class="weui-input" placeholder="password" type="password" name="inputpass1" value="{{password1}}" />
        </view>
      </view>
      <view class="user_pass ">
     
        <view class="weui-cell__bd username">
          <input class="weui-input" placeholder="confirm" type="password" name="inputpass2" value="{{password2}}" />
        </view>
      </view>
    </view>
    <view class="weui-btn-area">
      <button class="btnregister" type="primary" form-type="submit">確認註冊</button>
      
    </view>
  </form>
</view>

register.wxss

/* miniprogram/pages/register/register.wxss */

.content {

  background-color: white;
}

.header {
 
  font: 2400px;
  font-family: Arial;
  font-size: 40px;
  text-align: center;
  color: rgb(24, 223, 24);
}

.btnregister {

  margin: 20px;
  border-radius: 5px 5px 5px 5px;
  background-color: rgba(26, 173, 25, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 25px;
  text-align: center;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
  font-family: Roboto;
  font-style: normal;
  border: 1px solid rgba(5, 5, 5, 0.08);
}

.user_pass {
  margin: 15px 10px 15px 10px;
}

.username {
  left: 200px;
  top: 300px;
  width: 300px;
  height: 45px;
  border-radius: 0px;
  background-color: rgba(246, 251, 246, 0.2);
  color: rgba(136, 136, 136, 1);
  font-size: 25px;
  text-align: center;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
  font-family: Roboto;
  border: 1px solid rgba(255, 255, 255, 0);
}

.img {
  display: flex;
  justify-content: center;
}

在這裏插入圖片描述
在這裏插入圖片描述

主界面

home.js

//index.js
const app = getApp()
var results = new Array(5)
Page({
  data: {
    user: null,
    cu_id: null, 
    subminted: 0,
    resu: results,
    problem: null,
  },

  onLoad: function(options) {
    this.setData({//獲取上一個界面傳過來的值（login.js和register.js）
      user : options.username,
      cu_id : options.currentId,
    })
    console.log(' this.data.user:', this.data.user, " this.data.cu_id ", this.data.cu_id)
    this.findProblem();
  },
  
  radioChange: function(e) {
    var id = e.target.dataset.id;//獲取index.wxml中的data-id數據
    console.log(id);
    this.data.resu[id] = e.detail.value//將前端的對應題目選項選擇的答案放到指定數組位置

    console.log('radio發生change事件，攜帶value值爲：', e.detail.value, " ", this.data.resu)

  },

  
  findProblem: function(e) {
    const db = wx.cloud.database()
    db.collection('problem').doc("7799745c5e02d07306bb1ed00c001852").get({//在problem數據庫中查找題目，並將題目賦值給problem數組
      success: res => {
        this.setData({
          problem: res.data.qnaire,
        })
        this.data.probelm = res.data.qnaire
        console.log('數據庫[this.data.problem]查詢記錄 成功: ', this.data.problem)
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '查詢記錄失敗'
        })
        console.error('數據庫[problem]查詢記錄 失敗：', err)
        console.log('數據庫[problem]查詢記錄 成功: ', this.data.problem)
      }
    })
  },

  btnSubmit: function() {//點擊按鈕，判斷各個題目是否被選擇
    if (this.data.resu[0] == null) {
      wx.showToast({
        icon: 'none',
        title: '請你填寫完整！'
      })
    } else if (this.data.resu[1] == null) {
      wx.showToast({
        icon: 'none',
        title: '請你填寫完整！'
      })
    } else if (this.data.resu[2] == null) {
      wx.showToast({
        icon: 'none',
        title: '請你填寫完整！'
      })
    } else if (this.data.resu[3] == null) {
      wx.showToast({
        icon: 'none',
        title: '請你填寫完整！'
      })
    } else {
      wx.showToast({
        title: '提交成功！'
      })
      const db = wx.cloud.database()

      db.collection('user_info').doc(this.data.cu_id).update({//在user_info查詢對應用戶,並將答案存入數據庫中的result數組
        data: {
          result: this.data.resu
        },
        success: res => {
          wx.showToast({
            title: '更新記錄成功',
          })
          wx.navigateTo({
            url: '/pages/result/result?currentid=' + this.data.cu_id + "&username=" + this.data.user
          })
          console.log('this.data.cu_id: ', this.data.cu_id)
        },
        fail: err => {
          icon: 'none',
          console.error('[數據庫] [更新記錄] 失敗：', err)
        }
      })
    }
  },

})

home.wxml

<view class="weui-cells__title title">用戶{{user}}</view>
<view class="content">
  <view wx:for="{{problem}}" wx:for-index="idx" wx:for-item="item">
    <view class="weui-cells__title  title2">{{item.question}}</view>
    <view class="weui-cells weui-cells_after-title">
      <radio-group bindchange="radioChange" data-id="{{idx}}">
        <label class='radio'>
          <radio value="A" color='#1AE694' />{{item.option.a}}</label>
        <label class='radio'>
          <radio value="B" color='#1AE694' />{{item.option.b}} </label>

        <label class='radio'>
          <radio value="C" color='#1AE694' />{{item.option.c}} </label>

        <label class='radio'>
          <radio value="D" color='#1AE694' />{{item.option.d}} </label>
      </radio-group>
    </view>
  </view>
  <view class="weui-btn-area btn">
    <button class="weui-btn" type="primary" bindtap="btnSubmit">確定</button>
  </view>
</view>

porblem.json(數據庫中的題目)

{"_id":"7799745c5e02d07306bb1ed00c001852","_openid":"obiEw5d4azJbqP8P6EzX7dIvbYWE","qnaire":[{"option":{"a":"非常喜歡","b":"喜歡","c":"一般","d":"不喜歡"},"question":"1. 你喜歡編程嗎?"},{"question":"2. 你喜歡那個編程語言?","option":{"a":"C","b":"Python","c":"Java","d":"C#"}},{"option":{"a":"興趣愛好","b":"工作需要","c":"前景廣闊","d":"薪資優厚"},"question":"3. 你爲什麼喜歡編程?"},{"option":{"c":"VC++","d":"VS","a":"Sublime","b":"Pycharm"},"question":"4. 你喜歡那種編程軟件?"},{"question":"5. 編程中得到了什麼?","option":{"c":"工資高了","d":"身體虛了","a":"髮際線高了","b":"時間少了"}}]}

home.wxss

/**index.wxss**/

page {
  background: #f6f6f6;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.content{
  background:#f6f6f6;
}

.title{
color: black;
font-size: 20px;
font-style:Arial; 
font: Helvetica;
text-align: center;
}

.title2{
color: black;
font-size: 20px;
font-style:Arial; 
font: Helvetica;
text-align: left;
}
.user_info{
color: black;
font-size: 20px;
font: Arial;
font-style:normal; 
text-align: center;
}
.btn{
  margin: 15px
}

.radio{
  display: flex
}

在這裏插入圖片描述

個人選擇結果頁面

result.js

// miniprogram/pages/ranking/ranking.js
var arr = new Array(5)
Page({

  data: {
    problem: arr,
    username:null,
    user_pro:null,
    result:arr,
    cu_id:null
  },

  onLoad: function(options) {
    
    this.setData({
      cu_id : options.currentid,
      username:options.username
    })
    this.probleQuery()
    this.resultQuery()
    
  },

  probleQuery: function() {
    const db = wx.cloud.database()
    db.collection('problem').doc("7799745c5e02d07306bb1ed00c001852").get({//在problem數據庫中查找題目，並將題目賦值給problem數組
      success: res => {
        this.setData({
          problem: res.data.qnaire
        })
        console.log('數據庫[res.data.qnaire] 查詢記錄 成功: ', res.data)
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '查詢記錄失敗'
        })
        console.error('[數據庫] [查詢記錄] 失敗：', err)
      }
    })
  },

  resultQuery: function() {
    const db = wx.cloud.database()
    db.collection('user_info').doc(this.data.cu_id).get({//查詢user_info數據庫，將對應id和username下的答案結果存入result和username
      success: res => {
        this.setData({
          result: res.data.result,
          username:res.data.username,
        })
        console.log('數據庫[res.data.result] 查詢記錄 成功: ', res.data)
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '查詢記錄失敗'
        })
        console.error('[數據庫] [查詢記錄] 失敗：', err)
      }
    })
  },

})

result.wxml

<view class="weui-cells__title title">{{username}}個人結果</view>
<view class="content">
  <view wx:for="{{problem}}" wx:for-index="idx" wx:for-item="item">
    <view class="weui-cells__title  title2">{{item.question}}</view>
    <view class="weui-cells weui-cells_after-title">
      <radio-group wx:for="{{result}}" wx:for-index="idx2">
        <label class='radio' wx:if="{{idx==idx2}}">
          <radio checked="True" color='#1AE694' />{{item}}</label>
      </radio-group>
    </view>
  </view>
</view>

result.wxss

/* miniprogram/pages/ranking/ranking.wxss */
.title{
color: black;
font-size: 20px;
font: Arial;
font-style:normal; 
text-align: center;
}
.radio{
  display: flex
}
.title2{
color: black;
font-size: 20px;
font: Arial;
font-style:normal; 
text-align: left;
}
極光時流
發佈了24 篇原創文章 · 獲贊 120 · 訪問量 3萬+
私信 關注
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

【微信小程序開發】（轉）微信小程序實現banner圖輪播（動態獲取數據），自動獲取圖片高度

效果； indicator-active-color="#007aff"//當前選中的指示點顏色 js: Page({ data: { //-----------模擬banner圖----------- i

广州余文乐 2020-06-28 23:48:03

【微信小程序開發】（8）view、ext標籤和圖片image標籤

view屬性： text標籤 代碼； image標籤： 代碼： 參數mode任意改

广州余文乐 2020-06-28 22:49:09

微信小程序騰訊雲實時語音轉寫

需求:語音實時轉換文字 步驟1： 首先我們要添加騰訊雲智能語音插件 步驟2： 插件文檔地址： https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx3e17776051baf153

前端_李嘉豪 2020-07-05 20:19:52

微信小程序&three.js之自轉的地球

最近有客戶需求在小程序裏面搞一個自轉的地球，之前看過Three.js在微信小程序的支持方案;https://developers.weixin.qq.com/community/develop/article/doc/00066c4b23

agax0312 2020-07-05 18:39:41

微信小程序表單顯示上次填寫內容 緩存實現input回填

  表單信息填寫一次,下次如果無需修改不必再填,直接顯示.. 用wx.getStorageSync(KEY)來判斷本地緩存，用wx.setStorageSync(KEY,DATA)來設置緩存，用input組件的bindinput來監聽用戶

guochanof 2020-07-04 20:53:08

java微信小程序授權 獲取用戶信息、獲取openid和session_key 獲取用戶unionId、(用戶數據的簽名驗證和加解密)JAVA版

更新: 在18年4月25日小程序做了一次更新,小程序授權不再支持直接彈框獲取用戶信息授權了 微信小程序授權 獲取用戶信息裏也做了說明 以下代碼也已經做了更改 ----------------------------------------

guochanof 2020-07-04 20:53:08

微信退款拋錯javax.crypto.BadPaddingException: Given final block not properly padded

    我是java後臺，微信退款的時候 遇到這個問題 檢查發現是加載證書的時候密碼錯誤造成的。 KeyStore keyStore = KeyStore.getInstance("PKCS12"); //ce

w1140486999 2020-07-04 10:03:41

微信小程序開發之『頂部導航』特效

之前Android開發時，頂部導航用到viewPage,微信小程序裏想要達到同樣的效果，可用swiper來實現；先看效果圖 上代碼： 1.swipe

BlochCoding 2020-07-04 03:36:55

小程序開發.雲函數

雲函數 雲函數需要在nodejs下運行 所以需要安裝node.js node安裝:上官網下載長期支持版本,一步步安裝即可 新建雲函數 在雲開發上面建雲函數如下 然後在本地新建雲函數:如下 安裝wx-server-sdk 新建完

胡老大的唯一大老婆 2020-07-04 01:05:05

微信小程序開發--“雲開發開通問題”及“部署雲函數調用失敗解決方法”與“如何成功獲取openid”

昨天下午真是一個魔幻的下午~哇，哭了！ 昨天下午本來元氣滿滿的我興致勃勃的開始了我的微信小程序開發之旅，然鵝 “雲開發開通報錯”、“部署雲函數調用失敗” 等一系列問題把我搞的焦頭爛額，當時那個心情真的是 — — 啊！我要如何去形容

雾里看花花里看雾 2020-06-30 06:03:06

0基礎學會|微信小程序下載-預覽-PDF|Word|XLS文檔文件

前言 我們經常需要打開各種文檔，無論是學習還是工作中，電子書一大把，怎麼在小程序上打開閱讀呢？ 學小程序，找豬哥就對了。 js核心代碼： * 下載文件並預覽 */ readPdf(e){ console.log(e);

不知火猪 2020-06-29 15:38:58

零基礎學微信小程序雲開發|獲取用戶openid

前言 現在微信小程序越來越火，本着幫助每個人都能學會小程序的態度，把我所學知識免費分享給大家，希望對你有所幫助，另外需要做公衆號、小程序的客戶可以聯繫我 現在，小編準備將這些知識免費分享給大家，如果另有需要可以聯繫我。 一：創建f

不知火猪 2020-06-29 15:38:58

0基礎學微信小程序雲開發|分享配置和攜帶參數分享

前言 微信小程序的每個頁面都可以設置分享，分享很簡單，有區分右上角的直接分享和點擊按鈕分享 onShareAppMessage: function (res) { // 右上角分享 let

不知火猪 2020-06-29 15:38:58

不知火豬|0基礎學微信小程序雲開發|觸發雲函數

前言 利用雲開發定時發送消息，怎麼做呢？微信小程序爲我們提供了一個接口來，實現雲函數的出發，也就打通了外部程序調用微信雲開發的“任督二脈” 觸發雲函數 接口地址 POST https://api.weixin.qq.com/tcb

不知火猪 2020-06-29 15:38:58

微信小程序 official-account 關注微信公衆號組件

official-account組件說明 用戶掃碼打開小程序時，開發者可在小程序內配置公衆號關注組件，方便 用戶快捷關注公衆號，可嵌套在原生組件內。 先說明一個重點啊：想使用這個組件，小程序基礎庫要在2.3.0及以上，要 不然是不

不知火猪 2020-06-29 15:38:58