实战 | 0~1 自定义组件开发问卷小程序

本文将帮助您基于腾讯云微搭低代码 WeDa 平台，从0到1快速打造如下图所示的问卷调查小程序。

概述

基于腾讯云微搭低代码平台开发一款问卷小程序需要经过四个步骤：

1. 新建低码应用。
2. 根据需求定义数据源。
3. 按照需求设计页面（主要完成布局的添加和组件的定义）。
4. 本地构建及预览发布。

只需简单几步就可以用腾讯云微搭低代码平台独立开发一款属于自己的应用。

步骤1：新建低码应用

创建应用

1. 单击左侧导航栏的【应用管理】，在中间的内容区域单击【创建空白应用】。
2. 输入应用名称，单击【确定】创建应用。

步骤2：定义数据源

传统开发流程需要先进行需求分析，分析完成后需要按照需求进行数据库的设计，在腾讯云微搭低代码平台中，只需在控制台左侧的【数据源管理】中自定义数据源即可，无需单独构建数据库。

1.单击【新建数据源】按钮选择【数据源模型】。

1. 在打开的页面里，数据源名称输入问卷调查，数据源标识输入 survey。
2. 单击【添加字段】按钮，添加数据源相关字段。 结合实际情况设置以下参数：

• 字段名称：输入姓名。
• 字段标识：输入name。
• 数据类型：选择【字符串】。
• 是否必填：选择【是】。
• 是否枚举：选择【否】。 类似地，依次添加字段 phone、job、industry。如下图 所示。

4.由于参与问卷调查用户只需提交即可，因此设置【动作】时只需勾选【新增】方法，其他均保持默认。设置完毕后需要单击页面底部的【立即创建】按钮，否则刚才添加的字段都不生效。

步骤3：设计页面

创建页面

1.数据源设置完毕后就需要创建页面，单击【应用管理】，找到刚才创建的应用，单击【编辑】按钮进入应用编辑器。

1. 编辑器分为四个部分，可归纳为导航条，组件选择区，编辑区，和属性面板。

功能设计

首先需要构思设计小程序的布局。对于调查问卷，通常采用垂直布局，此处将页面分成三个部分，分别是头部、内容、尾部。

• 头部：通常放置小程序的介绍，向用户告知本次调查的目的。
• 内容：部分是具体的调查项和提交按钮。
• 尾部：一般是放置版权信息等补充信息。

设计完功能和布局后，就可以按照实际需求进行页面开发。

引入数据源

1. 本项目的目的是让用户填写问卷调查，再将内容保存到数据库中，所以需要先为问卷引入数据源。单击导航条上的【变量管理】。
2. 在打开的页面找到【首页 index】下边的【状态变量】，单击旁边的【+】号，依次录入变量标识和变量名为 survey，变量类别选择【数据源模型】，数据源选择【问卷调查（survey）】，变量类型选择【新纪录】，变量更新动作选择【创建单条记录】，设置好后单击【提交】按钮。

布局创建

在左侧的控制面板切换到【组件】页签，然后在布局里单击【垂直布局】进行布局创建。

头部编写

1.头部信息需要先加入一个容器组件：选中大纲树中的【插槽header】，并单击通用组件中的【容器】组件，就可以把容器组件放入插槽 header 中。您也可以通过拖拽实现上述操作。

1. 在容器组件内放入文本组件。选中容器组件后，在左侧的组件面板中单击【文本】组件，并在文本组件【数据】>【文本内容】中修改文本的内容。 内容示例： 文本内容：尊敬的腾讯云微搭低代码用户，为了更好地提升腾讯云微搭低代码平台的体验和服务，我们特展开本次的问卷调查，希望能得到您的真实想法与宝贵意见，本问卷将花费您5分钟时间。
2. 同时，可根据业务需求在右侧的组件编辑区调整视觉样式。例如，选中文本组件所在的【容器】组件，选择【组件编辑】>【样式】，将组件的内边距左右各设置20个单位距离。

内容编写

1. 选中【插槽 content】，单击【容器】组件，在插槽 content 中放入容器组件。
2. 选中【容器】组件，单击【表单容器】组件。
3. 依次加入调查项，如此案例中调查项分为姓名、手机、职业和行业。单击表单容器下的【插槽 contentSlot】，并在该插槽中依次添加相关表单组件。姓名选择【表单输入】，手机选择【表单手机号码】，职业和行业都选择【表单单选】。

