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

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

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


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


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


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


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


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


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


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


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


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


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



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


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


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



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



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



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



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



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



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



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



2 如何学习组件的使用


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


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



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



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


3 创建数据表


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



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



输入模型名称



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



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



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



相关文章
|
11天前
|
存储 小程序 前端开发
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
116 12
|
25天前
|
小程序 前端开发 关系型数据库
基于Uniapp+php校园小程序,校园圈子论坛系统功能,校园跑腿二手交流功能设计
校园圈子论坛及综合服务平台集成了校园跑腿、兼职信息、外卖团购、闲置交换、租赁服务、表白墙等多功能模块,提供一站式校园生活解决方案。系统采用uniapp前端和PHP后端开发,支持多城市、多学校切换,配备分站式后台管理,确保稳定性和安全性。通过融云IM SDK实现即时通讯功能,增强用户互动与粘性。适用于大学校园、城市及社区圈子,满足多样化需求,提升便捷体验。
|
24天前
|
小程序 前端开发 关系型数据库
uniapp跨平台框架,陪玩系统并发性能测试,小程序源码搭建开发解析
多功能一体游戏陪练、语音陪玩系统的开发涉及前期准备、技术选型、系统设计与开发及测试优化。首先,通过目标用户分析和竞品分析明确功能需求,如注册登录、预约匹配、实时语音等。技术选型上,前端采用Uni-app支持多端开发,后端选用PHP框架确保稳定性能,数据库使用MySQL保证数据一致性。系统设计阶段注重UI/UX设计和前后端开发,集成WebSocket实现语音聊天。最后,通过功能、性能和用户体验测试,确保系统的稳定性和用户满意度。
|
30天前
|
小程序 IDE PHP
圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里?
将PHP源码打包成App的过程涉及多个步骤和技术选择。以圈子源码为例,首先明确需求,确定App功能和目标用户群体,并根据需求开发小程序页面,如用户注册、圈子列表等。源码准备阶段确保源码适用于小程序开发,环境配置需安装IDE(如微信开发者工具)及依赖库。最后在IDE中打包小程序并上传至管理平台,通过审核后发布。费用方面,模板开发成本较低,定制开发则更高,具体取决于需求复杂度和第三方服务费用。
73 0
|
2月前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
|
28天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
26 0
|
1月前
|
移动开发 小程序 前端开发
超详细攻略!uniapp陪玩系统,打包陪玩小程序、H5需要注意什么?
陪玩系统的打包过程涵盖APP、小程序和H5平台。APP打包需使用uni-app开发工具,配置项目信息并选择云打包;小程序打包需在微信公众平台注册账号并提交审核;H5打包则直接通过uni-app生成文件并上传至服务器。各平台需注意权限配置、代码规范及充分测试,确保应用稳定性和兼容性。
|
3月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
77 0
在线课堂+工具组件小程序uniapp移动端源码
|
4月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
562 3
|
4月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
95 0
微信小程序更新提醒uniapp

热门文章

最新文章