小程序-調查問卷

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協議。

對於開發人員來說，爲了學習方便，可以在微信開發者工具中關閉這些驗證，從而利用本地服務器來測試網絡功能。

接下來，本地搭建一個服務器。