!表单组件都是添加在【插槽 contentSlot】下的平级的组件。

1. 下面开始修改表单组件的内容，首先是姓名。单击【表单输入】组件，表单字段名称设置为 name，【标题】设置为【姓名】，【是否必填】开关设置为【开】。
2. 单击【表单手机号码】组件，设置该组件的表单字段名称为 phone，标题为手机，是否必填开关设置为开。
3. 单击【表单单选】组件，设置表单字段名称（字段名称填写为 job），组件的标题（我的职业是），将布局方式改为垂直，并依次增加单选项的内容，单选项名称分别为前端开发、后台开发、设计师、运营、产品策划、其他，单选项的值分别设置为 first、second、third、fourth、five、six。单选内容的 value 会被提交到数据库里。
4. 按照同样的方法增加所属行业调查项,字段名称需要填写为 industry，标题设置为“我所属的行业是”，单选项名称分别为金融、工业、教育、医疗、政务、IT互联网、其他，单选项的值分别为 first、second、third、fourth、five、six、seven。单选内容的 value 会被提交到数据库里。
5. 调查项添加完毕后，给调查表内容底部增加提交按钮。按钮放置在表单容器的插槽中，与表单组件平级，以关联到同容器内的表单组件数据。选中大纲树的【表单容器】>【插槽 contentSlot】，单击表单类目中的【按钮】组件。将按钮组件的【标题】修改为确认提交，将【用于form组件】设置为【提交】。
6. 选择【表单容器】，切换到【事件】页签，选择事件为 submit。
7. 选择数据源，单击【确定添加】。
8. 数据源名称选择问卷调查，方法名设置为 创建单条记录(create)，传入参数设置为 event.detail。 类似地，增加点击提交按钮后的提示内容。

• 添加触发条件【dataSource 成功】，动作类型【平台方法】，执行动作为【showToast 显示信息】，点击确认添加，并将标题设为【提交成功】，图标为 success。
• 添加触发条件【dataSource 失败】，动作类型【平台方法】，执行动作为【showToast 显示信息】，点击确认添加，并将标题设为【提交失败】，图标为 error。

尾部编写

选中【插槽 footer】，单击组件通用类目中的【文本】组件，并将文本内容设置为版权信息。

步骤4：代码构建与发布

1. 代码改造好后就可以进行预览，单击导航条【预览发布】。为快速测试，您可以选择部署方式为【云端】，部署平台为【网页h5】。
2. 本地需要安装好 nodejs 并且按照弹出窗口提示的命令依次在命令行执行，安装完毕后需要打开低代码的编译监控。
3. 部署完成后便会弹出预览二维码和预览的访问地址。
4. 构建成功后可以用手机扫描二维码浏览效果。

数据管理

用户填写了问卷调查后，管理员可以单击【数据源管理】，查看用户提交的问卷信息数据，单击【数据管理后台】，腾讯云微搭低代码 LowCode 平台自带内容管理（CMS）后台可以查看和管理数据。
进入页面后可以看到已创建的历史项目，点击刚刚创建的新项目。
选中表单即可查看数据。
您也可以直接在控制台的【应用管理】中找到刚才的应用，点击应用卡片，在【数据管理后台】中找到预览/发布的应用所对应的数据。【正式数据】对应的是使用发布产生的应用数据，【测试数据】是使用预览产生的应用数据。

产品介绍

腾讯云微搭低代码是高效、高性能的拖拽式低代码开发平台，向上连接前端的行业业务，向下连接云计算的海量能力，助力企业垂直上云。腾讯云微搭低代码将繁琐的底层架构和基础设施抽象化为图形界面，通过行业化模板、拖放式组件和可视化配置快速构建多端应用（小程序、H5应用、Web 应用等），免去了代码编写工作，让您能够完全专注于业务场景。腾讯云微搭低代码以云开发作为底层支撑，云原生能力将应用搭建的全链路打通，提供高度开放的开发环境，且时刻为您的应用保驾护航。

开通低代码：https://cloud.tencent.com/product/lowcode
产品文档：https://cloud.tencent.com/document/product/1301/48874
技术交流加Q群：1003059706
最新资讯关注微信公众号【腾讯云云开发】