微信小程序开发 案例二 调查问卷

第一步:主界面代码

<view >
<form bindsubmit="submit">

<view>
<text>姓名:</text>
<input name="张三" value = "张三"/>
</view>

<view>
<text>性别:</text>

<radio-group name="gender">
<label ><radio value="0" checked>男</radio></label>
<label ><radio value="1" >女</radio></label>
</radio-group>
</view>

<view>
<text>专业技能</text>
<checkbox-group name = "skills">
<label > <checkbox value="html" checked>HTML</checkbox></label>
<label > <checkbox value="css" >CSS</checkbox></label>
<label > <checkbox value="js" >JS</checkbox></label>
<label > <checkbox value="ps" >PS</checkbox></label>
</checkbox-group>
</view>
<view>
<text>您的意见</text>
<textarea name="opinion" value="测试"></textarea>
</view>
<button form-type="submit">提交</button>
</form>

</view>

界面
**第二步:css样式修改

`/**index.wxss**/
.container{
  margin: 50prx;
}
view{
 margin-bottom: 30rpx;
}
input{
  width: 600rpx; 
  margin-top: 10rpx;
  border-bottom: 2rpx solid #ccc;
}
label{
  display: inline;
  margin: 8rpx;
}
textarea{
 width: 600rpx;
 height: 100rpx;
 margin-top: 10rpx;
 border: 2rpx solid #eee;
}`

第三步:安装环境
先安装node.js
node.js官网
进入官网安装稳定版本
安装完毕后在同一级创建一个空文件夹 最好都用英文文件夹名在这里插入图片描述
打开新文件夹
打开命令提示符cmd 地址找到新建的文件夹
在这里插入图片描述
输入 npm init -y
再输入 npm install express --save
用完之后不要关
会创建好如图一个文件夹 一个json文件
在这里插入图片描述
然后再这个文件夹内创建一个index.js文件 用记事本打开 输入内容

const express = require('express')
const bodyParser = require('body-parser')
const app = express()
app.use(bodyParser.json())
//处理POSE请求
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')
})

在这里插入图片描述

打开cmd窗口
输入 nodemon index.js
出现server running at http://127.0.0.1:3000即为成功
在这里插入图片描述
然后回到微信小程序 点击提交按钮 打开cmd框回车
出现以下图示即为成功 项目完成

在这里插入图片描述

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值