幾行程式碼帶你用TinyEngine低程式碼引擎開發側邊欄外掛

华为云开发者联盟發表於2024-10-21
行程

本文分享自華為雲社群《實操上手TinyEngine低程式碼引擎外掛化開發》，作者：OpenTiny。

1.背景介紹

1.1 TinyEngine 低程式碼引擎簡介

低程式碼開發是近些年非常熱門的一種開發方式，使用者可以透過視覺化的方式，簡單拖拽，不寫程式碼或者編寫少量程式碼，類似搭積木一樣搭建業務應用。

TinyEngine是一個強大的低程式碼引擎，可以幫助開發者快速定製自己的低程式碼設計器或者低程式碼平臺。

TinyEngine可以作為低程式碼平臺的底座，提供視覺化搭建頁面等基礎能力，既可以透過線上搭配組合使用，也可以透過cli建立個人工程進行二次開發，實時定製出自己的低程式碼平臺。適用於多場景的低程式碼平臺開發，如：資源編排、服務端渲染、模型驅動、移動端、大屏端、頁面編排等。

TinyEngine 由OpenTiny 團隊2023年開源，也歡迎大家點 Star 和 提Issue、PR 進行反饋。

TinyEngine 官網：https://opentiny.design/tiny-engine#/home

TinyEngine 線上demo：https://opentiny.design/tiny-engine#/tiny-engine-editor

TinyEngine 程式碼庫：https://github.com/opentiny/tiny-engine

1.2 TinyEngine 外掛化構建簡介

TinyEngine引擎使用外掛化架構，功能模組都由一個個外掛構成，例如圖片中頁面上方的工具欄、左側的外掛欄、右側的屬性配置欄，以及中間的畫布區域，都由一個個外掛構成，透過外掛化的架構，可以靈活配置、自由組裝出個性化的設計器。

1.3 TinyEngine CLI簡介

TinyEngine還提供了CLI工具方便使用者二次開發，透過CLI，一行命令即可基於TinyEngine建立出全新的低程式碼專案、低程式碼外掛專案，未來還會陸續增加建立設定器外掛，建立新主題，新佈局，新物料包等能力。

2. 實驗介紹

本實驗主要透過體驗使用TinyEngine幾行命令快速建立一個使用者專屬低程式碼設計器，及透過開發一個新的側邊欄外掛， 幫助開發者快速瞭解基於TinyEngine二次開發定製的能力。

2.1 實驗目標

使用 TinyEngine CLI，透過一行命令建立全新低程式碼設計器，瞭解基於 TinyEngine 建立個性化低程式碼設計器/平臺、二次開發的能力。

體驗 TinyEngine 簡單拖拽、配置 的開發形式幫助開發者快速瞭解低程式碼開發使用流程。

完成開發一個新的基礎側邊欄外掛，並整合到設計器中，瞭解基於 TinyEngine 擴充套件設計器功能的能力。

2.2 實驗環境準備

在開始實驗步驟之前，先確保我們的開發環境以及工具齊全：

Node.js v18+版本、pnpm 包管理工具。

vscode 程式碼編輯器、git 程式碼版本管理工具。

chrome瀏覽器 110+ 版本。

必要的開發前端開發環境、工具等。

3. 實踐步驟

3.1 一行命令建立自己的專屬低程式碼設計器

3.1.1 建立低程式碼設計器

執行engine-cli create，選擇platform以建立一個新的設計器

npx @opentiny/tiny-engine-cli@alpha create

執行後首次會提示是否安裝@opentiny/tiny-engine-cli，輸入“Y”並回車

之後會提示選擇要建立型別，選擇platform之後，輸入設計器名稱，如：lowcode-designer，即可完成新設計器專案的建立。

檢視當前檔案目錄，看發現已經建立出了 lowcode-designer 程式碼目錄。

3.1.2 啟動低程式碼設計器

執行下面命令安裝依賴並啟動專案：

# 安裝依賴
npm install  

# 啟動專案
npm run dev

啟動完專案之後，我們應該能看到瀏覽器開啟的預設的低程式碼設計器：

3.1.3 體驗低程式碼設計器

之後可以體驗下低程式碼開發方式：

拖拽物料皮膚中元件到中間畫布中

在右側屬性皮膚中修改屬性值觀察畫布中的變化

在畫布中拖拽元件調整元件的佈局與位置

3.2 透過開發外掛擴充套件設計器新功能

3.2.1 一行命令建立新外掛

另起一個終端，輸入下面命令，選擇建立plugin型別，建立一個新的外掛

npx @opentiny/tiny-engine-cli@alpha create

輸入外掛名稱：demo-plugin

之後就可以在demo-plugin目錄看到新建立的外掛，進去該目錄安裝依賴：

cd demo-plugin && npm install
3.2.2 將外掛接入設計器

使用VS Code開啟設計器專案，修改registry.js

import { Breadcrumb, Fullscreen, /* ... */, GenerateCodeService } from '@opentiny/tiny-engine'
import engineConfig from './engine.config'
++ import DemoPlugin from './demo-plugin'

export default {
// ...
plugins: [Materials, Tree, Page, Block, Datasource, Bridge, I18n, Script, State, Schema, Help, Robot],
++  plugins: [DemoPlugin, Materials, Tree, Page, Block, Datasource, Bridge, I18n, Script, State, Schema, Help, Robot],
dsls: [{ id: 'engine.dsls.dslvue' }],
settings: [Props, Styles, Events],
canvas: Canvas
}
3.2.3 開發除錯外掛

重新開啟專案頁面，可以看到側邊欄多了一個新的外掛：

修改外掛程式碼，設計器介面也會實時重新整理。

之後可以嘗試完成以下功能：

為外掛實現一個“新增按鈕”，點選按鈕展開外掛二級頁面

在二級皮膚中新增一個輸入框，並實現儲存功能，點選儲存按鈕將輸入框內容顯示到一級皮膚中

如此即完成了一個簡單的TinyEngine側邊欄外掛開發全流程。

4. 總結

本實踐活動指導透過使用TinyEngine CLI建立一個全新設計器，上手體驗低程式碼能力，並開發新的側邊欄外掛擴充套件設計器能力，掌握基於TinyEngine定製設計器與外掛的方式，瞭解TinyEngine的外掛化架構與外掛擴充套件能力。但實驗中的部分只是TinyEngine擴充套件定製能力的一個縮影，TinyEngine提供了各種靈活的自定義能力，期待您的繼續使用。

5. 關於OpenTiny

OpenTiny官網：https://opentiny.designTinyVue 原始碼：https://github.com/opentiny/tiny-vue（歡迎 Star ⭐）TinyEngine 原始碼：https://github.com/opentiny/tiny-engine（歡迎 Star ⭐）B站：https://space.bilibili.com/15284299歡迎加入 OpenTiny 開源社群。新增微信小助手 opentiny-official 一起參與交流前端技術～

華為開發者空間，匯聚鴻蒙、昇騰、鯤鵬、GaussDB、尤拉等各項根技術的開發資源及工具，致力於為每位開發者提供一臺雲主機、一套開發工具及雲上儲存空間，讓開發者基於華為根生態創新。

點選連結，免費領取您的專屬雲主機

相關文章