Einführung
Im heutigen, sich schnell entwickelnden digitalen Zeitalter werden die Anforderungen von Unternehmen an Geschäftsanwendungen immer komplexer und vielfältiger. Als innovative Lösung überwindet die Low-Code-Entwicklungsplattform traditionelle Programmierbarrieren mit einem intuitiven und benutzerfreundlichen Designkonzept und ermöglicht es technisch nicht versiertem Personal, problemlos voll funktionsfähige Webanwendungen ohne tiefgreifende Programmierkenntnisse zu erstellen. Diese Funktion vereinfacht den Anwendungsentwicklungsprozess erheblich, beschleunigt die Umwandlung von Geschäftsanforderungen in praktische Anwendungen und bringt beispiellose Effizienzsteigerungen und Geschäftsflexibilität für Unternehmen.
Das tatsächliche Geschäftsumfeld ist jedoch voller Vielfalt und Einzigartigkeit. Angesichts bestimmter spezifischer und herausfordernder Geschäftsszenarien sind herkömmliche Funktionsmodule möglicherweise nicht in der Lage, alle Anpassungsanforderungen zu erfüllen. Daher bietet die Low-Code-Entwicklungsplattform eine offene und leistungsstarke Programmierschnittstelle, die es sowohl erfahrenen Entwicklern als auch Geschäftsmitarbeitern mit einer bestimmten Programmiergrundlage ermöglicht, eine tiefgreifende kundenspezifische Entwicklung auf der Grundlage der ursprünglichen Funktionen durchzuführen, um komplexere und stärkere Funktionserweiterungen zu erreichen passt zu den Geschäftsmerkmalen.
Heute wird der Herausgeber die Low-Code-Entwicklungsplattform für Unternehmen der Grape City Company – Movable Type Grid – als Beispiel nehmen, um vorzustellen, wie CSS und JavaScript in der Low-Code-Plattform referenziert werden.
Umweltvorbereitung
Bewegliches Low-Code-Installationspaket
CSS einführen
CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, die hauptsächlich zur Definition und Steuerung des Layouts, der visuellen Darstellung und Formatierung von Webinhalten (z. B. HTML-Elementen) verwendet wird. Die Rolle von CSS besteht darin, den Inhalt einer Webseite von der Präsentation zu trennen, sodass Entwickler den Präsentationsstil des Dokuments unabhängig entwerfen und ändern können, einschließlich, aber nicht beschränkt auf Schriftarten, Farben, Abstände, Layout, Größe, Animationseffekte usw.
Das Bild oben befindet sich im Raster für bewegliche Schriftarten, in das Sie benutzerdefinierte CSS-Dateien hochladen können. Das Raster für bewegliche Schriftarten unterstützt Netzwerk-Link-Dateien und lokale Dateien und unterstützt die Bearbeitung von CSS-Dateien.
Einführung in JavaScript
Movable Type Grid bietet drei Orte zum Festlegen von JavaScript-Code, wie in der folgenden Tabelle gezeigt:
| Codetyp | Ort festlegen | Aktionsbereich | Beispiel |
|---|---|---|---|
| JavaScript | Datei->Einstellungen->Benutzerdefiniertes JavaScript/CSS | gesamte Anwendung | Entwickeln Sie einige Tools und Methoden, die von mehreren Seiten verwendet werden können. |
| JavaScript | Seiteneinstellungen | Die aktuelle Seite | Führen Sie beim Laden der Seite eine anfängliche UI-Logik durch. |
| JavaScript | Befehl | aktueller Befehl | Beispielsweise erscheint ein Warnfeld, wenn auf einen Befehl geklickt wird. |
Registrieren Sie JavaScript-Dateien auf Anwendungsebene
Es gibt viele JavaScript-Dateien, die von mehreren Seiten oder sogar allen Seiten der gesamten Anwendung gemeinsam genutzt werden. Um JavaScript-Dateien in Ihrer gesamten Anwendung zu verwenden, können wir die gesamte Anwendung auf der Einstellungsseite des Designers für bewegliche Schriftarten hochladen JavaScript-Dateien. Unterstützt das Hochladen lokaler JavaScript-Dateien und kann JavaScript-Dateien auch direkt über URL-Adresslinks in das Netzwerk laden.
-
Weblink hinzufügen
-
Geben Sie den JavaScript-Adresslink im Internet an und klicken Sie auf „Speichern“. Die JavaScript-Datei wird in Form einer URL angezeigt.
-
Beispielsweise können wir die JavaScript-API von Baidu Map verwenden:
- Lokale Datei hinzufügen
- Lokale JavaScript-Dateien können hinzugefügt und hochgeladene JavaScript-Dateien können auch bearbeitet werden.
Nehmen wir ein einfaches Beispiel, fügen Sie eine JavaScript-Datei hinzu und schreiben Sie eine einfache Additionsmethode in die Datei.
Als nächstes können wir die Add-Methode hier auf der Seite aufrufen.
Die allgemeine Logik des auf der obigen Seite angezeigten Inhalts besteht darin, dass Befehle an drei Zellen gegeben werden, nämlich x, y und plus. Nachdem wir numerische Werte in die x- und y-Zellen eingegeben haben, klicken Sie auf die Schaltfläche, um den Befehl auszuführen JavaScript-Befehl zum Aufrufen unserer Add-Methode. Die entsprechende Summe kann berechnet werden.
Der spezifische Code lautet wie folgt:
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);
Registrieren Sie die JavaScript-Datei der angegebenen Seite
Zusätzlich zum globalen Festlegen von JavaScript-Dateien in der Anwendung können wir auch JavaScript-Dateien auf Seitenebene für eine bestimmte Seite festlegen, um die spezielle Logik der aktuellen Seite zu verarbeiten.
veranschaulichen:
- Wenn die Datei chinesische Zeichen enthält, bestätigen Sie bitte, dass die Datei die Unicode-Codierung verwendet.
- Movable Type Grid verfügt über eine integrierte JQuery3.6.0-Bibliothek (Movable Type Grid V10.0-Version) und Sie können JQuery-Funktionen direkt in Skripten verwenden.
Öffnen Sie die Seite im Movable Type Designer und wählen Sie dann in der Symbolleiste auf der rechten Seite der Seite die Registerkarte „Seiteneinstellungen“ im Bereich „Eigenschaften“ aus. Klicken Sie auf „JavaScript-Datei“, um die JavaScript-Datei hochzuladen Sobald der Upload abgeschlossen ist, können Sie die JavaScript-Datei bearbeiten. Führen Sie Lösch- oder Bearbeitungsvorgänge durch.
//点击单元格之后弹出“点击按钮弹出窗口！”
Forguncy.Page.getCell("button").bind("click", () => {
alert("点击按钮弹出窗口！")
});
Oben haben wir eine einfache JavaScript-Datei hochgeladen. Wenn wir auf die Schaltfläche auf der Seite klicken, wird ein Warn-Popup ausgelöst. Der Effekt ist wie folgt:
Benutzerdefiniertes JavaScript für bestimmte Elemente
Zuvor hat Ihnen der Editor die Registrierung von JavaScript-Dateien auf Anwendungsebene und die Registrierung von JavaScript-Dateien für bestimmte Seiten vorgestellt. Darüber hinaus kann das bewegliche Textraster auch JavaScript für bestimmte Elemente anpassen, z. B. das Festlegen von JavaScript-Befehlen für Zellen.
//点击单元格之后弹出“复制成功”
Forguncy.Page.getCell("duplicate")
.setValue(Forguncy.Page.getCell("value").getValue());
alert("复制成功！");
Der Implementierungseffekt ist wie folgt:
Einführung in die JavaScript-API
Anhand der obigen Demonstration können Sie sehen, dass Sie im beweglichen Textraster Seiten und Zellen über JavaScript bedienen können. Als Nächstes werden wir die Bedienung der Tabelle anhand eines Beispiels demonstrieren .
Erstellen Sie zunächst eine neue Datentabelle, binden Sie dann die Datentabelle an die Seite und legen Sie Spaltennamen für die Spalten der Tabelle fest. Legen Sie abschließend einen JavaScript-Befehl für die Schaltfläche [Datensatz hinzufügen] fest, um den Daten eine Zeile mit neuen Daten hinzuzufügen Tisch.
//获取当前页面
var page = Forguncy.Page;
//获取页面上的表格
var listview = page.getListView("表格1");
//添加新行
listview.addNewRow(
{
"name": "Jack",
"sex": "male",
"age": "17"
}
);
Wie Sie sehen können, können wir beim Auslösen des Schaltflächenbefehls gerade über den JavaScript-Befehl eine neue Datenzeile zur Tabelle hinzufügen.
Anhand der obigen Beispiele können Sie sehen, dass das Raster für bewegliche Schriftarten eine sehr umfangreiche JavaScript-Schnittstellen-API bereitstellt, die verschiedene Vorgänge auf den Seiten, Zellen, Tabellen usw. des Rasters für bewegliche Schriftarten ausführen kann. Wenn Sie diese Schnittstelle besser verstehen möchten APIs finden Sie in der Dokumentation zur JavaScript-Schnittstelle von Movable Type Grid .
Debuggen von JavaScript- und CSS-Code
Wie beim reinen Code-Debuggen können Sie den Code auch im Browser debuggen, nachdem Sie JavaScript- oder CSS-Code auf die Seite angewendet haben. Der folgende Editor verwendet die neueste Version des Mircorsoft Edge-Browsers als Beispiel, um das Debuggen von JavaScript- und CSS-Code vorzustellen.
Schritte
1. Designer-Ausführung: Führen Sie die Anwendung im Designer aus.
2. Drücken Sie F12 im Browser, um die Entwicklertools zu öffnen und wählen Sie „Quellen“;
Sie können sehen, dass sich der von uns hinzugefügte JavaScript- und CSS-Code unter GeneratedResources befindet, wie durch die Markierungen im Bild oben dargestellt.
In:
- JavaScript in einem Befehl bezieht sich auf den Code im JavaScript-Befehl.
- JavaScript in der Anwendung bezieht sich auf die JavaScript-Datei unter „Einstellungen->Benutzerdefinierter JavaScript/CSS-Code“.
- Das CSS in der Anwendung verweist auf die CSS-Datei unter „Einstellungen->Benutzerdefinierter JavaScript/CSS-Code“.
- Unter „JavaScript in den Seiteneinstellungen“ versteht man die in den Seiteneinstellungen hochgeladenen JavaScript-Dateien.
3. Nachdem Sie den entsprechenden Code gefunden haben, fügen Sie dem Code in der Browserkonsole einen Haltepunkt hinzu, um ihn auszuführen und zu debuggen.
Hängen Sie abschließend den Link zum vollständigen Dateiprojekt mithilfe eines Rasters mit beweglicher Schriftart an: https://gitee.com/GrapeCity/reference_-java-script_in_lowcode
Zusammenfassen
Das Obige ist der gesamte Prozess zum Referenzieren von JavaScript in einer Low-Code-Plattform. Wenn Sie weitere Informationen erhalten möchten, klicken Sie bitte hier, um diese anzuzeigen.
Erweiterungslink:
Was ist eine Low-Code-Entwicklungsplattform?
Ein in den 1990er Jahren geborener Programmierer hat eine Videoportierungssoftware entwickelt und in weniger als einem Jahr über 7 Millionen verdient. Das Ende war sehr bestrafend! High-School-Schüler erstellen im Rahmen einer Coming-of-Age-Zeremonie ihre eigene Open-Source-Programmiersprache – scharfe Kommentare von Internetnutzern: Der inländische Dienst Taobao (taobao.com) verließ sich aufgrund des grassierenden Betrugs auf RustDesk und stellte die inländischen Dienste ein und startete die Arbeit zur Optimierung der Webversion von Java neu 17 ist die am häufigsten verwendete Java LTS-Version. Windows 11 erreicht weiterhin einen Rückgang. Open Source Daily unterstützt die Übernahme von Open Source Rabbit R1; Electric schließt die offene Plattform Apple veröffentlicht M4-Chip Google löscht Android Universal Kernel (ACK) Unterstützung für RISC-V-Architektur Yunfeng ist von Alibaba zurückgetreten und plant, in Zukunft unabhängige Spiele auf der Windows-Plattform zu produzieren