调查问卷–案例分析

开发一个“调查问卷”的案例来学习常用表单组件的使用，收集用户填写胡表单信息提交给服务器，或者从服务器获取数据后显示在表单中。

1.1 编写表单页面

在微信开发者工具中，创建新项目：pages/index/index.wxml
具体代码如下：

<view class="container"><form bindsubmit="submit"><view><text>姓名：</text><input name="name" value="小脆筒"/></view><view><text>性别：</text><radio-group name="gender"><label><radio value="0" checked/>男</label><label><radio value="1"/>女</label></radio-group></view><view><text>专业技能：</text><checkbox-group name="skills"><label><checkbox value="html"/>HTML</label><label><checkbox value="css"/>CSS</label><label><checkbox value="js"/>JavaScript</label><label><checkbox value="ps"/>Photoshop</label></checkbox-group></view><view><text>您的意见：</text><textarea name="opinion" value="测试" /></view><button form-type="submit">提交</button></form>
</view>

在pages/index/index.css中文件中编写样式，具体代码如下：

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

在pages/index/index.json文件中设置导航栏标题，具体代码如下：

{"navigationBarTitleText": "调查问卷"
}

1.2 服务器数据交互

关闭验证

在pages/index/index.js，代码如下：

Page({submit: function(e) {wx.request({method:'post',url: 'http://127.0.0.1:3000/',data: e.detail.value,success:function(res){console.log(res)}})}
})

server.js代码如下：

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)
})//监听3000端口
app.listen(3000,() =>{console.log('server running at http://127.0.0.1:3000')
})

效果实现如下：

如果觉得本文写得不错，顺手点个赞，感谢老铁！

1.1微信小程序做调查问卷相关推荐

微信小程序满意度调查问卷答题类小程序实现
最近暂时不用忍受学业压力,可以干一些自己想干的事情,由于接的小程序的锅太多,决定好好学习一下小程序,本次主要学习了答题问卷小程序的制作,涉及到题目切换.答案上传以及简单的完成情况判断等场景,本次设计特 ...
微信小程序实现调查问卷表单
微信小程序问卷调查表单功能演示: 20220408_202155 index.wxml <view id="container-top"> <view id=& ...
微信小程序做一个调查问卷
用微信小程序做了一个调查问卷功能描述: 用户一天只能进行一次问卷调查=>用户登录功能获取用户意见信息题目分为单选题.多选题.简答题 *设置有其他选项,可进行手动输入选项多选题选择个数设置 ...
微信小程序做问卷——前端部分(生成问卷)
文章目录实现效果界面功能数据功能各个组件的实现右上角的蓝色加号问卷结构部分以单选部分举例每个题型的灰色加号每个题型的删除按钮每个选项的删除按钮每个输入的数据记录全部代码 que ...
微信小程序做问卷——前端部分(回答问卷)
文章目录实现效果实现单选部分多选部分问答部分全部代码 item.wxml item.wxss item.js 生成问卷的部分参考微信小程序做问卷--前端部分(生成问卷) 实现效果界面如 ...
python搭建微信小程序卖货要收费用吗_个人的微信小程序做店铺收费吗?要收多少...
微信小程序受到了广大用户的使用和喜爱,这种不用下载的应用,让人们能更快的开启和关闭应用,不用担心自己的内存不够.那么今天我们来了解下,个人的微信小程序做店铺收费吗?要收多少? 现在许多用了许多小程序了 ...
微信小程序做店铺收费吗？【微信小程序店铺】
很多商家企业现在都已经有自己的微信小程序店铺了,还没有的微信小程序店铺的商家企业也是计划开通自己的微信小程序店铺,那么对于他们来说,除了要知道怎么做微信小程序店铺,还需要了解微信小程序做店铺收费吗这个 ...
微信小程序做一个圆形图片旋转可以控制开始和结束-音乐播放器的图片旋转功能
微信小程序做一个圆形图片旋转可以控制开始和结束 1.在 WXML 文件中添加一个标签,并设置图片的 src 和样式,并为其绑定一个 animation 用来控制旋转动画. <image src ...
微信小程序做一个调查问卷（二）
即将不定期的开放代码核心代码呈现源码下载在微信小程序如何展示富文本编辑器设置的内容多使用缓存技术,防止过多无效的访问题目分为单选题.多选题.简答题设置有其他选项,可进行手动输入选项多选题 ...
使用微信小程序做一个简易的下拉框，无动画效果，纯原生写法（下拉列表框）
最近在开发的时候,需要使用下拉的效果,但是之前并没有进行书写过,今天做一个简单的demo,来记录一下微信小程序开发的下拉框效果. 微信小程序和jquery最大的区别就是是否操作dom, 微信小程序无需 ...

1.1微信小程序做调查问卷

调查问卷–案例分析

1.1 编写表单页面

1.2 服务器数据交互

效果实现如下：

1.1微信小程序做调查问卷相关推荐

最新文章

热门文章