关于低代码开发:实战-01-自定义组件开发问卷小程序

本文将帮忙您基于腾讯云微搭低代码 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
最新资讯关注微信公众号【腾讯云云开发】