微搭低代码从入门到精通04-创建自定义应用

news2024/11/18 14:53:04

微搭中的应用分为两类,模型应用和自定义应用。上一篇我们介绍了模型应用的创建方法,本篇我们介绍一下自定义应用的创建方法。

登录微搭的控制台,在左侧的菜单里点击应用,点击新建应用,选择新建自定义应用

在这里插入图片描述

输入应用的名称

在这里插入图片描述

这里的支持平台一共有三个选项,如果你只开发小程序,就选择第一个选项。如果开发H5或者PC网站选择第二个,如果都开发就选择第三项。

点击新建后,打开的页面叫应用编辑器。通常产品的说明书会介绍产品每个部分的功能,我们也可以按照通常的逻辑拆解一下应用编辑器的各项功能

在这里插入图片描述

01 侧边栏导航

第一部分是侧边栏导航,微搭经过历次改版,侧边栏导航是加了删,删了又加,最终形成了目前的一个布局。

侧边栏导航目前将常用的功能进行了聚合,第一部分就是我们的应用设计视图。第二个图标是数据库,通常可以进行数据源的设计。

在这里插入图片描述

点击右上角的编辑按钮可以修改我们的模型字段

在这里插入图片描述

具体设计哪些模型,模型里设计哪些字段是和我们的需求相关。微搭中的数据源支持一对一、一对多的关系,体现在字段类型可以选择为关联关系。

如果要深入学习的话,一方面得学习数据库的范式理论,如第一范式、第二范式、第三范式。另外一方面学习的时候就是学习官方模板,看一下模板是如何构造数据源的。

我们的字段除了基本类型,比如文本、数字,还可以是附件、图片、地理位置、数组、对象等特殊类型。

尤其有过传统开发经验的,往往期望支持关系型数据库,文档型数据库和关系型数据库各有特点,各有优势。

从实践来看,文档型数据库字段更丰富,我们开发的小程序本身属于互联网应用,使用起来更方便。

文档型数据库的弱点在统计上,往往需要更复杂的语法来实现统计,比如如果要实现图表的,往往需要使用高阶的语法来实现。

对于我们应用中设计点缀的内容,比如背景图、图标等,可以上传到素材进行管理。上传到素材的好处是我们在给图片组件做地址绑定的时候可以直接从素材中进行选择

在这里插入图片描述

应用设置里我们可以修改应用的名称,设置登录的效果

在这里插入图片描述
在这里插入图片描述

有些初学者,按照自己的思考,认为如果小程序需要授权访问的,就应该自己实现登录的效果。从安全的角度考虑,你的密码明文存储,而且只不过是在前端代码里加了一层数据过滤,根本就起不到鉴权的效果。

如果确实你的应用是要授权访问的,可以打开登录设置,这样用户在访问小程序的时候就需要输入手机号和密码。

在这里插入图片描述

在实际开发中可以结合自己的需求来选择是否打开登录配置

02 顶部导航条

顶部导航条的第一个内容是变量,变量和数据绑定相对应。如果我们要显示一个列表或者一个文字,这些内容如果是存储在数据源中的,通常需要先定义变量。

在这里插入图片描述

变量的具体操作我们在后续章节再详细介绍。

第二个菜单是代码编辑器

在这里插入图片描述
在这里插入图片描述

我们实际在使用中,经常会听到低代码和无代码。这里的代码编辑器就是双方一个最大的不同。低代码通常是提供给有开发基础的人员使用,这里有开发基础的人员既可以是服务商里的程序员,也可以是企业中设置IT部门具备开发能力的人员。

无代码通常强调自己不需要任何基础,不写任何代码就可以开发应用。从实际的开发角度看,不需要代码就意味着大量进行了封装,扩展能力有限。而开放了编程能力工具通常自由度大,可实现的功能就比较强。

如果你现在还没有开发的基础,建议你学习一下JavaScript和CSS,要想开发出一款好用的应用,懂开发还是必备的技能。

顶部导航条剩下用的最多的功能就是发布,我们在设计形态完成开发后,通常需要将应用发布。低代码本身是一个可视化开发引擎,但计算机运行时需要转译成代码,这里发布就是将可视化的界面和各项配置编译成代码的过程。

03 页面编辑区

页面编辑区通常可以管理我们的页面,包括添加、修改、删除操作

在这里插入图片描述

点击+号可以添加页面,我们可以输入页面的名称和页面ID

在这里插入图片描述

这里的页面ID通常我们在做页面跳转的时候会用到

04 组件区域

低码开发的特点是拖拽组件,这个区域可以看到官方提供的各种组件,通常会有各类布局组件,表单组件,以及和小程序结合比较紧密的组件

