如何使用C#編寫低代碼應用插件

前言

作爲當今快速發展的技術之一，低代碼平臺爲開發人員提供了更高效、更簡便的工具和方法，以快速構建和部署應用程序。現在市面上的大部分低代碼平臺可以滿足大部分日常的需求，但對於一些定製化並且低代碼平臺無法實現的需求，如何解決呢？最常見的方法就是對低代碼平臺的功能進行擴展（低代碼插件）。因此，今天小編將以葡萄城的企業級低代碼開發平臺——活字格爲例爲的大家介紹如何使用C#編寫一個低代碼插件。

操作步驟

第1步：環境準備

開發活字格插件之前，需要下載並安裝活字格設計器及集成開發環境。

集成開發環境，這裏推薦免費下載安裝 VisualStudio 2022 社區版

安裝VisualStudio 2022 社區版步驟

1. 打開鏈接https://visualstudio.microsoft.com/zh-hans/vs/community/，點擊“下載Visual Studio按鈕”。
   

2. 下載後雙擊打開，看到以下界面, 勾選".Net 桌面開發"，其他保持默認配置，點擊Next即可。
   

如果提示系統版本不支持，需要升級Windows

1. 系統要求。
2. Windows 11 版本 21H2 或更高版本：家庭版、專業版、專業教育版、專業工作站版、企業版和教育版。
3. Windows 10 版本 1909 或更高版本：家庭版、專業版、教育版和企業版。

下載插件構建器

活字格插件構建器是一個開源項目，使用插件構建器構建活字格插件項目會獲得以下好處

1. 自動添加活字格插件開發所需依賴，生成一個工程開箱即用，直接找到對應的文件添加業務邏輯即可。
2. 添加前端接口描述文件 (.d.ts)。
3. 支持前端JS代碼熱更新（不用重啓活字格設計器，修改js文件後保存再刷新頁面，即可應用最新變更）。
4. 支持Cs代碼熱更新（編譯插件工程後，不用重新安裝插件，只需重啓活字格設計器即可應用最新變更）。
5. 自動打包（編譯後自動在bin目錄下生成打包好的 zip 插件包）。

下載活字格插件構建器步驟

1. 打開https://gitee.com/grape-city-software/forguncy-plugin-project-creator， 點擊最新的發行版。
   

2. 打開發行版頁面後點擊下載 forguncyPluginBuilder.zip 文件。
   

3. 解壓縮後可以看到兩個子文件。
   

4. 在bin目錄下找到 ForguncyPluginCreator.exe 文件，雙擊打開。
   

5. 可以看到以下界面
   

6. 直接點擊OK。

7. 在“文檔\HZG-Plugins\MyPlugin”目錄下找到“MyPlugin.sln”文件，雙擊打開。
   

8. 在VisualStudio 裏找到並點擊菜單 “生成->生成解決方案”。
   

9. 編譯成功後，打開活字格設計器，在單元格類型選擇下拉列表中可以看到多了一個單元格類型“我的插件單元格”，第一個插件已經開發完成了。
   

第2步：插件開發

1.完成一個自定義插件的開發

公式類型屬性：

1.1創建公式屬性

（1）在插件中增加一個公式類型的屬性（單元格、命令、服務端命令）。

// 這樣就可以增加一個公式類型的屬性了，具體結果可以參考幫助手冊插件開發文檔
[FormulaProperty]
public object MyFormulaProperty{ get; set; }

(2)支持換行輸入。

// 運行用戶輸入的時候，可以按住Alt+Enter換行輸入
[FormulaProperty(AcceptsReturn = true)]
public object MyFormulaProperty{ get; set; }

（3）支持輸入只能選擇一個頁面上的單元格。

// 前端命令中，可以引用頁面上一些單元格的位置，我們可以通過這個屬性，讓輸入只能是頁面上某一個單元格，而不是一個複雜的公式，或者一塊區域
[FormulaProperty(OnlySupportCell = true)]
public object MyFormulaProperty{ get; set; }

1.2使用公式屬性

（1）單元格插件和命令插件的公式的計算是一樣的。

/**
首先計算公式時，需要函數中傳遞一個參數（IServerCommandExecuteContext dataContext），
需要通過參數的一個函數來執行，而參數的來源就是服務端命令中ExecuteAsync，
示例中是直接在服務端命令執行過程中調用的
**/
public async Task<ExecuteResult> ExecuteAsync(IServerCommandExecuteContext dataContext)
{
      // 這裏await是異步執行，可以不做理解，照這樣子使用即可
      /**
      其他地方若是想要調用計算公式的函數，
     需要將IServerCommandExecuteContext dataContext作爲函數的一個參數，
     在調用的時候將dataContext傳入
     **/
      var propCalcedValue = await dataContext.EvaluateFormulaAsync(this.MyFormulaProperty);
}

（2）服務端命令的公式計算有些區別，是在C#（也就是CS文件）中計算的。

