Trae 輔助下的 uni-app 跨端小程序工程化開發實踐分享

大家好,我是不如摸魚去,歡迎來到我的AI編程分享專欄。

這次來分享一下,我使用 Trae 作為主要AI編程工具,開發 uni-app 跨平臺小程序的完整實踐經驗。我在實際的開發過程中,探索了 Trae 輔助開發的具體應用場景和效果,整理出一套相對完整的開發流程和工具鏈集成方案。

在這個項目中,我們使用Trae作為主要AI編程工具,集成FigmaAlova 網絡請求框架、WotUI 組件庫等現代化工具,通過 AI 輔助實現了開發效率的顯著提升,在本案例中整體開發時間從傳統的 40 人日縮短至 22 人日,效率提升約 45%。根據團隊的實際體驗,相比傳統開發方式,開發體驗有了明顯改善。

本文使用的 Trae 為國際版,目前 Trae 已經內置了 Figma 插件,可以嘗試直接使內置的 Figma 插件來還原 UI,本文所寫項目為使用 Figma MCP 實現。

相關文章

本文可以結合以下幾篇往期文章食用,它們中很多是本文的基礎,想要AI編程真正達到提效目的,前置工作還是有必要的:

當年偷偷玩小霸王,現在偷偷用 Trae Solo 復刻坦克大戰

告別 HBuilderX,擁抱現代化!這個模板讓 uni-app 開發體驗起飛

uni-app 還在手寫請求?alova 幫你全搞定!

llms.txt:讓 AI 更好地理解你的文檔

設計師畫個圖,AI直接寫出代碼!AI + Figma MCP讓前端開發效率暴增80%

用 AI 驅動 wot-design-uni 開發小程序


為什么選擇 AI 輔助開發?

傳統開發遇到的痛點

在傳統開發場景下,存在很多場景可以使用 AI 來接管:

  1. 設計稿還原耗時:UI 設計到代碼實現需要大量手工轉換
  2. API 集成重復工作:接口類型定義、Mock 數據生成等重復性工作
  3. 測試用例的編寫:測試用例編寫非常耗時

我們的解決思路

核心理念:讓 AI 處理重復性工作,人專注于業務邏輯

具體策略:

  • 利用 Figma MCP 實現設計稿到代碼的半自動化轉換
  • 基于 Swagger 文檔自動生成 API 類型和調用代碼
  • 通過 trae + llms.txt 文檔集成讓 AI 理解項目的組件庫和開發規范
  • 等等

上游依賴對 AI 編程效果的關鍵影響

在我們的實踐中發現,以下上游依賴的完整性和規范性直接影響 AI 輔助開發的效果,大致分為:

  • 設計稿完整性
  • 需求文檔完整性
  • API 文檔完整性
  • 組件庫對 AI 支持的完整性

技術選型與工具鏈

開發工具選擇

  • Trae 國際版:核心開發環境,提供 AI 代碼生成和智能提示
  • Figma MCP:設計稿到代碼的轉換工具
  • @alova/wormhole:API 工程化和編輯器集成

技術棧選擇

小程序開發當然要選個好的基礎模板,這次我選用我在維護的 uni-app vue3 模板 wot-demo https://github.com/wot-ui/wot-demo 來作為基礎項目進行開發,這樣更加貼合實際開發場景。
wot-demo 主要由以下開源包組成:

  • 核心:@uni-helper
  • 引擎:uni-app
  • 打包器:Vite
  • CSS 樣式:UnoCSS
  • 代碼質量:ESLint 和 TypeScript:
  • 組件庫:Wot UI
  • CI/CD:uni-mini-ci
  • 路由:uni-mini-router
  • 網絡請求:Alova
  • Pinia:Pinia

配置指南

我們首先對 Trae 進行一些配置:包括figma mcp、文檔集、規則等,使 Trae 的開發思路更加符合我們的要求。

1. 配置 figma mcp

figma mcp 有多種配置方式,可以參考文章:設計師畫個圖,AI直接寫出代碼!AI + Figma MCP讓前端開發效率暴增80%。這里我們直接使用 figma 官方提供的 Figma Dev Mode MCP。

目前也可以使用 trae 提供的內置的 figma 插件,即可不進行此配置。

