微信小程序——调查问卷案例

文章目录

案例链接
页面效果
页面设计
页面样式
页面逻辑
后端代码（node.js）

案例链接

https://download.csdn.net/download/weixin_45525272/16242305

页面效果

页面设计

<view class="container"><form bindsubmit="submit"><view><text>姓名：</text><input name="name" value="{{name}}" /></view><view><text>性别：</text><radio-group name="gender"><label wx:for="{{gender}}" wx:key="value"><radio value="{{item.value}}" checked="{{item.checked}}" /> {{item.name}}</label></radio-group></view><view><text>专业技能：</text><checkbox-group name="skills"><label wx:for="{{skills}}" wx:key="value"><checkbox value="{{item.value}}" checked="{{item.checked}}" /> {{item.name}}</label></checkbox-group></view><view><text>您的意见：</text><textarea name="opinion" value="{{opinion}}" /></view><button form-type="submit">提交</button></form>
</view>

页面样式

.container {margin: 50rpx;
}view {margin-bottom: 30rpx;
}input {width: 600rpx;margin-top: 10rpx;border-bottom: 2rpx solid #ccc;
}label {display: block;margin: 8rpx;
}textarea {width: 600rpx;height: 100rpx;margin-top: 10rpx;border: 2rpx solid #eee;
}

页面逻辑

前端发送请求到后端，后端传回 json 数组赋值给 data

// pages/index/index.js
Page({/*** 页面的初始数据*/data: {},/** * 生命周期函数--监听页面加载*/onLoad: function(options) {wx.request({url: 'http://127.0.0.1:3000/',success: res => {console.log(res.data)this.setData(res.data)}})},submit: function(e) {wx.request({method: 'post',url: 'http://127.0.0.1:3000/',data: e.detail.value,success: function(res) {console.log(res)}})}
})

后端代码（node.js）

直接 node index.js 启动即可（node.js不会的小伙伴可以参考我的node.js专栏 https://blog.csdn.net/weixin_45525272/category_10080631.html?spm=1001.2014.3001.5482）

const express = require('express')
const bodyParser = require('body-parser')
const app = express()
app.use(bodyParser.json())// 处理POST请求
app.post('/', (req, res) => {console.log(req.body)res.json(req.body)
})var data = {name: '张三',gender: [{ name: '男', value: '0', checked: true },{ name: '女', value: '1', checked: false }],skills: [{ name: 'HTML', value: 'html', checked: true },{ name: 'CSS', value: 'css', checked: true },{ name: 'JavaScript', value: 'js', checked: true },{ name: 'Photoshop', value: 'ps', checked: false },],opinion: '测试'
}// 处理GET请求
app.get('/', (req, res) => {res.json(data)
})// 监听3000端口
app.listen(3000, () => {console.log('server running at http://127.0.0.1:3000')
})

微信小程序——调查问卷案例相关推荐

微信小程序调查问卷案例
微信小程序调查问卷案例通过开发一个"调查问卷"的案例来掌握常用表单组件的使用,以及如何收集用户填写的表单信息提交给服务器和从服务器获取数据后显示在表单中.参考界面如图1所示. 步 ...
（已解决）微信小程序调查问卷所有题放在一个页面上
最近做一个调查问卷的小程序改需求时遇到了一个问题: 要将所有单选题放在一个页面上,我用了双层循环嵌套将每道题的下标以及每个题对应的选项下标循环出来但是每个单选的radioChange绑定事件都是同一 ...
微信小程序入门教程+案例demo
微信小程序入门教程+案例demo 尊重原创,转载请注明出处:原文查看惊喜更多 http://blog.csdn.net/qq137722697 首先摆在好姿态,--微信小程序开发也就那么回事.你只需要 ...
微信小程序做问卷——前端部分(生成问卷)
文章目录实现效果界面功能数据功能各个组件的实现右上角的蓝色加号问卷结构部分以单选部分举例每个题型的灰色加号每个题型的删除按钮每个选项的删除按钮每个输入的数据记录全部代码 que ...
image 微信小程序flex_微信小程序flex布局案例(1)
微信小程序 flex 布局案例一前言最近在学习微信小程序时,看到很多布局都用到了 flex 布局,其实 flex 布局学习过好多东西不用就忘记了,这次用上就只得再去看了,争取学会.下面是我做的简单 ...
微信小程序AR应用案例盘点（时尚行业）
在上一篇微信小程序AR行业应用分析中,我对快消行业的微信小程序AR经典案例与解决的痛点问题,结合目前新扩展的微信小程序AR能力进行了盘点. 今天我们则集中在另一个把视觉呈现做到极致的行业--时尚行业, ...
微信小程序做问卷——前端部分(回答问卷)
文章目录实现效果实现单选部分多选部分问答部分全部代码 item.wxml item.wxss item.js 生成问卷的部分参考微信小程序做问卷--前端部分(生成问卷) 实现效果界面如 ...
上传声音微信小程序_SpringBoot开发案例之微信小程序录音上传
前言书接上回的<SpringBoot开发案例之微信小程序文件上传>,正常的业务流程是,口语测评需要学生通过前端微信小程序录入一段音频,通过调用第三方音频处理服务商进行评分,然后服务端对原 ...
微信小程序——模拟时钟案例
文章目录案例效果图前导知识:canvas 代码部分案例效果图实时更新,因为我当时是六点多前导知识:canvas 微信小程序中的canvas画布(内容过多,请查看我整理的另一篇博客):链接:h ...
使用高德地图微信小程序SDK开发案例-输入提示（附源码）
闲来无事写一篇使用高德地图的微信小程序SDK开发应用的实例. 接下来先看需求: 我们要做的是,根据用户输入的关键词,给出相应的提示信息,列表中显示地方的名称,地方的详细地址以及对应的经纬度坐标. 当然 ...

微信小程序——调查问卷案例

文章目录

案例链接

页面效果

页面设计

页面样式

页面逻辑

后端代码（node.js）

微信小程序——调查问卷案例相关推荐

最新文章

热门文章