如何在低代码平台中引用 JavaScript ?

引言

在当今快速发展的数字化时代,企业对业务应用的需求日益复杂且多元。低代码开发平台作为一个创新的解决方案,以直观易用的设计理念,打破了传统的编程壁垒,让非技术人员也能轻松构建功能完备的Web应用程序,无需深入编码。这一特性极大地简化了应用开发流程,加速了业务需求转化为实际应用的速度,为企业带来了前所未有的效率提升和业务灵活性。

然而,实际的业务环境充满了多样性和独特性。面对某些特定的、富有挑战性的业务场景,常规的功能模块可能难以满足所有的定制需求。因此,低代码开发平台提供了一个开放且强大的编程接口,使得无论是资深开发者还是具有一定编程基础的业务人员,都能在原有功能基础上进行深层次的定制开发,实现更复杂、更贴合业务特性的功能扩展。

今天小编就将以葡萄城公司的企业级低代码开发平台——活字格为例,为大家介绍一下如何在低代码平台中引用 CSS 和 JavaScript 。

环境准备

活字格低代码安装包

引入 CSS

CSS (Cascading Style Sheets) 是一种样式表语言,主要用于定义和控制网页内容(比如 HTML 元素)的布局、视觉表现和格式化。 CSS 的作用在于将网页内容与表现形式分离,使得开发者可以独立设计和更改文档的表现风格,包括但不限于字体、颜色、间距、布局、尺寸、动画效果等。

上图是在活字格中,可以上传自定义的 CSS 文件,活字格支持网络链接文件、本地文件,同时支持编辑 CSS 文件。

引入 JavaScript

活字格提供了三个地方设置 JavaScript 代码,具体如下表所示:

代码类型设置位置作用区域用例
JavaScript文件->设置->自定义 JavaScript / CSS整个应用程序制定一些工具方法,给多个页面所使用。
JavaScript页面设置当前页面当页面加载时做一些初始化的UI逻辑。
JavaScript命令当前命令如当单击命令时弹出一个警告框。

注册应用程序级别的 JavaScript 文件

有很多 JavaScript 文件是多个页面甚至整个应用的所有页面共享使用到的,那么为了能在您的整个应用中都可以使用到 JavaScript 文件,那么我们可以在活字格设计器的设置页面里上传整个应用程序级别的 JavaScript 文件。支持上传本地的 JavaScript 文件,也可以通过URL地址链接直接加载网络上的 JavaScript 文件。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 添加网络链接

  • 指定网络上的 JavaScript 地址链接,点击“保存”后, JavaScript 文件会以URL的形式显示。

  • 例如我们可以使用百度地图的 JavaScript API:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 添加本地文件
  • 本地的 JavaScript 文件都可以进行添加,同时也支持编辑上传的 JavaScript 文件。

我们举一个简单的实例,添加一个 JavaScript 文件,文件内写一个简单的加法方法。

接下来,我们在页面上就可以调用这里的 add 方法。

上面页面显示的内容大体逻辑是,为三个单元格进行了命令,分别为x,y,plus,当我们在x,y单元格输入数字值后,点击按钮执行 JavaScript 命令调用我们的 add 方法,就可以计算出对应的和。

具体代码如下:

var x = Forguncy.Page.getCell("x").getValue();
x = parseInt(x, 10);
var y = Forguncy.Page.getCell("y").getValue();
y = parseInt(y, 10);
var plus = add(x,y);
Forguncy.Page.getCell("plus").setValue(plus);

注册指定页面的 JavaScript 文件

除了在应用全局设置 JavaScript 文件以外,我们还可以针对某一个页面设置页面级别的 JavaScript 文件,用于处理当前页面的特殊逻辑。

说明:

  • 如果文件中包含中文,请确认文件使用的是Unicode编码。
  • 活字格内置了JQuery3.6.0库(活字格V10.0版本),可以在脚本中直接使用JQuery功能。

在活字格设计器中打开页面,然后在页面右侧工具栏中,可以在属性设置区中选择“页面设置”选项卡,单击“ JavaScript 文件”上传 JavaScript 文件,上传完成后,可对 JavaScript 文件进行删除或编辑操作。

//点击单元格之后弹出“点击按钮弹出窗口!”
Forguncy.Page.getCell("button").bind("click", () => {alert("点击按钮弹出窗口!")
});

以上我们上传了一个简单的 JavaScript 文件,当我们点击页面上的按钮时,会触发弹出一个警告弹出,效果如下所示:

指定元素的自定义 JavaScript

前面小编为大家介绍了注册应用程序级别的 JavaScript 文件和注册指定页面的 JavaScript 文件,除此之外,活字格还可以对指定元素的自定义JavaScript ,比如给单元格设置 JavaScript 命令。

//点击单元格之后弹出“复制成功”
Forguncy.Page.getCell("duplicate").setValue(Forguncy.Page.getCell("value").getValue());
alert("复制成功!");

