把 amis 快速接入現有 React 項目JSON 低代碼搭管理后臺的完整指南【免費下載鏈接】amis前端低代碼框架通過 JSON 配置就能生成各種頁面。項目地址: https://gitcode.com/GitHub_Trending/am/amis老板甩來一句話一周內要一個后臺用戶列表、表單、彈窗一個都不能少。你翻了一下現有項目React TypeScript人手緊沒人有空手寫頁面。這就是 amis 最能打的那種場景——用 JSON 低代碼配置生成頁面直接塞進你現有的 React 工程里跑。下面不講大而全的知識點就按我們怎么把它跑起來、跑順、跑快的順序走一遍。先判斷你的項目適不適合上 amis React上不上 amis先別看教程先過一遍這張表。對號入座能幫你省掉一周的折騰。你的情況判斷為什么增刪改查密集的管理頁面列表、搜索、表單、彈窗? 推薦CRUD、form 是 amis 打磨最深的兩塊配置即所得需要快速驗證的頁面、臨時需求? 推薦改 JSON 就能看到效果不用等組件開發排期團隊會寫 JSON、前端人手少? 推薦頁面邏輯沉在配置里前端只維護一層薄薄的接入代碼一兩個頁面趕工期其余頁面穩定 部分使用別全盤替換趕工期的頁面用 amis和 React 代碼共存C 端頁面交互復雜、動效多? 不建議配置會跟你的需求互相打架手寫 React 更直接像素級定制視覺、深度換膚? 不建議主題靠 CSS 變量定制成本可能比自研還高一句話amis 管標準 CRUD 后臺React 繼續管有特殊要求的頁面。兩者不沖突可以混著用。在現有 React 項目里跑通 amis 第一屏跑通比什么都重要。先把第一屏渲染出來再談別的。1. 安裝并對齊版本npm i amis版本有硬要求React16.8.6mobx 需要^4.5.0React 17 要求 amis1.6.5。這條后面坑點里還會再提一次因為真的很容易翻車。2. 寫一個最薄的渲染組件amis 暴露的render函數收三個參數schema頁面圖紙、props初始數據、env環境能力如請求器。最小寫法// AmisPage.tsx import React from react; import {render as renderAmis} from amis; import amis/lib/themes/cxd.css; import amis/lib/helper.css; import amis/sdk/iconfont.css; export default function AmisPage({schema}: {schema: any}) { return renderAmis(schema, {}, { fetcher: async ({url, method, data}) (await fetch(url, {method, body: JSON.stringify(data)})).json() }); }fetcher是必填項先糊一個能用的。schema 可以簡單到這種程度{ type: page, title: 用戶管理, body: { type: crud, api: /api/users, columns: [ {name: name, label: 姓名}, {name: email, label: 郵箱} ] } }把它傳給AmisPage schema{schema} /刷新頁面——列表出來了翻頁、加載態都是現成的。schema 就是給頁面畫的圖紙type聲明節點是什么組件body聲明它里面放什么靠樹形結構一層層拼出整頁。更完整的 CRUD 配置含編輯彈窗表單可以參考docs/zh-CN/components/crud.md。跑通之后補上三件事第一屏只是能看。要能用把下面三件事挨個勾掉。數據接入把 fetcher 接到項目統一的請求層路由打通跳轉走你自己的 Router主題與樣式確定用哪套皮膚數據接入寫一個正經的 fetcher別用fetch糊弄長期方案。把 fetcher 接到項目已有的 axios 實例上登錄態、統一報錯、埋點一次全帶上const env { theme: cxd, fetcher: async ({url, method, data, headers}) { const res await request({ // request 是你們項目的統一請求封裝 url, method, data, headers }); return res.data; } };amis 里所有api字段的請求都會走這個函數。它拿得到url、method、data、headers返回 Promise 即可。路由打通jumpTo 接你的 Routeramis 不關心你用什么路由它把跳轉交給你實現。在 env 里補一個jumpTojumpTo: to navigate(to) // navigate 來自你們的 react-router配置里actionType: link、url之類的跳轉動作最終都落到這個方法。頁面內導航、左側菜單配合app渲染器就能組織起來參考docs/zh-CN/components/app.md。主題兩套皮膚二選一主題樣式文件env.theme云舍默認amis/lib/themes/cxd.csscxd仿 Antdamis/lib/themes/antd.cssantdCSS 引進來、env.theme對上就完了。二次換膚不用改 CSS 文件主題色這類都走 CSS 變量說明見docs/zh-CN/style/css-vars.md。amis 自定義組件怎么注冊很多人對 amis 的誤解是只能寫配置插不進來代碼。不是的。它有三種插法從臨時到正式配置里內聯給某個節點加children一個返回 JSX 的函數asFormItem: true當場就能用但只在當前配置生效不可復用。注冊普通渲染器用Renderer裝飾器或Renderer(opts)(Comp)函數式寫法把組件掛進 amis之后任何 schema 里寫type: 你的類型名就能渲染。注冊表單項用FormItemlabel、校驗、三種表單布局全部免實現你只管回顯值和改值兩件事。注冊一個普通渲染器import {Renderer} from amis; Renderer({type: user-card, autoVar: true}) class UserCard extends React.Componentany { render() { const {name, title} this.props; return div{name} · {title}/div; } }注冊一個表單項import {FormItem} from amis; FormItem({type: my-color}) class MyColor extends React.Componentany { render() { const {value, onChange} this.props; return ( input typecolor value{value || #f00} onChange{e onChange(e.target.value)} / ); } }兩個實用細節autoVar: true讓組件參數自動解析${xxx}變量需要渲染子節點時props 里的render(body, node)就是口子。注冊完的組件還會出現在可視化編輯器里非開發人員也能拖——注冊實現可以看packages/amis-core/src/factory.tsx完整寫法見docs/zh-CN/extend/custom-react.md。懶加載與 schema 緩存兩個不疼的工程化動作點到為止夠用就行。懶加載整包。amis 本身體量不小別打進首屏 chunk。用一個lazy包一層const AmisPage lazy(() import(./AmisPage)); // Suspense fallback{Spin /}AmisPage schema{s} //Suspense緩存 schema。如果配置是后端下發的前端按 key 緩存一份發布時再失效避免每次進頁面都拉一遍 JSONconst cache new Map(); const loadSchema key cache.get(key) || fetch(/schemas/${key}.json).then(r { cache.set(key, r); return r.json(); });大列表提速。CRUD 有個lazyRenderAfter配置默認 100意思是超過這個行數的延遲渲染。數據量大時調小它首屏會快一截見docs/zh-CN/start/faq.md。踩坑實錄我踩過的坑和繞法都是真實場景里會撞上的按踩坑頻率排??裝完就報錯白屏或運行時報錯。九成是 mobx 版本。amis 依賴 mobx^4.5.0mobx 5/6 肯定掛。檢查package.json里實際裝上的版本必要時用 overrides 鎖住。CRUD 分頁突然沒了。因為 api 里帶了變量比如/api/users/${id}——這種情況 amis 不會自動拼page、perPage參數。手動拼上/api/users/${id}?page${page}perPage${perPage}。頂部工具欄和你們已有的吸頂元素疊一起了。渲染前設置 CSS 變量--affix-offset-top留出間距或者在 CRUD 上配affixHeader: false關掉固頂。別包 StrictMode。amis 目前不支持React.StrictMode的雙調用把它從包裹 amis 那棵子樹上去掉。樣式沖突。別圖省事在容器上寫all: initialamis 的樣式會全沒。正確姿勢獨立容器包一層主題色用 CSS 變量微調。配置里 URL 環境不一致。開發用localhost、線上用域名用 env 的replaceText做整體替換schema 里寫占位符即可。前后對比收益到底有多大拿用戶管理這一個頁面列表 搜索 新建/編輯表單 刪除確認做對比數字是我們項目里的真實體感維度手寫 React 組件接入 amis 后工期4~5 人日0.5~1 人日大頭花在接 fetcher需要維護的代碼約 2000 行組件與狀態代碼約 200 行 JSON 配置 一層接入代碼改一個字段展示改組件、調樣式、回歸測試配置里改一個字段頁面風格一致性取決于誰寫的內置組件風格統一上手門檻得熟 React 和組件庫會寫 JSON 就能改頁面當然要說句公道話提速主要在頁面層。接口沒有的話聯調時間一分不會少。一句話結論上不上 amis如果你的頁面主體是列表 搜索 表單 彈窗上 amis一周的后臺變一周能收尾如果頁面主體是重交互、重視覺定制手寫 React別硬塞配置。兩個頁面類型在同一個工程里各干各的才是最省心的用法?！久赓M下載鏈接】amis前端低代碼框架通過 JSON 配置就能生成各種頁面。項目地址: https://gitcode.com/GitHub_Trending/am/amis創作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考 把 amis 快速接入現有 React 項目：JSON 低代碼搭管理后臺的完整指南
把 amis 快速接入現有 React 項目JSON 低代碼搭管理后臺的完整指南【免費下載鏈接】amis前端低代碼框架通過 JSON 配置就能生成各種頁面。項目地址: https://gitcode.com/GitHub_Trending/am/amis老板甩來一句話一周內要一個后臺用戶列表、表單、彈窗一個都不能少。你翻了一下現有項目React TypeScript人手緊沒人有空手寫頁面。這就是 amis 最能打的那種場景——用 JSON 低代碼配置生成頁面直接塞進你現有的 React 工程里跑。下面不講大而全的知識點就按我們怎么把它跑起來、跑順、跑快的順序走一遍。先判斷你的項目適不適合上 amis React上不上 amis先別看教程先過一遍這張表。對號入座能幫你省掉一周的折騰。你的情況判斷為什么增刪改查密集的管理頁面列表、搜索、表單、彈窗? 推薦CRUD、form 是 amis 打磨最深的兩塊配置即所得需要快速驗證的頁面、臨時需求? 推薦改 JSON 就能看到效果不用等組件開發排期團隊會寫 JSON、前端人手少? 推薦頁面邏輯沉在配置里前端只維護一層薄薄的接入代碼一兩個頁面趕工期其余頁面穩定 部分使用別全盤替換趕工期的頁面用 amis和 React 代碼共存C 端頁面交互復雜、動效多? 不建議配置會跟你的需求互相打架手寫 React 更直接像素級定制視覺、深度換膚? 不建議主題靠 CSS 變量定制成本可能比自研還高一句話amis 管標準 CRUD 后臺React 繼續管有特殊要求的頁面。兩者不沖突可以混著用。在現有 React 項目里跑通 amis 第一屏跑通比什么都重要。先把第一屏渲染出來再談別的。1. 安裝并對齊版本npm i amis版本有硬要求React16.8.6mobx 需要^4.5.0React 17 要求 amis1.6.5。這條后面坑點里還會再提一次因為真的很容易翻車。2. 寫一個最薄的渲染組件amis 暴露的render函數收三個參數schema頁面圖紙、props初始數據、env環境能力如請求器。最小寫法// AmisPage.tsx import React from react; import {render as renderAmis} from amis; import amis/lib/themes/cxd.css; import amis/lib/helper.css; import amis/sdk/iconfont.css; export default function AmisPage({schema}: {schema: any}) { return renderAmis(schema, {}, { fetcher: async ({url, method, data}) (await fetch(url, {method, body: JSON.stringify(data)})).json() }); }fetcher是必填項先糊一個能用的。schema 可以簡單到這種程度{ type: page, title: 用戶管理, body: { type: crud, api: /api/users, columns: [ {name: name, label: 姓名}, {name: email, label: 郵箱} ] } }把它傳給AmisPage schema{schema} /刷新頁面——列表出來了翻頁、加載態都是現成的。schema 就是給頁面畫的圖紙type聲明節點是什么組件body聲明它里面放什么靠樹形結構一層層拼出整頁。更完整的 CRUD 配置含編輯彈窗表單可以參考docs/zh-CN/components/crud.md。跑通之后補上三件事第一屏只是能看。要能用把下面三件事挨個勾掉。數據接入把 fetcher 接到項目統一的請求層路由打通跳轉走你自己的 Router主題與樣式確定用哪套皮膚數據接入寫一個正經的 fetcher別用fetch糊弄長期方案。把 fetcher 接到項目已有的 axios 實例上登錄態、統一報錯、埋點一次全帶上const env { theme: cxd, fetcher: async ({url, method, data, headers}) { const res await request({ // request 是你們項目的統一請求封裝 url, method, data, headers }); return res.data; } };amis 里所有api字段的請求都會走這個函數。它拿得到url、method、data、headers返回 Promise 即可。路由打通jumpTo 接你的 Routeramis 不關心你用什么路由它把跳轉交給你實現。在 env 里補一個jumpTojumpTo: to navigate(to) // navigate 來自你們的 react-router配置里actionType: link、url之類的跳轉動作最終都落到這個方法。頁面內導航、左側菜單配合app渲染器就能組織起來參考docs/zh-CN/components/app.md。主題兩套皮膚二選一主題樣式文件env.theme云舍默認amis/lib/themes/cxd.csscxd仿 Antdamis/lib/themes/antd.cssantdCSS 引進來、env.theme對上就完了。二次換膚不用改 CSS 文件主題色這類都走 CSS 變量說明見docs/zh-CN/style/css-vars.md。amis 自定義組件怎么注冊很多人對 amis 的誤解是只能寫配置插不進來代碼。不是的。它有三種插法從臨時到正式配置里內聯給某個節點加children一個返回 JSX 的函數asFormItem: true當場就能用但只在當前配置生效不可復用。注冊普通渲染器用Renderer裝飾器或Renderer(opts)(Comp)函數式寫法把組件掛進 amis之后任何 schema 里寫type: 你的類型名就能渲染。注冊表單項用FormItemlabel、校驗、三種表單布局全部免實現你只管回顯值和改值兩件事。注冊一個普通渲染器import {Renderer} from amis; Renderer({type: user-card, autoVar: true}) class UserCard extends React.Componentany { render() { const {name, title} this.props; return div{name} · {title}/div; } }注冊一個表單項import {FormItem} from amis; FormItem({type: my-color}) class MyColor extends React.Componentany { render() { const {value, onChange} this.props; return ( input typecolor value{value || #f00} onChange{e onChange(e.target.value)} / ); } }兩個實用細節autoVar: true讓組件參數自動解析${xxx}變量需要渲染子節點時props 里的render(body, node)就是口子。注冊完的組件還會出現在可視化編輯器里非開發人員也能拖——注冊實現可以看packages/amis-core/src/factory.tsx完整寫法見docs/zh-CN/extend/custom-react.md。懶加載與 schema 緩存兩個不疼的工程化動作點到為止夠用就行。懶加載整包。amis 本身體量不小別打進首屏 chunk。用一個lazy包一層const AmisPage lazy(() import(./AmisPage)); // Suspense fallback{Spin /}AmisPage schema{s} //Suspense緩存 schema。如果配置是后端下發的前端按 key 緩存一份發布時再失效避免每次進頁面都拉一遍 JSONconst cache new Map(); const loadSchema key cache.get(key) || fetch(/schemas/${key}.json).then(r { cache.set(key, r); return r.json(); });大列表提速。CRUD 有個lazyRenderAfter配置默認 100意思是超過這個行數的延遲渲染。數據量大時調小它首屏會快一截見docs/zh-CN/start/faq.md。踩坑實錄我踩過的坑和繞法都是真實場景里會撞上的按踩坑頻率排??裝完就報錯白屏或運行時報錯。九成是 mobx 版本。amis 依賴 mobx^4.5.0mobx 5/6 肯定掛。檢查package.json里實際裝上的版本必要時用 overrides 鎖住。CRUD 分頁突然沒了。因為 api 里帶了變量比如/api/users/${id}——這種情況 amis 不會自動拼page、perPage參數。手動拼上/api/users/${id}?page${page}perPage${perPage}。頂部工具欄和你們已有的吸頂元素疊一起了。渲染前設置 CSS 變量--affix-offset-top留出間距或者在 CRUD 上配affixHeader: false關掉固頂。別包 StrictMode。amis 目前不支持React.StrictMode的雙調用把它從包裹 amis 那棵子樹上去掉。樣式沖突。別圖省事在容器上寫all: initialamis 的樣式會全沒。正確姿勢獨立容器包一層主題色用 CSS 變量微調。配置里 URL 環境不一致。開發用localhost、線上用域名用 env 的replaceText做整體替換schema 里寫占位符即可。前后對比收益到底有多大拿用戶管理這一個頁面列表 搜索 新建/編輯表單 刪除確認做對比數字是我們項目里的真實體感維度手寫 React 組件接入 amis 后工期4~5 人日0.5~1 人日大頭花在接 fetcher需要維護的代碼約 2000 行組件與狀態代碼約 200 行 JSON 配置 一層接入代碼改一個字段展示改組件、調樣式、回歸測試配置里改一個字段頁面風格一致性取決于誰寫的內置組件風格統一上手門檻得熟 React 和組件庫會寫 JSON 就能改頁面當然要說句公道話提速主要在頁面層。接口沒有的話聯調時間一分不會少。一句話結論上不上 amis如果你的頁面主體是列表 搜索 表單 彈窗上 amis一周的后臺變一周能收尾如果頁面主體是重交互、重視覺定制手寫 React別硬塞配置。兩個頁面類型在同一個工程里各干各的才是最省心的用法?！久赓M下載鏈接】amis前端低代碼框架通過 JSON 配置就能生成各種頁面。項目地址: https://gitcode.com/GitHub_Trending/am/amis創作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考