微搭低代码从入门到精通06-代码编辑器

news2024/9/27 12:11:51

有初学的同学一直有个疑问,什么叫低代码。低代码的特点是提供了大量的前端组件,我们在开发小程序的时候可以直接拖拽就完成了界面的开发。

但是一款APP的开发只有界面是不够的,还需要有交互逻辑,比如我们在会员小程序里充值的时候需要对余额进行累加,而消费的时候又要让余额进行对应的扣减。

凡是涉及到以上有逻辑的,一般使用代码开发就比较灵活。为了实现代码开发,微搭提供了代码编辑器,让我们可以按照需要编写自己的代码。这里的代码是指前端代码,使用的语言是JavaScript。本篇我们讲解一下代码编辑器的使用。

打开应用编辑器,在顶部导航条点击代码编辑器

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

01 生命周期函数

在微搭中生命周期函数分为全局生命周期和页面生命周期,全局生命周期是指小程序级别,比如小程序启动,切到后台,再显示,报错等。页面生命周期指具体的页面加载完毕,打开新页面隐藏,再次显示等。

在代码编辑器的第一次lifecycle是指全局生命周期

在这里插入图片描述

在小程序启动时候我们可以初始化数据,比如我们小程序一启动的时候就从用户表加载用户数据,赋值给全局变量我们在后续页面就可以直接访问用户的各项数据。

点击具体某个页面的lifecycle就是页面的生命周期,我们在页面生命周期函数可以预加载一些数据,比如根据传入的数据标识加载该条数据。

在这里插入图片描述

02 设置样式

除了生命周期函数做数据的初始化外,微搭还支持样式的编写。样式也分为全局样式和自定义样式。编写样式的好处是一次编写,组件可以直接复用。但有时候将样式写在style里增加了复杂度,后续维护的时候还需要打开代码编辑器来看具体的样式类是如何定义的。

在这里插入图片描述

以我个人的经验,本身小程序限制你应用的大小不能超过2MB,就决定了你不可能做太多的页面,功能不会太复杂,将样式设置在组件上反倒比较方便一点。

再一个如果手工编写样式类,也要求你对前端开发掌握的比较好,本身使用低码工具就是为了提效,还没开始开发就先学习CSS从成本上来讲也划不来。微搭提供的常用可视化样式设置界面基本涵盖了我们日常使用的各种样式,也无需额外的编写样式类。

03 自定义方法

自定义方法就是我们编写业务逻辑的地方,比如你要从数据库里查询数据,又或者根据不同的条件,跳转到不同的页面。这些都需要将逻辑写入到自定义方法中。

自定义方法创建也比较简单,只需找到对应的页面,在handler旁边点击+号就可以创建

在这里插入图片描述

创建成功后会生成代码模板,我们只需要按照自己的需求实现逻辑即可

在这里插入图片描述

模板里的代码function里边有两个参数,这里的参数叫做入参,event表示事件对象,data表示调用事件是传入的参数。不同的组件这里的值不同。

对应我们不了解的内容我们通常向控制台输出信息来学习,向控制台输出信息可以使用console.log方法,比如我们输出一下event和data我们就可以在方法的大括号中间进行输出

export default function({event, data}) {
   console.log(event,data)
}

自定义方法如果想起作用,需要给组件设置事件,比如我们给文本组件设置点击时候调用我们定义的自定义方法

在这里插入图片描述

设置时候要在哪看到我们输出的信息呢,点击开发调试工具,在控制台里看具体的输出

在这里插入图片描述

因为微搭不支持断点调试,我们没有办法设置断点让代码一步步的执行,所以通常都需要借助console.log方法来看我们代码执行的结果,看看结果和你的预期是否符合,不符合再排查原因。

总结

我们本节介绍了代码编辑器可以做哪些事情,理论上你前端代码写的任何事情微搭是都可以完成的,如果不可以,只能说现在产品排期还没有把这项功能纳入进来,随着产品的发展,能力是在逐步增强的。

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

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

相关文章