实现效果如下所示:

引入JavaScript API

通过上面演示,可以看到,在活字格中可以通过 JavaScript 操作页面、单元格,除此之外,还可以操作页面上的表格,接下来我们通过一个示例来演示下如何操作表格。

先新建一张数据表,然后将这个数据表绑定到页面上,并给表格的列设置好列名,最后给【添加记录】按钮设置 JavaScript 命令给数据表添加一行新数据。

//获取当前页面
var page = Forguncy.Page;
//获取页面上的表格
var listview = page.getListView("表格1");
//添加新行
listview.addNewRow({"name": "Jack","sex": "male","age": "17"}
);

可以看到,当我们触发按钮命令时,就可以通过刚才的 JavaScript 命令为表格添加了一行新数据。

通过以上示例,可以看到,活字格提供了非常丰富的 JavaScript 接口API,可以对活字格页面、单元格、表格等进行各种各样的操作,如果对这些接口API想要进行更深入的了解,可以参看活字格的 JavaScript 接口文档。

调试 JavaScript 及 CSS 代码

和纯代码调试一样,活字格在页面中应用 JavaScript 或 CSS 代码后,也可以在浏览器中对代码进行调试。下面小编以最新版本的Mircorsoft Edge浏览器为例,为大家介绍如何对 JavaScript 及 CSS 代码进行调试。

操作步骤

1、设计器运行:在设计器中运行应用;

2、在浏览器中按F12打开开发者工具,选择“源代码”(Sources);

可以看到,我们加入的 JavaScript 和 CSS 代码在GeneratedResources下,如上图标记所示。

其中:

  • 命令中的 JavaScript 指 JavaScript 命令中的代码。
  • 应用程序中的 JavaScript 指在“设置->自定义 JavaScript / CSS 代码”的 JavaScript 文件。
  • 应用程序中的 CSS 指在“设置->自定义 JavaScript / CSS 代码”的 CSS 文件。
  • 页面设置中的 JavaScript 指在页面设置中上传的 JavaScript 文件。

3、找到对应的代码后,在浏览器控制台给代码添加断点,即可进行运行调试。

最后附上使用活字格实现的完整的文件工程链接: https://gitee.com/GrapeCity/reference_-java-script_in_lowcode

总结

以上就是如何在低代码平台中引用 JavaScript 的全过程,如果您想了解更多信息,欢迎点击这里查看。

扩展链接:

从表单驱动到模型驱动,解读低代码开发平台的发展趋势

低代码开发平台是什么?

基于分支的版本管理,帮助低代码从项目交付走向定制化产品开发

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

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

相关文章

Linux搭建mysql环境

搭建 MySQL 环境 1、使用 wget 下载安装包,下载到 opt 目录中 wget http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm2、安装 MySQL 公钥 rpm -i mysql57-community-release-el7-10.noarch.rpmrpm --import https://repo.mysql.com/RPM-GP…

【设计模式】之责任链模式

系列文章目录 【设计模式】之策略模式 文章目录 系列文章目录 前言 一、什么是责任链模式 二、有什么使用场景呢 三、如何使用责任链模式 总结 前言 上次我们了解了设计模式中的策略模式,今天我们继续学习责任链模式。🌈 一、什么是责任链模式 为…

GZIP文件格式解析和Inflate静态Huffman解压缩

GZIP是封装了Deflate压缩的格式文件;Deflate使用了无压缩、HuffmanLZ77进行压缩;解压是Inflate,Huffman包括静态Huffman压缩和动态Huffman压缩两种模式。 Java语言实现了GZIP格式解析、Inflate的静态Huffman解压缩、CRC32校验 算法。 gzip文…

精准测试-Vue前端调用链影响变更分析之一

Vue前端调用链影响变更分析之一 一、背景二、工具调研1、 工具介绍:2、工具使用 三、工具落地集成方案(待后续补充)变更影响较为简单的实现变更影响较为复杂的实现1、全局关系数据库的构建2、变更影响的简单实现3、变更影响的复杂实现 一、背…

ElasticSearch教程入门到精通——第一部分(基于ELK技术栈elasticsearch 8.x新特性)

ElasticSearch教程入门到精通——第一部分(基于ELK技术栈elasticsearch 8.x新特性) 1. ElasticSearch安装(略)2. ElasticSearch基础功能2.1 索引操作2.1.1 创建索引2.1.2 Head 索引2.1.3 查询索引2.1.3.1 查询单独索引2.1.3.2 查询…

Instal IIS on Windows Server 2022 Datacenter

和以往版本一样,没有什么不同,So easy! WinR - ServerManager.exe 打开服务器管理器,点击【添加角色和功能】,选择自己想要的角色和功能。 一、开始之前:帮助说明,点击【下一步】;…

双塔模型模型结构、样本选择、训练方式、线上服务、模型更新

