社区/文章分享/实战 | 0~1 基于模板开发问卷小程序

实战 | 0~1 基于模板开发问卷小程序

本文将帮助您借助腾讯云微搭低代码 WeDa 平台,基于已有的模板快速打造出如下图所示的问卷调查小程序。

概述

从 0 到 1 开发一款问卷小程序需要经过几个步骤,从模板中心复制应用到自己的应用管理,然后根据需求定义数据源。数据源定义好后需要按照需求设计页面,主要是完成布局的添加和组件的定义。一切做好之后就需要本地构建然后预览效果,只需要简单的几步就可以独立开发一款属于自己的应用。

步骤 1:创建应用

1.在 腾讯云微搭低代码控制台 单击【模板中心】,选择需要的模板,单击【立即使用】。

  1. 录入应用名称,填写 survey,单击【确定】。

步骤 2:编辑数据源

使用模板成功后,单击【数据源管理】,即可看到新加了一份名为【低码分享活动报名表】的数据源。

1.单击名称即可浏览表中的字段名称、字段标识和数据类型等详细信息。

  1. 同时,支持在数据源管理页面自定义添加业务所需的字段,单击【添加字段】。
  2. 可以增加一个职业的字段,字段标识为 job,字段类型为字符串,是否必填选择【是】,是否枚举选择【否】
  3. 设置完毕后单击【确定】就增加了一个字段。
  4. 不需要的字段可以删除,可以单击操作列上的【删除】按钮删掉,本文以删掉感兴趣的话题字段为例。
  5. 添加第二个字段所属行业,字段标识为 industry,字段类型为字符串,是否必填选择【是】,是否枚举选择【否】,设置完毕后单击【确定】就增加了一个字段。
  6. 由于参与问卷调查的用户只需提交就可以,因此【动作】只勾选【新增】方法,其他都保持默认。设置完毕后单击页面底部的【确定】,否则刚才添加的字段都不生效。

步骤 3:修改页面

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

代码解析

下面逐条分析当下使用模板的结构。首先是有个垂直布局组件,它将页面分成了三个部分:

1.头部(header):头部放置小程序的介绍,向用户告知本次调查的目的。对应模板中的【插槽 header】。

  1. 内容(content):内容部分就是具体的调查项,在调查项结尾需要增加一个提交按钮,方便用户提交。对应模板中的【插槽 content】。
  2. 尾部(footer):尾部一般放置版权信息。对应模板中的【插槽 footer】。

改造头部

1.选中大纲树中的【插槽 header】,可以看到该模板的头部信息是放置了四个标题组件,若不需要这么多展示内容,可以选中具体【标题】组件单击右键【删除】。

  1. 若需要添加长文本介绍,我们可以选中【插槽 header】>【容器】组件,再单击组件库【通用】类目中的【文本】组件,即可在问卷的头部增加文本,您也可以通过拖拽快速实现。修改文本的内容,可选中【文本】组件,并修改右侧【组件编辑】的【文本内容】。 内容示例: 文本内容:尊敬的腾讯云微搭低代码用户,为了更好地提升腾讯云微搭低代码平台的体验和服务,我们特展开本次的问卷调查,希望能得到您的真实想法与宝贵意见,本问卷将花费您 5 分钟时间。
  2. 同时,可根据业务需求调整样式,我们选中该文本组件所在的【容器】组件,切换到【样式】标签,给组件的内边距左右各设置 20 的距离。

改造内容

1.在【插槽 content】部分,即问卷的内容部分,模板提供了姓名、手机、兴趣话题和提交按钮。若不需要某部分内容,可选中该组件,单击右键【删除】。

  1. 若要添加内容,可以选中【插槽 content】下的【插槽 content Slot】组件(即表单容器的插槽容器),再单击组件库中所需添加的组件,如添加【表单单选】组件。
  2. 默认是添加到最后边,我们可以调整一下顺序,拖住组件调到【按钮】组件的前边。
  3. 选中刚刚添加的【表单单选】组件,设置表单字段名称(字段名称填写为 job),组件的标题(我的职业是),将布局方式改为垂直,并依次增加单选项的内容,单选项名称分别为前端开发、后台开发、设计师、运营、产品策划、其他,单选项的值分别设置为 first、second、third、fourth、five、six。单选内容的 value 会被提交到数据库里。
  4. 按照同样的方法增加第二个调查项,需要注意的是第二个调查项的字段名称需要填写为 industry,标题设置为“我所属的行业是”,单选项名称分别为金融、工业、教育、医疗、政务、IT 互联网、其他,单选项的值分别为 first、second、third、fourth、five、six、seven。单选内容的 value 会被提交到数据库里。

改造尾部

我们在问卷尾部展示版权信息。选中【插槽 footer】插槽里的【文本】组件,可以在右侧的属性面板里修改版权信息。

步骤 4:代码构建与发布

1.代码改造好后就可以进行预览了,单击导航条【预览发布】。为快速测试,您可以选择部署方式为【云端】,部署平台为【网页 h5】。

  1. 本地需要安装好 node.js 并且按照弹出窗口提示的命令依次在命令行执行,安装完毕后需要打开低代码的编译监控。
  2. 部署完成后便会弹出预览二维码和预览的访问地址。
  3. 构建成功后可以用手机扫描二维码浏览效果。

数据管理

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

产品介绍

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

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