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

news/2024/7/20 3:15:17 标签: 低代码, 小程序, 微搭

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

但是一款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.niftyadmin.cn/n/58433.html

相关文章

二叉树的四种遍历方式(二)

接上文《二叉树的四种遍历方式(一)》(https://blog.csdn.net/helloworldchina/article/details/128895188),在本文讲述一下第四种遍历方式,即按层次遍历二叉树。 一 讲解 1 先序遍历二叉树, 见…

数据仓库层Repository(CrudRepository、PagingAndSortingRepository、JpaRepository)

什么是数据仓库层Repository? 数据仓库接口的作用:Repository原意指的是仓库,即数据仓库的意思。Repository居于业务层和数据层之间,将两者隔离开来,在它的内部封装了数据查询和存储的逻辑。 Repository接口&#xff…

OpenCV 图像梯度算子

本文是OpenCV图像视觉入门之路的第12篇文章,本文详细的介绍了图像梯度算子的各种操作,例如:Sobel算子Scharr算子laplacian算子等操作。 OpenCV 图像梯度算子目录 1 Sobel算子 2 Scharr算子 3 laplacian算子 1 Sobel算子 Sobel算子是一种图…

【java】springboot项目启动数据加载内存中的三种方法

文章目录一、前言二、加载方式2.1、 第一种:使用PostConstruct注解(properties/yaml文件)。2.2、 第二种:使用Order注解和CommandLineRunner接口。2.3、 第三种:使用Order注解和ApplicationRunner接口。三、代码示例3.…

Power BI 筛选器函数---Window实例详解

一、Window函数 语法&#xff1a; Window ( <起始位置>,<起始位置类型>,<结束位置>,<结束位置类型>, [<关系>], [<OrderBy>],[空白],[PartitionBy] ) 含义&#xff1a; 对指定分区&#xff08;PartitioinBy)中的行&#xff08;关系表&…

【竞赛题】6354. 找出数组的串联值

题目&#xff1a; 给你一个下标从 0 开始的整数数组 nums 。 现定义两个数字的 串联 是由这两个数值串联起来形成的新数字。 例如&#xff0c;15 和 49 的串联是 1549 。 nums 的 串联值 最初等于 0 。执行下述操作直到 nums 变为空&#xff1a; 如果 nums 中存在不止一个数…

洛谷2月普及组(月赛)

&#x1f33c;小宇&#xff08;治愈版&#xff09; - 刘大拿 - 单曲 - 网易云音乐 OI赛制且难度对标蓝桥杯省赛&#xff08;&#x1f625;真难&#xff0c;第三题做了几百年&#xff0c;第四题只敢骗骗分&#xff09; 花了10块钱&#x1f643; 买官网的思路&#xff0c;结果…

Docker进阶 - 13. Docker 容器监控之 CAdvisor+InfluxDB+Granfana (CIG) 简介

目录 1. CIG 产生原因 2. CIG 是什么 3. CIG 详细介绍 1. CIG 产生原因 使用docker stats命令可以看到当前宿主机上所有容器的CPU,内存以及网络流量等数据&#xff0c;简单的监控够用。但是docker stats统计结果只能是当前宿主机的全部容器&#xff0c;数据资料是实时的&am…