在这里插入图片描述

如果你将组件拖入到右侧的编辑区,那么组件的名称会出现在大纲树里,有时候组件比较多的时候从大纲树里可以看到组件的层级,便于快速的选择。

在这里插入图片描述

05 模式切换区域

我们在一开始创建自定义应用的时候就选择了支持的平台,如果只选择了小程序,那么在这个区域只能看到S的图标,如果选择的Web,只会看到两个图标,如果选择第三种那才可以看到三个图标

在这里插入图片描述

小程序通常你需要配置你的小程序名称,另外两种通常需要设置访问的域名。

手机通常有多种型号,我们可以选择不同的机型来看一下你的小程序在各种机型下的一个效果

在这里插入图片描述

有时候发现设置完了之后页面没有刷新,你可以点击刷新的图标,让你的程序重新编译一次

在这里插入图片描述

06 编辑预览区域

在编辑区我们可以看到有两个手机,左侧的手机是编辑区,我们可以将组件放入,进行组合搭建出我们想要的效果。右侧是预览区,是组件编译后真实的一个效果。

在这里插入图片描述

编辑区下边有个开发调试工具,帮助我们定位问题,我们在代码编辑器部分讲解如何进行代码调试

在这里插入图片描述

07 属性面板区

组件一般有三种内容可以设置,属性、事件、样式

在这里插入图片描述

不同的组件设置的属性不同,我们在组件部分讲解一下常用的组件的用法。事件的话通常需要自定义方法,需要有前端的开发能力,样式部分也需要懂常见的样式的设置方法。

总结

我们用了比较短的篇幅就介绍了模型应用,而自定义应用写了这么多也只是一个概述而已。因为小程序本身就需要懂开发才可以构建,后续篇幅我们展开讲一讲具体的每一块的功能。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/338566.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

logstash毫秒时间戳转日期以及使用业务日志时间戳替换原始@timestamp

文章目录问题解决方式参考问题 在使用Kibana观察日志排查问题时发现存在很多组的timestamp 数据一样,如下所示 详细观察内部数据发现其中日志数据有一个timestamp字段保存的是业务日志的毫秒级时间戳,经过和timestamp数据对比发现二者的时间不匹配。经…

1630_GNU的二进制分析工具nm简单使用探索

全部学习汇总: GreyZhang/toolbox: 常用的工具使用查询,非教程,仅作为自我参考! (github.com) GNU有一套二进制的分析工具,之前是用过objdump的,但是也没有系统掌握。如果做底层软件的设计,这些…

OpenWrt路由器设置域名动态解析手把手教程

