小程序-调查问卷

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 }
View Code

index.json文件中设置导航栏标题，代码如下：

1 {
2   "navigationBarTitleText": "调查问卷"
3 }
View Code

3.服务器数据交互

将用户提交的表单提交到服务器，可以通过小程序中的网络API wx.request()来实现。

需要注意的是，对于正式上线的项目，小程序要求服务器域名必须在小程序管理后台中添加，域名必须经过ICP备案，且值支持HTTPS和WSS协议。

对于开发人员来说，为了学习方便，可以在微信开发者工具中关闭这些验证，从而利用本地服务器来测试网络功能。

接下来，本地搭建一个服务器。

 

posted @ 2023-02-25 11:09  Vincent-yuan  阅读(494)  评论(0)  编辑  收藏  举报