零基础开发小程序第三课-列表功能开发

简介: 零基础开发小程序第三课-列表功能开发

最近我新研究了一款无代码开发工具,主打的是一行代码都不写来开发小程序。已经有了两篇文章

利用无代码工具开发一款小程序

公民开发者学习无代码编程,从CRUD开始

前两篇文章已经介绍了如何创建项目,如何建立数据表,以及开发新增功能。

在软件开发领域,我们入行的时候需要练就四个基本功能,分别是新增、修改、删除和查询。

因为大部分的管理信息系统是以这四个标准动作为基础的,有些条款也把经常写这些基本操作的人叫CRUD Boy

但是任何复杂应用,如果我们做分解的话,其实系统是由模块构成,模块又由功能构成,功能可以拆分成这四个动作。所以也不可以轻视基本功的练习。

无代码工具为啥可以做到没有代码来开发应用呢?主要是因为厂商已经对编程的知识进行了抽象,把业务场景抽象为组件,我们在开发的时候更多的是进行组件的组合。

好了,啰嗦了这么多,进入我们的正题,本篇主要讲解一下列表功能如何开发。

1 哪些组件可以适用列表功能

首先是要打开我们的工具,无代码开发是基于浏览器进行开发,并不需要我们电脑上安装啥开发工具,也不需要配置环境变量

他的功能呢有点类似于设计软件的figma,也是分为个人空间和共享空间。

个人空间呢主要是你自己创建的项目,只能你自己看得到。而共享空间是分享给别人的项目,大家可以一起在共享空间里协作开发。

打开项目呢,可以点击我们需要的项目名称就可以进入到编辑器的界面

编辑器分为四个区域,顶部导航栏、页面组件区、编辑区、预览发布区

每个区域都配置了不同的功能。目前如果我们需要查看哪些组件就可以先创建一个列表页面,点击页面旁边的+号,我们来创建一个列表页面

点击+号之后在当前页面的右边会多出来一个页面,我们需要选中一下,当边框变成蓝色表示页面被选中了

然后双击页面的名称就可以进行修改

页面名称修改完了之后,点击导航条组件,可以修改一下组件的标题

在组件旁边点击+号就可以添加组件了

在容器下的列表组件可以用来开发我们的列表功能

2 如何学习组件的使用

我们拿到一款开发工具,如何学习使用呢?答案是看帮助文档。因为既然是以工具的形态来售卖,必然需要提供详细的说明书,如果没提供,那大可不必浪费时间研究它。

文档在哪呢?还是回到我们的项目空间里,顶部导航条找到我们的帮助文档

在帮助中心找到组件专讲,找到列表组件

帮助中心已经讲的非常详细了,我们按照我们的课程体系来体验一下列表组件如何使用

3 创建数据表

点击导航条上的数据模型,创建数据表

点击数据表旁边的添加按钮添加表

输入模型名称

选中我们创建的表,点击添加列增加字段

添加列的时候要根据实际情况选择类型,一旦选择后,如果后续需要修改只能把列删掉重新添加

对数据表做的任何修改都需要在编辑器里点击后端更新才生效

4 录入数据

数据表加好之后,就需要录入数据,还是进入到数据模型视图,点击数据库,先选中数据表,然后点击插入数据添加一些商品

5 添加组件

开发列表功能的话,需要先添加组件,我们把列表组件拖入到页面里

组件的话我们首先是要配置数据源,选则我们的商品数据表

数据源配置好我们就要配置字段的显示,要双击组件,进入到组件的内部

需要做的是要选择合适的组件拖入到容器视图里

我们先拖入一个图片组件来显示商品的图片

然后要将远程数据中的图片字段和图片进行绑定

从组件内数据,选择列表,选择item,再选择图片字段

然后拖入文字组件调整到合适的位置

给文字组件也绑定数据

6 预览发布

功能开发好之后,点击预览我们就可以看到实际的效果

总结

无代码开发的基本步骤是,先创建表,增加字段,然后添加数据,然后选择合适的组件绑定数据。总体上体验还是非常流畅的,无需任何编程知识就可以自己开发小程序,如果心动赶紧体验一下吧。

相关文章
|
7天前
|
人工智能 小程序
【一步步开发AI运动小程序】十五、AI运动识别中,如何判断人体站位的远近?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,无需后台支持,具有快速、体验好、易集成等特点。本文介绍如何利用插件判断人体与摄像头的远近,确保人体图像在帧内的比例适中,以优化识别效果。通过`whole`检测规则,分别实现人体过近和过远的判断,并给出相应示例代码。
|
6天前
|
人工智能 小程序 UED
【一步步开发AI运动小程序】十六、AI运动识别中,如何判断人体站位?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,本地引擎无需后台支持,具备快速、体验好、易集成等优势。本文介绍如何利用插件的`camera-view`功能,通过检测人体站位视角(前、后、左、右),确保运动时的最佳识别率和用户体验。代码示例展示了如何实现视角检查,确保用户正或背对摄像头,为后续运动检测打下基础。
|
6天前
|
移动开发 小程序 PHP
校园圈子论坛系统采取的PHP语音和uni账号开发的小程序APP公众号H5是否只需要4800元?是的,就是只需要4800元
关于校园圈子论坛系统采用PHP语言和uni-app开发的小程序、APP、公众号和H5是否仅需4800元这个问题,实际上很难给出一个确定的答案。这个价格可能受到多种因素的影响
|
2天前
|
人工智能 小程序 数据处理
uni-app开发AI康复锻炼小程序,帮助肢体受伤患者康复!
近期,多家康复机构咨询AI运动识别插件是否适用于肢力运动受限患者的康复锻炼。本文介绍该插件在康复锻炼中的应用场景,包括康复运动指导、运动记录、恢复程度记录及过程监测。插件集成了人体检测、姿态识别等功能,支持微信小程序平台,使用便捷,安全可靠,帮助康复治疗更加高效精准。
|
7天前
|
人工智能 小程序 JavaScript
【一步步开发AI运动小程序】十四、主包超出2M大小限制,如何将插件分包发布?
本文介绍了如何从零开始开发一个AI运动小程序,重点讲解了通过分包技术解决程序包超过2M限制的问题。详细步骤包括在uni-app中创建分包、配置`manifest.json`和`pages.json`文件,并提供了分包前后代码大小对比,帮助开发者高效实现AI运动功能。
|
28天前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
30 0
在线课堂+工具组件小程序uniapp移动端源码
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
320 3
|
2月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
55 0
微信小程序更新提醒uniapp
|
4月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
115 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
4月前
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序,旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建,具备丰富的注释与简洁的代码结构,非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
114 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序