小程序-调查问卷
1.案例分析
本节将通过开发一个调查问卷的案例来学习常用表单组件的使用，以及如何收集用户填写的表单信息提交给服务器，
或者从服务器获取数据后显示在表单中。
实现效果如下，
有单行文本框，单选框，复选框，文本域，以及一个提交按钮。当用户单击提交按钮后，会将表单中填写的值提交给服务器。
2.编写表单页面
在微信开发者工具中创建一个新项目，然后在项目中创建pages/index/index页面，在该页面的index.wxml文件中编写调查问卷的表单。
index.wxml代码如下：
1 <!--index.wxml-->
2 <view class="container">
3 <form bindsubmit="submit">
4 <view>
5 <text>姓名：</text>
6 <input name="name" value="张三" />
7 </view>
8 <view>
9 <text>性别：</text>
10 <radio-group name="gender">
11 <label><radio value="0" checked />男</label>
12 <label><radio value="1" />女</label>
13 </radio-group>
14 </view>
15 <view>
16 <text>专业技能：</text>
17 <checkbox-group name="skills">
18 <label><checkbox value="html" checked />HTML</label>
19 <label><checkbox value="css" checked />CSS</label>
20 <label><checkbox value="js" />JavaScript</label>
21 <label><checkbox value="ps" />Photoshop</label>
22 </checkbox-group>
23 </view>
24 <view>
25 <text>您的意见：</text>
26 <textarea name="opinion" value="测试" />
27 </view>
28 <button form-type="submit">提交</button>
29 </form>
30 </view>index.wxss代码如下
1 /**index.wxss**/
2 .container {
3 margin: 50rpx;
4 padding: 0rpx;
5 }
6 view{
7 margin-bottom: 30rpx;
8 }
9 input{
10 width: 600rpx;
11 margin-top: 10rpx;
12 border-bottom: 2rpx solid #ccc
13 }
14 label{
15 display: block;
16 margin: 8rpx;
17 }
18 textarea{
19 width: 600rpx;
20 height: 100rpx;
21 margin-top: 10rpx;
22 border: 2rpx solid #eee;
23 }index.json文件中设置导航栏标题，代码如下：
1 {
2 "navigationBarTitleText": "调查问卷"
3 }3.服务器数据交互
将用户提交的表单提交到服务器，可以通过小程序中的网络API wx.request()来实现。
需要注意的是，对于正式上线的项目，小程序要求服务器域名必须在小程序管理后台中添加，域名必须经过ICP备案，且值支持HTTPS和WSS协议。
对于开发人员来说，为了学习方便，可以在微信开发者工具中关闭这些验证，从而利用本地服务器来测试网络功能。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2023-02-25，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读