召回模型目的是快速选取用户可能感兴趣的物品,凡事用户可能感兴趣的都取回来 然后交给后续排序模型逐一甄别。 双塔模型结构 不止能使用id特征(能使用id之外的其他特征),用户侧能用画像等其他特征,包括离散特征和连续…

vue3 element-plus 让el-container占满屏幕

在刚开始用element-plus的布局时&#xff0c;发现无法占满屏幕&#xff1a; 在App.vue中添加如下css代码&#xff1a; <style>html, body, #app {margin: 0;padding: 0;height: 100%;} </style>同时布局代码所在的component如下所示&#xff1a; <template&g…

C++ | Leetcode C++题解之第64题最小路径和

题目&#xff1a; 题解&#xff1a; class Solution { public:int minPathSum(vector<vector<int>>& grid) {if (grid.size() 0 || grid[0].size() 0) {return 0;}int rows grid.size(), columns grid[0].size();auto dp vector < vector <int>…

SSL通信、证书认证原理和失败原因

目录 SSL通信SSL认证原理SSL证书认证失败的原因分析 SSL通信 SSL通信指的是使用SSL&#xff08;Secure Sockets Layer&#xff09;协议进行的加密通讯。SSL是一种标准的安全技术&#xff0c;用于建立一个加密链接&#xff0c;确保从用户的浏览器到服务器之间的数据传输是私密和…

自定义 Dockerfile 构建 PostgreSQL 15 编译版 Docker 镜像

BG 前几日 Sean 老师发布了一篇文章 – PostgreSQL安装(一): 再简单点儿&#xff0c;用Docker?, 介绍如何快速安装启动 PostgreSQL 数据库。 本文再稍微延伸一点&#xff0c;介绍一下如何自定义 Dockerfile&#xff0c;加入自己想要预制的参数&#xff0c;构建一个自定义的 …

react核心知识

1. 对 React 的理解、特性 React 是靠数据驱动视图改变的一种框架&#xff0c;它的核心驱动方法就是用其提供的 setState 方法设置 state 中的数据从而驱动存放在内存中的虚拟 DOM 树的更新 更新方法就是通过 React 的 Diff 算法比较旧虚拟 DOM 树和新虚拟 DOM 树之间的 Chan…

web响应式页面是啥要注意啥

Web响应式页面是一种能够根据不同设备和屏幕尺寸自动调整布局、内容和功能的网页设计方式。这种设计方式的核心在于确保网页在各种平台上都能够正确显示和操作&#xff0c;为用户提供一致且良好的浏览体验。 在设计Web响应式页面时&#xff0c;有几个关键的注意事项&#xff1a…

JavaScript中的深拷贝与浅拷贝

目录 引言&#xff1a; 一、浅拷贝&#xff08;Shallow Copy&#xff09; 二、深拷贝&#xff08;Deep Copy&#xff09; 实现深拷贝的方法&#xff1a; 1.使用JSON.parse(JSON.stringify(obj)) 2.使用递归实现深拷贝 三、总结 引言&#xff1a; 在JavaScript中&#xff0…

安卓接入wwise

第一步&#xff1a; #include "com_hs_androidjnidemo_MainActivity.h" #include "jni.h" #include <stdio.h> #include <YLWwiseEngine.h> #include <AK/SoundEngine/Common/AkTypes.h>//全局变量 gaden JavaVM *g_vm;//0.JNI_OnLoad J…

暂时性解决JDK21 无法使用 TimeUnit的问题

我调用 java.util中的TimeUtil时。 JDK17及以下版本时这样正常可以使用的 但是在JDK21中却是个TimeUtil.class文件 我没法调用内部的属性 解决方式&#xff1a;是我卸载了21&#xff0c;使用的了JDK17. 使用场景&#xff1a;原本项目是基于JDK8 的&#xff0c;但是因为其他…

关于kline-chart图表程序的一些构想

之前在这儿&#xff1a;一个python实现的kline-chart图表程序&#xff08;二&#xff09;_klinechart教程-CSDN博客 实现了一个看起来不错的K线图表的功能&#xff0c;可以按要求生成对应的图形。不过还是有些问题。比如我想做一个缠论关于笔&#xff0c;线段&#xff0c;中枢等…

什么是限流?常见的限流算法

目录 1. 什么是限流 2. 常见限流算法 3. 固定窗口算法 4. 滑动窗口算法 5. 漏桶算法 6. 令牌桶算法 7. 限流算法选择 1. 什么是限流 限流&#xff08;Rate Limiting&#xff09;是一种应用程序或系统资源管理的策略&#xff0c;用于控制对某个服务、接口或功能的访问速…

Sortable 拖拽行实现el-table表格顺序号完整例子,vue 实现表格拖拽行顺序号完整例子

npm install sortable<template><vxe-modalref"modalRef"v-model"showModal"title"详情"width"70vw"height"60vh"class"his"transfer><el-table ref"tableRef" :data"tableData&q…