前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序-调查问卷

小程序-调查问卷

作者头像
Vincent-yuan
发布2023-02-26 19:30:11
1.9K0
发布2023-02-26 19:30:11
举报
文章被收录于专栏:Vincent-yuan

1.案例分析

本节将通过开发一个调查问卷的案例来学习常用表单组件的使用,以及如何收集用户填写的表单信息提交给服务器,

或者从服务器获取数据后显示在表单中。

实现效果如下,

有单行文本框,单选框,复选框,文本域,以及一个提交按钮。当用户单击提交按钮后,会将表单中填写的值提交给服务器。

2.编写表单页面

在微信开发者工具中创建一个新项目,然后在项目中创建pages/index/index页面,在该页面的index.wxml文件中编写调查问卷的表单。

 index.wxml代码如下:

代码语言:javascript
复制
 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代码如下

代码语言:javascript
复制
 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文件中设置导航栏标题,代码如下:

代码语言:javascript
复制
1 {
2   "navigationBarTitleText": "调查问卷"
3 }

3.服务器数据交互

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

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-02-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.案例分析
  • 2.编写表单页面
  • 3.服务器数据交互
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档