前置要求
  • 計劃要求:Professional、Organization 或 Enterprise 計劃
  • 席位要求:Dev 或 Full 席位
  • 應用要求:必須使用 Figma beta 版桌面應用,下載鏈接:https://www.figma.com/downloads/
步驟 1:啟用 Figma 桌面應用的 MCP 服務
  1. 更新應用:確保 Figma 桌面應用為最新的beta版本
  2. 打開設計文件:創建或打開一個 Figma Design 文件
  3. 訪問菜單:點擊左上角的 Figma 菜單
  4. 啟用服務:在 Preferences 下選擇 Enable Dev Mode MCP Server
  5. 確認運行:底部應顯示確認消息,表明服務器已啟用并運行

📍 重要:服務器將在本地運行于 http://127.0.0.1:3845/mcp,請記住此地址用于下一步配置。

步驟 2:在 Trae 中配置

按照如下操作,打開AI功能管理->MCP

選擇手動配置

填入以下配置

{"mcpServers": {"Figma Dev Mode MCP": {"type": "sse","url": "http://127.0.0.1:3845/mcp"}}
}

看到如下圖,Figma MCP 即可使用了,其他 MCP 接入方案也大同小異

2. 配置 Trae 規則

還是AI功能管理設置界面,我們選中“規則”頁簽,設置項目規則即可。

編輯項目規則,填入以下規則,然后保存即可

# 項目開發規則## 項目概述
本項目是基于 uni-app + Vue 3 + TypeScript 的跨平臺應用,使用 wot-design-uni 組件庫構建。## 核心技術棧
- **框架**: uni-app (Vue 3 + TypeScript)
- **UI組件庫**: wot-design-uni
- **請求庫**: alova
- **路由**: uni-mini-router + @uni-helper/vite-plugin-uni-pages (文件路由)
- **狀態管理**: pinia
- **樣式**: UnoCSS + @uni-helper/unocss-preset-uni
- **構建工具**: Vite
- **代碼規范**: ESLint + Prettier + husky## 目錄結構規范### src/api/ - API管理
- `core/` - Alova核心配置- [instance.ts](mdc:src/api/core/instance.ts) - Alova實例配置- [handlers.ts](mdc:src/api/core/handlers.ts) - 請求處理器- [middleware.ts](mdc:src/api/core/middleware.ts) - 中間件
- `mock/` - Mock數據- `modules/` - 按模塊分類的Mock數據- `utils/` - Mock工具函數
- [createApis.ts](mdc:src/api/createApis.ts) - API生成配置
- [index.ts](mdc:src/api/index.ts) - API導出### src/components/ - 全局組件
- 全局通用組件目錄
- 包含 GlobalToast、GlobalLoading、GlobalMessage 等全局交互組件### src/composables/ - 組合式函數
- 可復用的邏輯函數
- 命名格式: `use[功能名稱].ts`### src/layouts/ - 布局模板
- [default.vue](mdc:src/layouts/default.vue) - 默認布局
- [tabbar.vue](mdc:src/layouts/tabbar.vue) - 底部導航布局### src/pages/ - 頁面文件
- 基于文件的路由系統
- 每個頁面目錄包含 `index.vue` 文件
- 支持 `<route>` 自定義塊配置路由元數據### src/store/ - 狀態管理
- Pinia store 文件
- [persist.ts](mdc:src/store/persist.ts) - 持久化配置### src/utils/ - 工具函數
- 通用工具函數庫## 配置文件
- [pages.config.ts](mdc:pages.config.ts) - 頁面和tabbar配置
- [alova.config.ts](mdc:alova.config.ts) - Alova配置
- [uno.config.ts](mdc:uno.config.ts) - UnoCSS配置
- [theme.json](mdc:src/theme.json) - 主題配置
- [vite.config.ts](mdc:vite.config.ts) - Vite構建配置## 開發規范
1. 頁面文件必須放在 `src/pages/` 目錄下
2. 組件按通用性分類存放在 `src/components/` 或 `src/business/`
3. API 接口使用 Alova 生成,通過 `pnpm alova-gen` 命令生成
4. 樣式優先使用 UnoCSS,支持響應式設計和主題切換
5. 使用 TypeScript 提供完整的類型定義

3. 配置文檔集

還是AI功能管理界面,我們定位到上下文頁簽,選擇添加文檔集

