微信小程序案例：問卷調(diào)查
來源：我的學(xué)習(xí)筆記（動態(tài)數(shù)據(jù)）
先在有node.exe文件夾下面創(chuàng)建一個(gè)TXT文本文件進(jìn)行必要的編輯后改名字為index.js
index.js的內(nèi)容為以下代碼：
const express = require('express')? ?//加載express模塊
const bodyParser = require('body-parser')? ?//加載解析客戶端發(fā)送的實(shí)體內(nèi)容
const app = express()? //創(chuàng)建實(shí)例
app.use(bodyParser.json())? //使用json格式
//處理POST請求
app.post('/',(req,res)=>{
console.log(req.body)
res.json(req.body)? //響應(yīng)回瀏覽器
})
? ?// 表單數(shù)據(jù)綁定1：data中保存表單的默認(rèn)數(shù)據(jù)
? 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)
})
//監(jiān)聽3000端口
app.listen(3000,()=>{
console.log('server running at http://127.0.0.1:3000')? //監(jiān)聽成功輸出信息
})
2.在微信小程序開發(fā)軟件內(nèi)對index.wxml主頁進(jìn)行設(shè)計(jì)
<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>專業(yè)技能</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.進(jìn)入命令窗口輸入nodemon index.js(注意nodemon與index之間是有空格的)
成功運(yùn)行效果如下：
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;
}