/**
首先計算公式時，需要函數中傳遞一個參數（IServerCommandExecuteContext dataContext），
需要通過參數的一個函數來執行，而參數的來源就是服務端命令中ExecuteAsync，
示例中是直接在服務端命令執行過程中調用的
**/
public async Task<ExecuteResult> ExecuteAsync(IServerCommandExecuteContext dataContext)
{
      // 這裏await是異步執行，可以不做理解，照這樣子使用即可
      /**
      其他地方若是想要調用計算公式的函數，
     需要將IServerCommandExecuteContext dataContext作爲函數的一個參數，
     在調用的時候將dataContext傳入
     **/
      var propCalcedValue = await dataContext.EvaluateFormulaAsync(this.MyFormulaProperty);
}

（3）有一點需要注意，單元格插件和命令插件的公式執行雖然一樣，但是獲取屬性函數是不一樣的。

// 這個是單元格插件獲取屬性值
const formula = this.CellElement.CellType.MyFormulaProperty;

// 這個是命令插件獲取屬性值
const formula = this.CommandParam.MyFormulaProperty;

支持返回結果（命令、服務端命令）：

1.3創建對應屬性

[ResultToProperty]
[DisplayName("返回結果到變量")]
public string Result { get; set; } = "結果";

1.4給返回結果屬性賦值

// 命令插件賦值給變量是在JS文件中，通過活字格提供的函數給對應的變量“Result”賦值
Forguncy.CommandHelper.setVariableValue(this.CommandParam.Result, value);

// 服務端命令賦值是在CS文件中，仍然是通過dataContext這個變量給對應的變量命令“Result”賦值
dataContext.Parameters[Result] = value;

1.5屬性校驗

屬性校驗是我們在定義屬性的中一個不可獲取的一環，比如必填，數據範圍等。

（屬性校驗 - 活字格V9幫助手冊 - 葡萄城產品文檔中心 (grapecity.com.cn)）

// 標註Required屬性，該屬性在用戶輸入中，就是必填的，當然這個屬性不限制屬性的類型，所有的屬性都是可以標註的
[Required]
public string Name { get; set; }

// 字符串類型的屬性，可以通過下面屬性定義最大長度和最小長度
[MaxLength(6)]
[MinLength(1)]
public string Name { get; set; }

// 整數或者小數類型的屬性，可以通過下面的屬性定義可填的返回
[Range(0,100)]
public double Money { get; set; }

想要了解更多屬性命名空間的特性請點擊這裏。

JS-C#互相傳值（單元格、命令）

1.6 JS文件獲取用戶輸入的屬性值

// 單元格類型的命令，一般是在onPageLoaded()函數中執行的
onPageLoaded() {
      const formula = this.CellElement.CellType.MyProperty;
      const result = this.evaluateFormula(formula)
}

// 命令類型的命令，一般是在execute()函數中執行的
execute() {
      const formula = this.CommandParam.MyProperty;
      const result = this.evaluateFormula(formula);
}

1.7 JS文件將計算後的結果返回

// 命令類型的插件，在執行完對應的邏輯之後，會有一個執行結果數據，需要將這個執行結果返回給用戶
Forguncy.CommandHelper.setVariableValue(this.CommandParam.Result, res);

1.8引用外部第三方JS文件（單元格、命令）

（1）將JavaScript和CSS文件拷貝到插件中Resources目錄下。

（2）然後在PluginConfig.json文件中，引用這個文件就可以正常使用了。

2代碼調試

2.1前端代碼調試

前端代碼調試比較簡單，當活字格安裝好插件之後，直接在活字格運行應用就可以調試，而調試工具就是瀏覽器，在活字格頁面執行完插件命令之後，在瀏覽器源代碼裏，找到Forguncy，下的Plugin對應插件名稱下的JS文件，就可以直接打斷點調試了。

2.1後端代碼調試

後端代碼調試，比前端代碼調試複雜一些，調試的工具是Visual Studio，需要在活字格中將應用Run起來，Run起來之後可以看到應用的訪問地址：http://localhost:11574/Forguncy。

在Visual Studio中操作如下（首先得有對應插件源代碼），點擊菜單欄的調試，找到附加到進程。

點擊進去，然後在搜索欄，輸入Forguncy，就可以看到和活字格相關的所有進程信息了，然後在命令行一列找到我們前面記錄有對應的端口號的URL，然後點擊附加，就可以正常調試了。

總結

本文從環境準備到插件開發，以及最後的代碼調試，從頭到尾爲大家介紹瞭如何實現一個低代碼插件，從而滿足低代碼開發當中的一些特殊需求，通過本文的指導，讀者可以深入瞭解低代碼平臺的插件開發流程，爲低代碼應用開發提供更多可能性。

擴展鏈接：

Redis從入門到實踐

一節課帶你搞懂數據庫事務！

Chrome開發者工具使用教程

從表單驅動到模型驅動，解讀低代碼開發平臺的發展趨勢

低代碼開發平臺是什麼？

基於分支的版本管理，幫助低代碼從項目交付走向定製化產品開發