实战|使用微搭低代码3分钟开发表单应用(代码片段)

腾讯云云开发 腾讯云云开发     2022-10-21     232

关键词:

本文从0到1 ,以循序渐进的方式利用腾讯云微搭低代码平台搭建出常见的表单展示应用,让您快速上手腾讯云微搭低代码平台核心功能。

步骤1:创建应用

  1. 登录 腾讯云微搭低代码 控制台。
  2. 单击新建应用-从空白新建,填写应用信息:
    • 应用名称:输入应用名称。
    • 支持平台:选择应用支持发布的平台。
  3. 单击新建,即可创建应用。

步骤2:创建数据源模型

  1. 单击左侧主菜单栏中的数据源管理,进入数据源管理页面。
  2. 单击新建自建数据源
  3. 进入新建数据源页面,配置如下信息:
    • 数据库名称:输入数据库名称。
    • 数据源标识:作为数据源模型的唯一标识,不可重复。
    • 字段配置:一个数据源模型可由多个字段组成。例如“人员”数据源模型中可有“姓名、年龄”等字段,由此模型可创建“管理人员、员工、游客”等数据源变量。注意 _idcreatedAtupdatedAt 为数据源内置字段,不允许修改。 单击添加,页面右侧将弹出字段设置小窗口,配置如下相关信息:
      • 字段名称:输入字段名称。
      • 字段标识:作为字段的唯一标识,不可重复。
      • 数据类型:选择相对应的数据类型。
      • 是否必填:字段是否必填。
      • 是否唯一:字段是否唯一。
      • 是否枚举:该字段是否只能在有限个枚举值中取值。例如性别字段,可设置枚举值为:男、女。
  4. 我们这里分别创建姓名和手机号两个字段,单击确定,即可完成数据源模型的创建。

步骤3:低代码应用编辑

  1. 数据源设置完毕后就需要创建页面,进入应用管理页面,找到刚才创建的应用,进入应用编辑器。
  2. 编辑器分为三个部分,可归纳为菜单区,组件页面选择区,编辑预览区。

使用表单容器生成表单应用

  1. 在编辑器中使用表单容器绑定刚刚创建的数据源。
  2. 在弹出的弹窗中单击确定后表单即可自动生成。

创建信息展示页面

  1. 在编辑器中新创建一个页面。
  2. 进入新创建的页面,为页面创建模型变量。
  3. 填写变量标识后单击保存
  4. 在页面中添加容器,并在容器下方添加信息展示组件。
  5. 为容器绑定循环。

    勾选新创建的模型变量,单击确定
  6. 可以看到,模型变量配置成功后,容器下方的组件会根据数据量进行遍历。
  7. 为列表项组件配置数据。

    选择绑定循环对象,勾选需要绑定的字段单击确认

! 循环对象中可绑定的数据依赖于组件上层容器所绑定的模型变量。

  1. 单击确定后可看到组件已成功配置了数据。

页面测试

  1. 页面整体搭建完成后对页面功能进行测试,首先在编辑器开启实时预览随后在表单页进行三次信息提交。
  2. 来到信息展示页,可看到信息已成功遍历展示,至此应用搭建完成。

步骤4:发布应用

  1. 单击页面右上角的发布,在弹出的部署应用窗口中进行预览发布配置。
  2. 发布完成后通过扫描二维码即可访问发布的应用。

微搭低代码家校协同管理系统实战开发教程

目录用例分析管理员用例图园长用例图教师用例图家长用例图数据库设计园所信息班级信息教师信息家长信息学生信息用户角色信息数据源开发园所信息班级信息教师信息学生信息用户角色信息创建模型应用创建角色创建用户登... 查看详情

微搭低代码家校协同管理系统实战开发教程

目录用例分析管理员用例图园长用例图教师用例图家长用例图数据库设计园所信息班级信息教师信息家长信息学生信息用户角色信息数据源开发园所信息班级信息教师信息学生信息用户角色信息创建模型应用创建角色创建用户登... 查看详情

微搭低代码基础开发教程

目录引言第一节开通微搭低代码并创建应用第二节应用管理介绍第三节模板中心介绍第四节数据源管理第五节组件库管理第六节小程序开发认证课程总结引言微搭是从今年一月份开始公测,6月3日正式开始商用。期间产品经... 查看详情

微搭低代码javascript基础知识-数组(代码片段)

...代码中操作数组总结日常在开发小程序时,我们最常使用的数据结构就是数组。因为我们经常要从数据源中读取数据,数据是以列表的形式存放在数据源中,我们读取之后需要按照顺序存放到数组中。很多初学者没有... 查看详情