Linux服务器部署xxl-job

Linux服务器部署xxl-job Linux服务器部署xxl-jobLinux服务器部署xxl-jobxxl-job文档文档中要求的环境Maven下载:JDK下载:MySQL下载:部署MySQL上传MySQL安装包到服务器解压,安装配置文件启动MySQL查看初始密码使用初始密码登录MySQ…

分享一个可用的ChatGPT网页及备选方案

本文本来是在咱公众号分享,被一些跳蚤、苍蝇、蚊子和老鼠给搞臭了,故在此重新分享,欢迎那些跳蚤、苍蝇、蚊子和老鼠继续来战! 近来ChatGPT可谓是火得不可开交!各路牛鬼蛇神不管懂与不懂都借这阵ChatGPT风勇占流量高地…

c++11 标准模板(STL)(std::multimap)(四)

定义于头文件 <map> template< class Key, class T, class Compare std::less<Key>, class Allocator std::allocator<std::pair<const Key, T> > > class multimap;(1)namespace pmr { template <class Key, class T…

【JVM】7种经典的垃圾收集器

文章目录1. 垃圾收集器概述2. Serial 收集器3. ParNew 收集器4. Paraller Scavenge 收集器5. Serial Old收集器6. Parller Old收集器7. CMS 收集器8. Garbage First 收集器本文参考&#xff1a;深入理解Java虚拟机&#xff1a;JVM高级特性与最佳实践&#xff08;第3版&#xff…

Ubuntu安装配置Cuda和Pytorch gpu

前言 在Ubuntu中操作系统中,通过Anconda安装对应的虚拟环境以及软件包,一般都需要适配Cuda、Pytorch版本等 以下安装配置都是在Ubuntu操作系统下 1. 安装Cuda 通过Ubuntu操作系统查看cuda适配的版本:nvidia-smi 截图如下: 查看Ubuntu版本可如下方式 (1)cat /proc/ver…

QT QOpenGLWidget使用说明(一)OpenGL 类的添加

文章目录一.Qt项目中添加OpenGL库二.添加OpenGL类Qt官网关于 QOpenGLWidget的说明: https://doc.qt.io/qt-6.2/qopenglwidget.html一.Qt项目中添加OpenGL库 cmakeList.txt中添加OpenGL库 find_package(Qt6 COMPONENTS OpenGLWidgets REQUIRED) target_link_libraries(mytarget …

Shader(向量)

单位向量向量加法向量的模向量点乘&#xff08;夹角>0则在前方&#xff0c;反之后方&#xff09;5.向量的投影6.向量的减法7.向量的叉乘&#xff08;可以判断点是否在三角形内&#xff09;满足AB*AP,BC*BP,CA*CP都大于0或者都小于0则P点在三角形内

STM32单片机蓝牙APP可烘干升降晾衣架带照明灯

实践制作DIY- GC0123-蓝牙APP可烘干升降晾衣架 一、功能说明&#xff1a; 基于STM32单片机设计-蓝牙APP可烘干升降晾衣架 功能介绍&#xff1a; 硬件组成&#xff1a; STM32F103C系列最小系统单片机1个uln2003步进电机&#xff08;模拟升降&#xff09;1个uln2003步进电机&a…

刘润:五维思考,让你站得更高、看得更远

原标题&#xff1a;刘润&#xff1a;五维思考&#xff0c;让你站得更高、看得更远 前言&#xff1a;遇到问题时&#xff0c;有的人很快就能想明白&#xff0c;有的人需要很久才能想明白&#xff0c;还有的人始终都想不明白。 而且&#xff0c;那些很快就能想明白的人&#xff0…

大数据之Hadoop

文章目录一、大数据概论1、大数据概念2、大数据的特点3、大数据应用场景4、大数据部门的业务流程分析5、大数据部门组织结构&#xff08;重点&#xff09;二、从Hadoop框架讨论大数据生态1、什么是Hadoop2、Hadoop发展历史3、Hadoop三大发行版本1.Apache Hadoop2.Cloudera Hado…

Rust学习入门--【6】Rust 基础语法

Rust 基础语法 变量&#xff0c;数据类型&#xff0c;注释&#xff0c;函数和控制流&#xff0c;这些是大部分编程语言都具有的编程概念。 本节将学习理解这些概念。 变量 Rust 是强类型语言&#xff0c;但具有自动判断变量类型的能力。这很容易让人与弱类型语言产生混淆。…

Sentinel源码解析-ProcessorSlot具体

前言 上篇文章中我们已经讲到了构造完处理链&#xff0c;然后会调用对应slot的entry方法&#xff0c;我们根据配置文件中Slot的具体顺序来逐一讲解Slot的具体实现。 一、NodeSelectorSlot 这个 slot 主要负责收集资源的路径&#xff0c;并将这些资源的调用路径&#xff0c;以…

ssm学生在线选课成绩教案管理系统java

基于JSP技术、SSM框架、B/S机构、Mysql数据库设计并实现了教案管理系统。系统主要包括个人中心、学生管理、教师管理、公告信息管理、科目管理、课程信息管理、选课记录管理、学生成绩管理、系统管理等功能模块。结合实际项日的功能需求&#xff0c;从研究背景、国内发展的现状…

C++ 基础

命名空间 在 C/C 中&#xff0c;变量、函数和类都是大量存在的&#xff0c;这些变量、函数和类的名称将都存在全局作用域中&#xff0c;可能会导致很多冲突。使用命名空间的目的是对标识符的名称进行本地化&#xff0c;以避免命名冲突或名字污染&#xff0c;namespace 关键字的…

就现在!为元宇宙和Web3对互联网的改造做准备!

欢迎来到Hubbleverse &#x1f30d; 关注我们 关注宇宙新鲜事 &#x1f4cc; 预计阅读时长&#xff1a;8分钟 本文仅代表作者个人观点&#xff0c;不代表平台意见&#xff0c;不构成投资建议。 如今&#xff0c;互联网是各种不同的网站、应用程序和平台的集合。由于彼此分离…

微信小程序Springboot 校园拼车自助服务系统java

系统管理员&#xff1a; 管理员账户管理&#xff1a;在线对管理员的账户信息进行管理&#xff0c;包括对管理员信息的增加修改以及密码的修改等。 站内新闻管理&#xff1a;在后台对站内新闻信息进行发布&#xff0c;并能够对站内新闻信息进行删除修改等。 论坛版块管理&#x…

SpringMVC--注解配置SpringMVC、SpringMVC执行流程

注解配置SpringMVC 使用配置类和注解代替web.xml和SpringMVC配置文件的功能 创建初始化类&#xff0c;代替web.xml 在Servlet3.0环境中&#xff0c;容器会在类路径中查找实现javax.servlet.ServletContainerInitializer接口的类&#xff0c; 如果找到的话就用它来配置Servle…

69. x 的平方根

文章目录题目描述二分法参考文献题目描述 给你一个非负整数 x &#xff0c;计算并返回 x 的 算术平方根 。 由于返回类型是整数&#xff0c;结果只保留 整数部分 &#xff0c;小数部分将被 舍去 。 注意&#xff1a;不允许使用任何内置指数函数和算符&#xff0c;例如 pow(x…

pwn手记录题1

fuzzerinstrospector(首届数字空间安全攻防大赛) 主体流程&#xff08;相对比较简单&#xff0c;GLibc为常见的2.27版本&#xff0c; Allocate申请函数&#xff08;其中有两个输入函数Read_8Int、Read_context&#xff1b; 还存在着后门函数&#xff1b; 关键点在于如何利用…

微服务项目(mybatis与微服务注册)

目录 一、SpringBoot整合MybatisPlus 创建自动生成代码子模块 创建商品服务子模块 二、SpringBoot整合 Freeamarker 三、SpringBoot整合微服务&gateway&nginx 整合微服务之商品服务zmall-product 创建并配置网关gateway服务 安装配置SwitchHosts 安装配置Windows…