文章目录0、前言1、准备工作2、详细步骤2.1、OpenWrt路由器软件包安装2.2、防火墙放行入站数据(修改为“接受”并保存应用)2.3、域名解析服务商对域名的解析设置2.4、路由器中动态域名插件的设置0、前言 因为一直用着内网穿透(zerotier或者是…

SQLyog Ultimate 13.2 Crack

SQLyog终极版 MySQL开发工具 让您的数据库开发人员在短时间内完成大量工作并不是确保质量结果的最佳方式。当涉及到您的 MySQL 数据库时,您不想偷工减料 — 尤其是当这样做会导致代价高昂的中断时。 使用 SQLyog 获得可靠的数据库备份和数据同步:一个强大…

HTTP协议路由转发小结

问题介绍:个人电脑 hosts 文件配置如下: xx.xx.xx.243 xxx.domain.com 其中 xx.xx.xx.243 是里约网关的服务器ip,而应用部署在 xx.xx.xx.93 上,但最终请求为何会转发到93这台服务器上呢? 原因是里约网关配置了转发规则…

【hello, world】计算机系统漫游

文章目录hello程序信息就是位 上下文程序被其他程序翻译成不同的格式预处理阶段编译阶段汇编阶段链接阶段了解编译系统如何工作是大有益处的优化程序性能理解链接时出现的错误避免安全漏洞处理器读并解释储存在内存中的指令系统的硬件组成总线I/O设备主存处理器运行hello程序高…

web3:区块链共识机制系列-POS(Proof of Stake)股权证明算法

web3相关学习一并收录至该博客:web3学习博客目录大全 前情衔接:web3:区块链常见的几大共识机制及优缺点 目录前言算法公式与原理算法公式运作原理以Peer Coin为例缺陷优点缺点特点分类发展历程casper协议1.什么是无成本利益关系问题2.引入casper协议解决…

力扣33.搜索旋转排序数组

文章目录力扣33.搜索旋转排序数组题目描述方法1&#xff1a;二分查找力扣33.搜索旋转排序数组 题目描述 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&…

Android框架WiFi架构

同学,别退出呀,我可是全网最牛逼的 WIFI/BT/GPS/NFC分析博主,我写了上百篇文章,请点击下面了解本专栏,进入本博主主页看看再走呗,一定不会让你后悔的,记得一定要去看主页置顶文章哦。 一、wpa_supplicant:wpa_supplicant本身开源项目源码,被谷歌收购之后加入Android移…

Python中的类和对象(4)

1. 构造函数 &#xff08;_ init _(self[,……])&#xff09; 在类中定义 _init _() 方法&#xff0c;可以实现在实例化对象的时候进行个性化定制&#xff1a; >>> class C: ... def __init__(self, x, y): ... self.x x ... self.y y ... …

离散数学 课时二 命题逻辑等值演算

等值式(等值联结词) 1、设A、B是两个命题公式,若A、B构成的等价式 A等价于B 为重言式,那么称A与B是等值的 2、常用等值式&#xff1a; 注意&#xff1a; 1 双否定律 2 幂等律 3 交换律 4 结合律 5 吸收律 6 德摩根律 7 同一律 8 零律 9 矛盾律 10 排中律 11 蕴含表达式 12 …

十分钟带你体验一下什么是分布式事务

我们经常在网上看到很多人发关于分布式事务的理论&#xff0c;但是讲实战的却非常少&#xff0c;所以我今天想通过一个案例&#xff0c;来让小伙伴们都感受一下什么是分布式事务&#xff0c;这篇文章理论偏少&#xff0c;请文明观看。咱们今天的主角是 Seata&#xff01; 分布…

Django项目开发

一.认识NoSQL 1.SQL 关系型数据库 结构化: 定义主键&#xff0c;无符号型数据等关联的&#xff1a;结构化表和表之间的关系通过外键进行关联&#xff0c;节省存储空间SQL查询&#xff1a;语法固定 SELECT id,name,age FROM tb_user WHERE id1 ACID 2.NoSQL 非关系型数据库 Re…

通过实例告诉你lua中ipairs到底是怎么遍历的!

这个的文章挺多的&#xff0c;但是有好几种说法并且不全。有人说是忽略手动设定值&#xff0c;有人说是从1开始数&#xff0c;直到序号断开&#xff0c;还有人给出结果&#xff0c;但是和我实机测试的效果不一样&#xff0c; 所以我自己总结一篇。经过我的测试和总结得到以下结…

【2023】Prometheus-Alertmanager高可用集群

本次实验准备了三个节点&#xff0c;分别为laert-01~03 目录1.安装Alertmanager2.配置启动文件3.验证集群4.关于集群的配置项1.安装Alertmanager 这部分内容在三个节点上都要执行 下载安装包&#xff0c;将安装包解压至/data目录下 wget https://github.com/prometheus/aler…

javassm高校学生评教系统的设计与实现idea msyql

伴随着社会以及科学技术的发展&#xff0c;互联网已经渗透在人们的身边&#xff0c;网络慢慢的变成了人们的生活必不可少的一部分&#xff0c;紧接着网络飞速的发展&#xff0c;管理系统这一名词已不陌生&#xff0c;越来越多的学校、公司等机构都会定制一款属于自己个性化的管…

Scout:一款功能强大的轻量级URL模糊测试与爬取工具

关于Scout Scout是一款功能强大的轻量级URL模糊测试与爬取工具&#xff0c;可以帮助广大研究人员进行URL模糊测试&#xff0c;并爬取目标Web服务器中难以扫描发现的VHSOT、文件和目录等资源。 项目中包含了一个完整的字典文件&#xff0c;并尽可能地提供了更多的便携性&#…

【寻人启事】达坦科技持续招人ing

​​​​​​​ ❤️一起来探索前沿科技&#xff0c;做有意思的事情~ 我们是谁 达坦科技&#xff08;DatenLord&#xff09;专注于打造新一代开源跨云存储平台。通过软硬件深度融合的方式打通云云壁垒&#xff0c;实现无限制跨云存储、跨云联通&#xff0c;建立海量异地、异构…

活动星投票在时间的河流上造园分组怎么设置如何进行分组报名

“在时间的河流上造园”网络评选投票_免费小程序运行系统_企业有关的投票_微信投票的应用小程序投票活动如何做&#xff1f;很多企业在运营当中&#xff0c;都会通过投票活动来进行推广&#xff0c;从而达到吸粉、增加用户粘度等效果。而此类投票活动&#xff0c;通过小程序就可…

雅思经验(十一)

写作&#xff1a;WRITINGTASK 2Governments should spend money on railways rather than roads.To what extent do you agree or disagree with this statement?Give reasons for your answer and include any relevant examples from your own knowledge or experience.思路…