微搭低代码javascript基础知识-数组(代码片段)

...代码中操作数组总结日常在开发小程序时,我们最常使用的数据结构就是数组。因为我们经常要从数据源中读取数据,数据是以列表的形式存放在数据源中,我们读取之后需要按照顺序存放到数组中。很多初学者没有... 查看详情

微搭低代码javascript基础知识-数组(代码片段)

...代码中操作数组总结日常在开发小程序时,我们最常使用的数据结构就是数组。因为我们经常要从数据源中读取数据,数据是以列表的形式存放在数据源中,我们读取之后需要按照顺序存放到数组中。很多初学者没有... 查看详情

微搭低代码样式开发-背景色(代码片段)

小程序搭建的时候如果只使用组件的默认样式,搭建出来的程序样式比较呆板,好听一点的词就是比较素。在没有设计师参与的情况下,我们怎么能美化一下样式呢?学习的方法是借鉴官方的模板,我们将官... 查看详情

微搭低代码零基础进阶课(第四课)(代码片段)

...在云函数上,可以便捷的在线编制云函数代码供应用使用。创建云函数打开微搭控制台,找到自定义连接器。点击新建自定义连接器输入名称和标识点击立即新建&# 查看详情

利用微搭低代码实现级联选择

...册。由学生家长自主选择班级进行后续的健康信息填报。微搭低代码制作应用是分为几个步骤:创建数据 查看详情

利用微搭低代码实现搜索功能

微搭小课堂是一门实战课,以商业的视角来思考究竟该开发什么样的功能。既有技术点的分解,又有产品功能的规划。以微搭为主线,顺滕摸瓜体验一下腾讯全家桶的各种各样的功能。愿景是做一百期,形式是以... 查看详情

利用微搭低代码操作微信缓存(代码片段)

在小程序开发时,我们经常需要考虑使用微信缓存,比如将小程序的用户信息写入缓存,又或将用户的身份信息写入缓存。那么我们使用的微搭,作为一款低代码工具是否也可以操作缓存呢?答案是肯定的ÿ... 查看详情

微搭低代码基础开发教程-编辑器介绍

...置全局/页面变量管理组件的数据绑定总结本篇介绍一下微搭的编辑器的各类功能,便于新手小白快速了解软件的各类常规操作编辑器结构微搭提供了低代码的编辑器,可以在编辑器中进行组件的拖拽和属性及事件的设置... 查看详情

使用微搭低代码一键搭建企业微官网,网站建设如此简单(代码片段)

目录引言步骤一创建应用步骤二定义数据源2.1企业模板2.2企业模板-解决方案步骤三建立页面步骤四开发功能4.1首页背景设置广告图片快捷模块应用场景4.2解决方案4.3关于我们4.4最新动态4.5动态详情步骤五发布小程序引言日常中... 查看详情

微搭低代码中实现增删改查(代码片段)

...常教学中,经常会有人问,这个平台方法该如何使用,参数该如何传递。我们本篇就讲解一下微搭低代码中的增删改查方法该如何使用。数据源的方法你建立数据源之后,平台会自动生成对应的方法。模型方法分... 查看详情

微搭低代码中实现增删改查(代码片段)

...常教学中,经常会有人问,这个平台方法该如何使用,参数该如何传递。我们本篇就讲解一下微搭低代码中的增删改查方法该如何使用。数据源的方法你建立数据源之后,平台会自动生成对应的方法。模型方法分... 查看详情

微搭低代码零基础入门课(第三课)

开通了微搭低代码账号之后,我们就一只脚踏入了软件开发这个领域。不管你是安装官方模板进行二次开发也好,还是创建自定义应用从零开始也罢。既然开发就要具备排错的能力,专业术语叫debug,也叫断点调... 查看详情

微搭低代码从入门到精通-02应用介绍

...源自动生成增删改查的页面,发布后在企业工作台里使用。比如我们通常使用的管理信息系统或者OA都对应着数据模型应用。数据模型应用不仅可以提供增删改查的功能,结合工作流就可以搭建审批类的应用。自定义应用... 查看详情

微搭低代码从入门到精通-02应用介绍

...源自动生成增删改查的页面,发布后在企业工作台里使用。比如我们通常使用的管理信息系统或者OA都对应着数据模型应用。数据模型应用不仅可以提供增删改查的功能,结合工作流就可以搭建审批类的应用。自定义应用... 查看详情