搭建本地服务器

使用node.js（要安装node.js）搭建本地HTTP服务器，在小程序所在目录创建web目录
，并在web目录下打开CMD，初始化项目

npm init -y

然后安装express框架

npm install express --save

安装nodemon监控文件

npm install nodemon -g

在web目录下新建index.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);
});
//服务器内的初始数据
var data={name:'张三',gender:[{name:'男',value:'0',checked:false},{name:'女',value:'1',checked:false},],skills:[{name:'HTML',value:'html',checked:false},{name:'CSS',value:'cs',checked:false},{name:'JavaScript',value:'js',checked:false},{name:'PS',value:'ps',checked:false},],opinion:'测试',};
app.get('/',(req,res)=>{res.json(data);});
//监听3000端口
app.listen(3000,()=>{console.log('server running at http://127.0.0.1:3000');
});

最后使用cmd启动服务器

nodemon index.js

看到server running at http://127.0.0.1:3000，表示启动成功。

新建小程序

（可以自己添加页面，也可以在小程序中的index目录下编写）

创建新的页面check
在check.wxml文件里编写问卷调查表单

<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}}</radio></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}}</checkbox></label></checkbox-group></view><view><text>您的意见：</text><textarea name="opinion" value="{{opinion}}"></textarea></view><button form-type="submit">提交</button></form>
</view>

在check.js文件下编写js代码

 data: {name:'张三',gender:[{name:'男',value:'0',checked:false},{name:'女',value:'1',checked:false},],skills:[{name:'HTML',value:'html',checked:false},{name:'CSS',value:'cs',checked:false},{name:'JavaScript',value:'js',checked:false},{name:'PS',value:'ps',checked:false},],opinion:'测试',},/*** 提交事件*/submit:function(e){wx.request({url: 'http://127.0.0.1:3000/',method:'POST',data:e.detail.value,success:function(res){console.log(res)}})}, /*** 生命周期函数--监听页面加载（获取服务器中的初始表单）*/onLoad: function (options) {var that=thiswx.request({url: 'http://127.0.0.1:3000/',success:function(res){that.setData(res.data)}})},

注意

每次使用小程序的时候都要在服务器目录下进行启动服务器
在web目录下打开cmd，输入

nodemon index.js

最后效果图

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

微信小程序调查问卷案例
微信小程序调查问卷案例通过开发一个"调查问卷"的案例来掌握常用表单组件的使用,以及如何收集用户填写的表单信息提交给服务器和从服务器获取数据后显示在表单中.参考界面如图1所示. 步 ...
（已解决）微信小程序调查问卷所有题放在一个页面上
最近做一个调查问卷的小程序改需求时遇到了一个问题: 要将所有单选题放在一个页面上,我用了双层循环嵌套将每道题的下标以及每个题对应的选项下标循环出来但是每个单选的radioChange绑定事件都是同一 ...
微信小程序做问卷——前端部分(生成问卷)
文章目录实现效果界面功能数据功能各个组件的实现右上角的蓝色加号问卷结构部分以单选部分举例每个题型的灰色加号每个题型的删除按钮每个选项的删除按钮每个输入的数据记录全部代码 que ...
微信小程序做问卷——前端部分(回答问卷)
文章目录实现效果实现单选部分多选部分问答部分全部代码 item.wxml item.wxss item.js 生成问卷的部分参考微信小程序做问卷--前端部分(生成问卷) 实现效果界面如 ...
微信小程序调查报告（二）-账号注册篇
2019独角兽企业重金招聘Python工程师标准>>> 这个真的可以吐槽下了.注册微信小程序账号实在是麻烦的很.首先个人用户时不能注册的.那么企业用户,注册的时候就要一大堆资料 ...
2021-11-03小程序调查问卷及搭建服务器后台案例
小程序案例[调查问卷] 实现的步骤: 填写表单数据提交发送到服务器后台数据渲染到页面页面的效果图: 打开微信开发者工具--新建项目--填写项目名称和选择目录路径--点测试号--确定--就会打开页 ...
毕业设计 -- 微信小程序选题大全（一）
文章目录小程序毕设选题推荐选题建议创新性不要给自己挖坑选题推荐最后小程序毕设选题推荐 Hi,这里是丹成学长,这篇文章给各位同学分享小程序毕设如何选题,对毕设开发,开题等有不清楚的都可以 ...
微信小程序做一个调查问卷
用微信小程序做了一个调查问卷功能描述: 用户一天只能进行一次问卷调查=>用户登录功能获取用户意见信息题目分为单选题.多选题.简答题 *设置有其他选项,可进行手动输入选项多选题选择个数设置 ...
记一次微信小程序云开发实例（简单调查问卷）
y1s1,十分想吐槽一下微信小程序,文档写不全,开发方式复杂. 顺带吐槽老师讲课就提个概念. 相关的文档可参考https://developers.weixin.qq.com/community/bu ...
微信小程序满意度调查问卷答题类小程序实现
最近暂时不用忍受学业压力,可以干一些自己想干的事情,由于接的小程序的锅太多,决定好好学习一下小程序,本次主要学习了答题问卷小程序的制作,涉及到题目切换.答案上传以及简单的完成情况判断等场景,本次设计特 ...

微信小程序-调查问卷

调查问卷

搭建本地服务器

新建小程序

注意

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

最新文章

热门文章