微信小程序案例：问卷调查
来源：我的学习笔记（动态数据）
先在有node.exe文件夹下面创建一个TXT文本文件进行必要的编辑后改名字为index.js
index.js的内容为以下代码：
const express = require('express') //加载express模块
const bodyParser = require('body-parser') //加载解析客户端发送的实体内容
const app = express() //创建实例
app.use(bodyParser.json()) //使用json格式
//处理POST请求
app.post('/',(req,res)=>{
console.log(req.body)
res.json(req.body) //响应回浏览器
})
// 表单数据绑定1：data中保存表单的默认数据
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:false},
{name:'Photoshop',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') //监听成功输出信息
})
2.在微信小程序开发软件内对index.wxml主页进行设计
<view class="container">
<form bindsubmit="submit">
<view>
<text>姓名：</text>
<input name="name" value="{{name}}"/>
</view>
<view>
<text>性别：</text>
<radio-group name="gender">
<!-- <label><radio value="0" checked/>男</label>
<label><radio value="1" />女</label> -->
<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><checkbox value="html" checked/>HTML</label>
<label><checkbox value="css" checked/>CSS</label>
<label><checkbox value="js"/>JavaScript</label>
<label><checkbox value="ps"/>Photoshop</label> -->
<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="测试"/>
</view>
<button form-type="submit">提交</button>
</form>
</view>
3.在文件夹的输入框输入cmd回车
4.进入命令窗口输入nodemon index.js(注意nodemon与index之间是有空格的)
成功运行效果如下：
5.其他页面
index.wxss的代码如下
.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;
}
