乐趣区

关于低代码开发:如何使用低代码搭建简易的信息查询系统

概述

日常咱们作为个人账户开明腾讯云微搭低码性能后,能够有两个利用的创立权限,那咱们明天就充分利用这两个资源,打造一款属于本人的在线预约小程序。

小程序的性能分为两局部,第一局部是预约性能,关上小程序能够注销预约的信息,注销实现之后能够进行提交。第二局部是查问性能,能够通过按条件查问到最新的预约信息。

通过本教程的学习,您能够播种以下知识点:

  • 全局变量的应用
  • 低码办法中查询数据库
  • 页面之间传参
  • 表单提交

低码开发流程

微搭低码开发分为几个局部,创立利用、定义数据源、创立页面、拖拽组件、定义组件款式、实现业务逻辑等。

预约性能实现

创立利用

登录腾讯云微搭低码平台,在利用治理菜单点击【创立空白利用】按钮,输出利用标识:appointment,利用名称:预约注销,点击【确定】按钮


创立数据源

点击腾讯云微搭低码控制台左侧导航栏的数据源治理栏目,点击【新建数据源】按钮,在下拉菜单中咱们抉择自建数据源。

在弹出的页面中输出数据源名称:预约注销,数据源标识:appointment,点击【确定】按钮

在关上的页面点击【编辑】按钮,咱们须要创立咱们本人须要的字段

在关上的编辑页面中,点击【增加字段】按钮

录入字段名称:辅导科目,字段标识:course,数据类型抉择为字符串,点击【确定按钮】


依照上述办法顺次设置以下字段

  • 字段名称:学生年级,字段标识:grade,数据类型:字符串
  • 字段名称:联系人姓名,字段标识:name,数据类型:字符串
  • 字段名称:手机号,字段标识:phone,数据类型:字符串
  • 字段名称:微信号,字段标识:microno,数据类型:字符串
  • 字段名称:地址,字段标识:address,数据类型:字符串
  • 字段名称:要求,字段标识:require,数据类型:字符串

设置好后如下图,点击【确定】按钮实现数据源的创立


创立页面

在利用治理中找到咱们方才创立的预约注销利用,点击【编辑】按钮关上利用

默认会给咱们创立一个页面,咱们应用这个默认页面即可

在左侧切换到组件页签,咱们开始设计页面

关上表单组件列表,抉择【表单容器】组件

选中【表单容器】下边的插槽,咱们在插槽里减少一个【表单输出】组件

将表单字段题目批改为辅导科目,表单字段名称批改为 course,关上是否必填的选项(留神:表单字段名称须要和数据源设计的字段保持一致)


依照上述办法顺次设置学生年级、联系人姓名、手机号、微信号、地址、要求等信息

输出信息设置好后,须要再减少一个【按钮】组件

批改按钮题目为提交,用于 form 组件为提交

选中【表单容器】组件,切换到事件页签

触发条件为 submit(提交),动作类型抉择数据源,点击【确定增加】按钮

数据源名称抉择预约注销,办法名为创立单条记录

提交事件设置好后咱们再减少一个提交胜利的事件,触发条件抉择 dataSource 胜利,动作类型抉择平台办法,执行动作抉择 showToast 显示音讯提醒

批改题目为提交胜利

组件设置好后为了让数据源和利用绑定,咱们须要定义变量,在导航栏点击【变量治理】

在关上的编辑器里开展咱们的首页,点击状态变量旁边的 + 号

变量标识、变量名设置为 appointment,变量类别抉择数据源,数据源抉择预约注销,数据类型抉择新纪录,变量更新动作抉择创立单条记录,设置好后点击【提交】

公布

所有都设置好后点击【预览公布】按钮

咱们抉择本地预览

构建胜利后用手机扫描体验,能够提交几条数据

查问性能实现

预约性能实现之后,咱们就须要实现一下查问的性能,总体的流程是能够输出预约科目,点击查问按钮查问符合条件的记录,咱们用低代码实现第二个需要。

创立利用

关上腾讯云微搭低码控制台,点击导航栏的利用治理,点击【创立空白利用】按钮,输出利用标识:query,利用名称:查问信息,点击【确定】按钮

创立页面

点击利用的编辑按钮,进入到低代码的编辑器,咱们应用默认创立的首页即可

咱们的页面总共有两个性能,有一个课程类别的文本输入框,而后输出信息后能够点击查问按钮,切换到【组件】页签,开展表单选项,点击【表单输出】组件

批改表单字段名称为 course,表单字段题目设置为辅导科目,布局形式抉择为程度

而后减少一个【按钮】组件,按钮题目设置为查问

点击查问的话须要获取文本输出组件的值,而后传递到列表页面做后果展现,所以咱们须要先定义个全局变量,点击导航栏的【变量治理】,在弹出的页面点击全局(global)下边状态变量旁边的 + 号,变量标识和变量名都设置为 queryparms,变量类别抉择无模型数据类型抉择 array,初始值设置为

[
{
"_id": "28ee4e3e60483ef409d5d9845b6555f9",

"grade": "可可",

"_openid": "7cd9812204a74a5baf8866621e14fe11",

"address": "","course":" 可可 ","createdAt": 1615347444375,"updatedAt": 1615347444375,"microno":"",

"name": "可可",

"phone": "可可",

"require": ""
}
]

设置好后点击【提交】按钮

接着咱们须要定义查问按钮的低代码办法 getList,点击导航栏的【低代码编辑】,在关上的编辑器中找到 index 下边的 handle 旁边的 + 号,在弹出的窗口中输出办法的名称 getList,点击【保留】按钮

输出如下代码

export default async function({event, data}) {

let course = $page.widgets.id1.value

if(course!=null && course!=''){

let result = await app.dataSources.appointment.getList({course:course})

app.dataset.state. queryparms = result.data

app.navigateTo({pageId:'detail'})

}else{

app.showToast({

title:'请填写内容',

icon:'none'

})

}

}

代码解析:

代码的逻辑是先获取文本框的值,而后判断是否取到了,如果取到了就执行数据库的查问,而后把查问后果赋值给全局变量,并进行页面跳转。如果没取到值就弹出一个提示框要求填写内容。

低代码设置好后,咱们须要在按钮上减少点击事件,选中【按钮】组件,切换到事件页签,咱们抉择 tap 点击,而后抉择低代码办法

事件定义好后咱们减少详情页的页面,点击【创立新页面】按钮,输出题目为详情页,页面 ID 为 detail,点击【确定】按钮

在新创建的页面中减少一个列表元素组件

设置列表元素组件的循环展现 for,点击旁边的超链接

在弹出的窗口抉择全局变量 querparms,点击【确定】按钮

点击题目旁边的超链接

在弹出的窗口抉择 for 循环,抉择 course

依照同样的办法设置一下题目下形容

右侧内容咱们须要将数据库的日期类型转换一下显示,设置成表达式

${new Date(forItems.id8.createdAt).getFullYear()}-${new

Date(forItems.id8.createdAt).getMonth()+1}-${new 

Date(forItems.id8.createdAt).getDate()}

这样详情页就设置好了

公布

点击导航栏的预览公布按钮,咱们抉择本地预览

构建胜利后用手机扫描体验


产品介绍

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

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

退出移动版