填入https://wot-design-uni.cn/llms-full.txt即可

開發流程

整個項目的開發大致可以總結為以下五個階段:

項目初始化

原則:架構設計靠人工,標準實現靠 AI

項目結構設計(人工主導)

這里我們直接選擇 wot-demo 作為項目基礎架構,代碼結構如下

src/
├── components/              # 通用基礎組件
├── business/               # 業務組件
├── composables/            # 組合式 API
├── store/                  # Pinia 狀態管理
├── utils/                  # 工具函數
├── api/                    # API 層(Alova 自動生成)
├── pages/                  # 主包頁面
├── pagesBase/             # 基礎功能頁面(子包)
├── pagesSubA/             # 模塊A功能頁面(子包)
├── pagesSubB/              # 模塊B功能頁面(子包)
└── static/                # 靜態資源
基礎組件開發(AI 擅長)

適合 AI 開發的組件類型:

  • 基于設計圖的 UI 組件
  • 邏輯簡單的展示組件
  • 純函數工具方法

示例:基礎卡片組件

<script setup lang="ts">
interface Props {type?: 'default' | 'primary' | 'success' | 'warning' | 'danger'size?: 'small' | 'medium' | 'large'title?: stringsubtitle?: stringshadow?: booleanbordered?: boolean
}withDefaults(defineProps<Props>(), {type: 'default',size: 'medium',shadow: true,bordered: false
})
</script><template><viewclass="base-card":class="[`card--${type}`,`card--${size}`,{ 'card--shadow': shadow },{ 'card--bordered': bordered },]"><view v-if="$slots.header || title" class="card-header"><slot name="header"><text class="card-title">{{ title }}</text><text v-if="subtitle" class="card-subtitle">{{ subtitle }}</text></slot></view><view class="card-content"><slot /></view><view v-if="$slots.footer" class="card-footer"><slot name="footer" /></view></view>
</template><style scoped>
.base-card {@apply bg-white rounded-lg overflow-hidden;
}
.card--shadow {@apply shadow-sm;
}
.card--bordered {@apply border border-gray-200;
}
</style>
復雜組件開發(人工主導)

需要人工開發的組件特征:

  • 涉及全局狀態管理
  • 復雜的交互邏輯
  • 性能敏感的組件

階段二:UI 還原

通過 Figma MCP 插件,Trae 可以直接讀取設計稿并生成對應的的小程序代碼,操作步驟如下:

  1. 獲取設計鏈接

    • 右鍵點擊 Figma 中的 Frame 或圖層
    • 選擇 Copy/Paste AsCopy Link to Selection
    • 或使用快捷鍵 ? + L (macOS) / Ctrl + L (Windows)
  2. 在 Trae 中使用
    打開trae的對話框,選擇Builder with MCP,粘貼 Figma 鏈接,然后輸入提示詞即可。

  3. 產出效果
    由于項目UI不方便展示,這里貼一個 Trae 生成的叮咚決策器的效果,還原度還是比較高的。

階段三:API 工程化

Alova + @alova/wormhole 集成

基于項目的 Swagger 文檔,實現 API 的自動化集成:

