如何在低代碼平臺中引用 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"
    }
);