// alova.config.ts
export default {generator: [{input: 'http://your-api-domain/v2/api-docs',platform: 'swagger',output: 'src/api',responseMediaType: 'application/json',bodyMediaType: 'application/json',version: 3,type: 'typescript',global: 'Apis',handleApi: (apiDescriptor) => {// 過濾廢棄的 APIif (apiDescriptor.deprecated) {return undefined}return apiDescriptor}}],autoUpdate: {launchEditor: true,interval: 5 * 60 * 1000 // 每5分鐘檢查更新}
}
自動生成的 API 使用
import { usePagination, useRequest } from 'alova'
import { Apis } from '@/api'// 單次請求 - 自動類型推導
const { data: userInfo, loading: userLoading } = useRequest(Apis.user.getUserInfo()
)// 分頁請求 - 支持參數類型檢查
const {data: orderList,loading: listLoading,loadNext,refresh
} = usePagination((page, size) => Apis.order.getOrderList({params: {page,size,status: 'pending' // TypeScript 自動檢查狀態值}}),{initialData: [],initialPageSize: 20}
)

階段四:業務開發(智能組合)

基于前面的基礎設施,Trae 能夠智能地組合組件和 API:

<script setup lang="ts">
import { usePagination } from 'alova'
import { Apis } from '@/api'const searchText = ref('')
const activeTab = ref('all')// 使用 Alova 進行分頁請求
const {data: orderList,loading,loadNext
} = usePagination((page, size) => Apis.getOrderList({page,size,status: activeTab.value,keyword: searchText.value}),{initialData: [],initialPageSize: 20}
)
</script><template><view class="order-list-page"><!-- Trae 優先推薦項目組件 --><NavSearchBarv-model="searchText"placeholder="搜索訂單號"@search="handleSearch"/><!-- 自動推薦合適的組件庫組件 --><wd-tabs v-model="activeTab"><wd-tab title="全部" name="all" /><wd-tab title="待付款" name="pending" /><wd-tab title="已完成" name="completed" /></wd-tabs><!-- 智能組合業務組件 --><view class="order-list"><template v-if="!loading"><viewv-for="order in orderList":key="order.id"class="order-item"@click="navigateToDetail(order.id)"><!-- 訂單內容 --></view></template><SalesListSkeleton v-else /></view><!-- 空狀態處理 --><EmptyStatus v-if="!loading && !orderList.length" /></view>
</template>

階段五:測試與文檔(AI 輔助總結)

Trae 能夠分析代碼并生成功能總結和測試建議:

/*** 訂單管理模塊功能總結 (AI 輔助生成)** 核心功能:* 1. 訂單列表查詢和篩選* 2. 訂單詳情查看* 3. 訂單狀態變更* 4. 訂單統計分析** 主要組件:* - OrderList.vue: 訂單列表頁面* - OrderDetail.vue: 訂單詳情頁面* - OrderStats.vue: 訂單統計組件*/

實際開發效果

引入 AI 進行工程化開發后,開發體驗得到明顯改善,可以體現在以下階段:

開發階段傳統方式體驗AI 輔助體驗主要改善
項目初始化大量重復性基礎設施搭建簡單組件和工具函數快速生成基礎設施搭建更高效
UI 還原手工對照設計稿編寫樣式基于設計稿智能生成設計還原速度顯著加快
API 集成手工編寫類型定義和調用代碼自動生成類型安全的代碼API 開發效率大幅提升
業務開發需要記憶和查找組件 API智能提示和組件推薦開發流暢度明顯改善
測試總結手工編寫測試用例和文檔AI 輔助生成測試點文檔生成更便利

最佳實踐建議

項目啟動前(上游依賴質量檢查):

  • 評估設計稿質量:確保設計系統完整、命名規范、狀態齊全
  • 檢查 PRD 完整性:業務流程清晰、異常處理明確、數據結構完整
  • 驗證 API 文檔:Swagger 文檔完整、示例詳細、錯誤碼齊全
  • 確認組件庫文檔:API 文檔完整、支持 llms.txt、類型定義完整
  • 配置 Trae Rules:根據項目實際,建立項目開發規范

開發過程中:

  • 優先開發基礎組件和工具函數
  • 及時更新 Trae Rules 中的組件庫
  • 保持 API 文檔的同步更新

代碼審查時:

  • 重點關注 AI 生成代碼的業務邏輯正確性
  • 驗證類型安全和錯誤處理
  • 確保代碼符合項目規范

小小總結一下

在實際的項目中,我們驗證了 Trae 在 uni-app 項目開發跨端小程序的應用價值,通過合理應用 AI 輔助開發,我們相信可以顯著提升開發效率和代碼質量,讓開發者能夠將更多精力投入到產品創新和用戶體驗優化上,同時期待 Trae 等 AI 編程工具能夠提供更好的氛圍編程體驗。

感謝閱讀!歡迎評論區溝通討論👇。希望這份實踐指南能為您的團隊在 AI 輔助開發道路上提供有價值的參考。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/95932.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/95932.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/95932.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Vue3 + Element Plus 人員列表搜索功能實現

設計思路使用Element Plus的el-table組件展示人員數據 在姓名表頭添加搜索圖標按鈕 點擊按鈕彈出搜索對話框 在對話框中輸入姓名進行搜索 實現搜索功能并高亮匹配項下面是完整的實現代碼&#xff1a;<!DOCTYPE html> <html lang"zh-CN"> <head><…

告別手動優化!React Compiler 自動記憶化技術深度解析

概述 React Compiler 是 React 團隊開發的一個全新編譯器&#xff0c;目前處于 RC&#xff08;Release Candidate&#xff09;階段。這是一個僅在構建時使用的工具&#xff0c;可以自動優化 React 應用程序&#xff0c;無需重寫任何代碼即可使用。 核心特性 自動記憶化優化 …

【從零開始學習Redis】項目實戰-黑馬點評D2

商戶查詢緩存 為什么用緩存&#xff1f;作用模型緩存流程按照流程編寫代碼如下 Service public class ShopServiceImpl extends ServiceImpl<ShopMapper, Shop> implements IShopService {Resourceprivate StringRedisTemplate stringRedisTemplate;Overridepublic Resul…

后端Web實戰-MySQL數據庫

目錄 1.MySQL概述 1.1 安裝 1.1.1 版本 1.1.2 安裝 1.1.3 連接 1.2 數據模型 1.3 SQL簡介 1.3.1 分類 1.3.2 SQL通用語法 2.DDL 2.1 數據庫操作 2.2 圖形化工具 2.2.1 使用 2.3 表操作 2.3.1 創建表 2.3.1.1約束 2.3.1.2 數據類型 2.3.1.3 案例 2.3.2 DDL&am…

開源數據發現平臺:Amundsen 本地環境安裝

Amundsen 是一個數據發現和元數據引擎&#xff0c;旨在提高數據分析師、數據科學家和工程師與數據交互時的生產力。目前&#xff0c;它通過索引數據資源&#xff08;表格、儀表板、數據流等&#xff09;并基于使用模式&#xff08;例如&#xff0c;查詢頻率高的表格會優先于查詢…

ubuntu18.04部署cephfs

比起君子訥于言而敏于行&#xff0c;我更喜歡君子善于言且敏于行。 目錄 一. 準備工作&#xff08;所有節點&#xff09; 1. /etc/hosts 2. 安裝python2 3. 配置普戶免密sudo 4. 準備好四塊盤&#xff0c;一塊hddsdd為一組&#xff0c;一臺設備上有一組 5. 添加源 二. 安…

VMD+皮爾遜+降噪+重構(送報告+PPT)Matlab程序

1.程序介紹:以含白噪聲信號為例&#xff1a;1.對信號進行VMD分解2.通過皮爾遜進行相關性計算3.通過設定閾值將噪聲分量和非噪聲分量分別提取出4.對非噪聲信號進行重構達到降噪效果包含評價指標&#xff1a;% SNR&#xff1a;信噪比% MSE&#xff1a;均方誤差% NCC&#xff1a;波…

UE5多人MOBA+GAS 45、制作沖刺技能

文章目錄添加技能需要的東西添加本地播放GC添加沖刺tag添加一個新的TA用于檢測敵方單位添加沖刺GA到角色中監聽加速移動速度的回調創建蒙太奇添加GE添加到數據表中添加到角色中糾錯添加技能需要的東西 添加本地播放GC 在UCAbilitySystemStatics中添加 /*** 在本地觸發指定的游…

分庫分表和sql的進階用法總結

說下你對分庫分表的理解分庫分表是?種常?的數據庫?平擴展&#xff08;Scale Out&#xff09;技術&#xff0c;?于解決單?數據庫性能瓶頸和存儲容量限制的問題。在分庫分表中&#xff0c;數據庫會根據某種規則將數據分散存儲在多個數據庫實例和表中&#xff0c;從?提?數據…

紫金橋RealSCADA:國產工業大腦,智造安全基石

在工業4.0時代&#xff0c;數字化轉型已成為企業提升競爭力的核心路徑。作為工業信息化的基石&#xff0c;監控組態軟件在智能制造、物聯網、大數據等領域發揮著關鍵作用。紫金橋軟件積極響應國家“兩化融合”戰略&#xff0c;依托多年技術積淀與行業經驗&#xff0c;重磅推出跨…

朗空量子與 Anolis OS 完成適配,龍蜥獲得抗量子安全能力

近日&#xff0c;蘇州朗空后量子科技有限公司&#xff08;以下簡稱“朗空量子”&#xff09;簽署了 CLA&#xff08;Contributor License Agreement&#xff0c;貢獻者許可協議&#xff09;&#xff0c;加入龍蜥社區&#xff08;OpenAnolis&#xff09;。 朗空量子是一家后量子…

C#WPF實戰出真汁08--【消費開單】--餐桌面板展示

1、功能介紹在這節里&#xff0c;需要實現餐桌類型展示&#xff0c;類型點擊切換事件&#xff0c;餐桌面板展示功能&#xff0c;細節很多&#xff0c;流程是UI設計布局-》后臺業務邏輯-》視圖模型綁定-》運行測試2、UI設計布局TabControl&#xff0c;StackPanel&#xff0c;Gri…

2025年機械制造、機器人與計算機工程國際會議(MMRCE 2025)

&#x1f916;&#x1f3ed;&#x1f4bb; 探索未來&#xff1a;機械制造、機器人與計算機工程的交匯點——2025年機械制造、機器人與計算機工程國際會議&#x1f31f;MMRCE 2025將匯聚全球頂尖專家、學者及行業領袖&#xff0c;聚焦機械制造、機器人和計算機工程領域的前沿議題…

Vue Router 嵌套路由與布局系統詳解:從新手到精通

在Vue單頁應用開發中&#xff0c;理解Vue Router的嵌套路由機制是構建現代管理后臺的關鍵。本文將通過實際案例&#xff0c;深入淺出地解釋Vue Router如何實現布局與內容的分離&#xff0c;以及<router-view>的嵌套渲染原理。什么是嵌套路由&#xff1f;嵌套路由是Vue Ro…

Grafana 與 InfluxDB 可視化深度集成(二)

四、案例實操&#xff1a;以服務器性能監控為例 4.1 模擬數據生成 為了更直觀地展示 Grafana 與 InfluxDB 的集成效果&#xff0c;我們通過 Python 腳本模擬生成服務器性能相關的時間序列數據。以下是一個簡單的 Python 腳本示例&#xff0c;用于生成 CPU 使用率和內存使用量…

.net印刷線路板進銷存PCB材料ERP財務軟件庫存貿易生產企業管理系統

# 印刷線路板進銷存PCB材料ERP財務軟件庫存貿易生產企業管理系統 # 開發背景 本軟件原為給蘇州某企業開發的pcb ERP管理軟件&#xff0c;后來在2021年深圳某pcb 板材公司買了我們的軟件然后在此基礎上按他行業的需求多次修改后的軟件&#xff0c;適合pcb板材行業使用。 # 功能…

基于飛算JavaAI的可視化數據分析集成系統項目實踐:從需求到落地的全流程解析

引言&#xff1a;為什么需要“可視化AI”的數據分析系統&#xff1f; 在數字化轉型浪潮中&#xff0c;企業/團隊每天產生海量數據&#xff08;如用戶行為日志、銷售記錄、設備傳感器數據等&#xff09;&#xff0c;但傳統數據分析存在三大痛點&#xff1a; 技術門檻高&#xff…

MqSQL中的《快照讀》和《當前讀》

目錄 1、MySQL讀取定義 1.1、鎖的分類 1.2、快照讀與當前讀 1.3、使用場景 1.4、區別 2、實現機制 2.1、實現原理 2.2、隔離級別和快照聯系 1、隔離級別 2、快照讀 2.3、快照何時生成 3、SQL場景實現 3.1、快照讀 3.2、當前讀 4、鎖的細節&#xff08;與當前讀相…

【Docker項目實戰】使用Docker部署Notepad輕量級記事本

【Docker項目實戰】使用Docker部署Notepad輕量級記事本一、 Notepad介紹1.1 Notepad簡介1.2 Notepad特點1.3 主要使用場景二、本次實踐規劃2.1 本地環境規劃2.2 本次實踐介紹三、本地環境檢查3.1 檢查Docker服務狀態3.2 檢查Docker版本3.3 檢查docker compose 版本四、下載Note…

開疆智能ModbusTCP轉Ethernet網關連接FBOX串口服務器配置案例

本案例是串口服務器通過串口采集第三方設備數據轉成ModbusTCP的服務器后歐姆龍PLC通過Ethernet連接到網關&#xff0c;讀取采集到的數據。具體配置過程如下。配置過程&#xff1a;Fbox做從站FBox采集PLC數據&#xff0c;通過Modbus TCP Server/Modbus RTU Server協議配置地址映…