amis QRCode 二維碼組件完全指南JSON 配置、樣式定制與下載導出實戰【免費下載鏈接】amis前端低代碼框架通過 JSON 配置就能生成各種頁面。項目地址: https://gitcode.com/GitHub_Trending/am/amis本文圍繞 amis 前端低代碼框架中的qr-code二維碼渲染器展開系統講解如何在 JSON Schema 中快速生成二維碼并深度覆蓋背景/前景色、糾錯等級、內嵌 Logo 圖片、碼眼與碼點樣式定制以及基于事件動作的二維碼下載導出等實戰能力。讀完本文你將掌握 amis 二維碼組件的全部配置屬性與底層實現原理可直接在表單、詳情頁或業務看板中落地使用。組件概述與基本用法在 amis 中二維碼組件通過type: qr-code聲明其核心職責是把一段文本或 URL 編碼為可掃描的二維碼圖形。從源碼 QRCode.tsx 可以看到渲染器注冊為type: qrcode并提供別名qr-code兩種寫法均有效文檔與示例統一推薦使用qr-code。最簡單的用法只需要提供value與codeSize兩個字段{ type: qr-code, codeSize: 128, value: https://www.baidu.com }value掃描二維碼后顯示的文本內容若要跳轉頁面必須填寫以http://或https://開頭的完整 URL并且該字段支持 amis 模板語法可引用上下文變量詳見下文嵌入圖片一節的關聯上下文變量。codeSize二維碼的寬高默認128單位 px可理解為整個二維碼圖形的邊長。需要特別說明的是內容長度限制根據 QR 碼國際標準二進制模式最多可存儲2953字節1 個中文漢字占 2 字節。這一限制并不僅僅是文檔提示而是被硬編碼進了組件實現——在 QRCode.tsx 的渲染邏輯中當finalValue.length 2953時組件不會渲染二維碼而是直接顯示本地化錯誤提示QRCode.tooLong文案形如內容超過 2953 字節。因此生成二維碼前建議先預估內容體積尤其是包含長中文文本的場景。另外當value為空時組件會渲染一個占位符默認占位內容為-由placeholder屬性控制默認值見 QRCode.tsx 的defaultProps。配置背景色與前景色二維碼由背景和前景碼點/碼眼兩部分構成二者可分別獨立配置顏色。背景色 backgroundColor背景色默認為#fff純白色通過backgroundColor屬性修改[ { type: qr-code, codeSize: 128, backgroundColor: #108cee, foregroundColor: #000, value: https://www.baidu.com } ]前景色 foregroundColor前景色默認為#000純黑色通過foregroundColor屬性修改[ { type: qr-code, codeSize: 128, backgroundColor: #fff, foregroundColor: #108cee, value: https://www.baidu.com } ]從實現層面看這兩個屬性最終會作為styleConfig.bgColor與styleConfig.color傳入底層二維碼渲染庫qrcode-react-next見 QRCode.tsx。測試用例 QRCode.test.tsx 驗證了在 svg 渲染模式下背景色會寫入 SVG 根節點的background-color樣式前景色會寫入碼點元素的fill屬性二者互不影響。配色實踐提示二維碼識別依賴碼點與背景之間的明暗對比建議保持深色前景 淺色背景的組合過度接近的配色如淺灰前景 白背景可能導致掃碼失敗。糾錯等級 level二維碼具備容錯能力即使部分圖形被遮擋、污損或印制模糊只要損壞程度在糾錯能力范圍內依然可以被正常識別。level屬性用于設置糾錯等級共四種從左到右糾錯能力依次提升等級容錯能力適用場景L約 7%默認值適合無遮擋、打印清晰的場景M約 15%一般場景Q約 25%推薦用于內嵌圖片Logo的場景H約 30%遮擋風險高的場景默認等級為L見 QRCode.tsx 的defaultProps與 屬性表。一個直觀的對比如下——同一內容分別使用 L/M/Q/H 四種等級渲染{ type: hbox, columns: [ { type: qr-code, codeSize: 128, level: L, value: https://www.baidu.com }, { type: qr-code, codeSize: 128, level: M, value: https://www.baidu.com }, { type: qr-code, codeSize: 128, level: Q, value: https://www.baidu.com }, { type: qr-code, codeSize: 128, level: H, value: https://www.baidu.com } ] }值得注意的是源碼中向渲染庫傳入的配置除了level外還包含了minVersion: 2與boostLevel: true見 QRCode.tsx。boostLevel表示在內容允許的情況下自動提升糾錯等級minVersion: 2則規定了二維碼符號的最小版本這保證了生成結果在圖形尺寸與糾錯冗余上有更穩定的表現。嵌入圖片Logo 水印二維碼中間可以嵌入一張圖片例如品牌 Logo通過imageSettings對象配置該能力自1.10.0版本起支持。基礎用法 srcimageSettings.src設置圖片鏈接地址圖片尺寸默認取二維碼大小的10%位置默認水平、垂直居中{ type: qr-code, codeSize: 128, level: Q, value: https://www.baidu.com, imageSettings: { src: https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpegs_0,w_216,l_1,f_jpg, } }強烈建議嵌入圖片會遮擋部分碼點請根據圖片大小適當調高level糾錯等級一般建議至少Q避免圖片遮擋導致二維碼無法被正確識別。關聯上下文變量imageSettings.src支持 amis 模板/變量語法可以引用頁面數據域中的值。下面的示例在頁面data中聲明了imgSrc變量圖片地址通過${imgSrc}動態注入同時顯式指定了圖片寬高{ type: page, data: { imgSrc: https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpegs_0,w_216,l_1,f_jpg }, body: { type: qr-code, codeSize: 128, level: Q, value: https://www.baidu.com, imageSettings: { width: 50, height: 30, src: ${imgSrc} } } }這個變量解析邏輯有明確的源碼支撐在 QRCode.tsx 的getImageSettings()方法中組件會通過isPureVariable檢測src是否為變量表達式若是則調用resolveVariableAndFilter(src, data, | raw)從當前數據域中解析出真實地址。同時width、height、x、y這四個數值型配置還會經過isNumeric校驗并轉換為Number以兼容從數據域中取到的字符串數值。圖片寬高width和height可以顯式設置圖片的寬度和高度不設置時默認各為codeSize的 10%{ type: qr-code, codeSize: 128, level: Q, value: https://www.baidu.com, imageSettings: { src: https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpegs_0,w_216,l_1,f_jpg, width: 50, height: 30 } }圖片偏移量 x / y默認情況下圖片水平、垂直居中。如需調整位置以二維碼左上角為原點用x設置水平偏移量、y設置垂直偏移量。下面的示例通過codeSize128與圖片的width50、height30推算出偏移量{x: 78, y: 98}使圖片位于右下角{ type: qr-code, codeSize: 128, level: Q, value: https://www.baidu.com, imageSettings: { src: https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpegs_0,w_216,l_1,f_jpg, width: 50, height: 30, x: 78, y: 98 } }偏移量的推算邏輯可以這樣理解以 128×128 的二維碼為例圖片寬 50、高 30若想貼到右下角x 應為128 - 50 - 某邊距、y 應為128 - 30 - 某邊距示例中的 78 與 98 即按此思路留出邊距后計算得到。svg 模式下測試用例 QRCode.test.tsx 會斷言圖片節點image的x、y、width、height屬性均大于 0驗證偏移與尺寸配置確實生效。imageSettings 匯總屬性類型默認值說明srcstring-圖片鏈接地址支持${var}變量widthnumbercodeSize的 10%圖片寬度heightnumbercodeSize的 10%圖片高度xnumber水平居中圖片水平偏移量左上角為原點ynumber垂直居中圖片垂直偏移量左上角為原點源碼中的QRCodeImageSettings接口還包含一個excavate: boolean字段見 QRCode.tsx表示是否挖空圖片覆蓋區域的碼點以提升識別率從類型定義看該能力由底層渲染庫提供。碼眼與碼點樣式定制從 1.x 起amis 二維碼組件支持對碼眼二維碼四角的定位圖案和碼點承載數據的小方塊進行個性化定制可用于品牌化二維碼的外觀設計。所有樣式屬性最終都會透傳給底層渲染庫的styleConfig見 QRCode.tsx。碼眼類型eyeType可配置default、rounded、circle碼眼邊框大小eyeBorderSize可配置default、sm、xs碼眼邊框顏色eyeBorderColor與內部顏色eyeInnerColor可分別配置默認使用foregroundColor碼點類型pointType可配置default、circle碼點大小pointSize可配置default、sm、xs碼點大小隨機pointSizeRandom布爾值開啟后各碼點大小會隨機變化營造更自然的視覺風格完整效果對照示例{ type: page, body: [{ type: hbox, columns: [ { type: qr-code, codeSize: 128, value: https://www.baidu.com }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, eyeType: rounded }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, eyeType: circle } ] },{ type: hbox, columns: [ { type: qr-code, codeSize: 128, value: https://www.baidu.com, }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, eyeBorderSize: sm }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, eyeBorderSize: xs } ] },{ type: hbox, columns: [ { type: qr-code, codeSize: 128, value: https://www.baidu.com, eyeBorderColor: red }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, eyeInnerColor: blue } ] },{ type: hbox, columns: [ { type: qr-code, codeSize: 128, value: https://www.baidu.com }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, pointType: circle } ] },{ type: hbox, columns: [ { type: qr-code, codeSize: 128, value: https://www.baidu.com, }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, pointSize: sm }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, pointSize: xs } ] },{ type: hbox, columns: [ { type: qr-code, codeSize: 128, value: https://www.baidu.com, eyeType: rounded, eyeBorderSize: sm, pointType: circle, pointSizeRandom: true } ] }] }設計提醒碼眼是掃碼設備定位二維碼的關鍵圖案對其做樣式改造尤其是顏色與形狀時請確保仍保留足夠的結構對比度并進行真機掃碼驗證。下載二維碼saveAs 動作自3.6.0版本起二維碼組件支持通過 amis 事件動作體系導出下載。其原理是給二維碼組件設置一個id然后在其他組件如按鈕的onEvent中觸發saveAs動作并指定該componentId即可把二維碼保存為本地圖片文件。[ { type: action, label: 下載二維碼, onEvent: { click: { actions: [ { actionType: saveAs, componentId: qr-code-download, args: { name: download.png } } ] } } }, { type: qr-code, id: qr-code-download, codeSize: 128, value: https://www.baidu.com } ]關鍵配置拆解componentId目標二維碼組件的id必須與qr-code上的id一一對應args.name下載文件的文件名可選。傳入.png后綴時導出 PNG 圖片不傳時默認文件名為qr-code.png。需要注意該下載方式不支持嵌入圖片的二維碼如果二維碼配置了imageSettings建議直接對頁面截圖保存。從源碼看saveAs動作在 QRCode.tsx 的doAction中實現且與mode渲染模式密切相關canvas 模式默認獲取容器內的canvas元素調用toBlob(..., image/png)生成 PNG 文件后通過saveAs下載若args.name以.svg結尾還會被自動替換為.png見 QRCode.tsx。svg 模式讀取容器內svg的innerHTML重新包裹上帶命名空間與viewBox的外層svg后以image/svgxml類型生成 Blob 下載默認文件名為qr-code.svg見 QRCode.tsx。因此實際下載得到的是 PNGcanvas 模式還是 SVGsvg 模式文件取決于當前組件的mode配置。關于事件動作的通用觸發機制actionTypecomponentIdargs可進一步參考 amis 的 事件動作文檔。屬性表以下為 QRCode 組件的完整屬性清單與文檔屬性表保持一致并結合源碼補充了部分實現細節屬性名類型默認值說明typestringqr-code指定為 QRCode 渲染器源碼別名qrcode亦可用modestringcanvas渲染模式有canvas和svg兩種classNamestring外層 Dom 的類名qrcodeClassNamestring二維碼的類名codeSizenumber128二維碼的寬高大小backgroundColorstring#fff二維碼背景色foregroundColorstring#000二維碼前景色levelstringL二維碼糾錯級別有L M Q H四種value模板https://www.baidu.com掃描二維碼后顯示的文本如果要顯示某個頁面請輸入完整 urlhttp://...或https://...開頭支持使用模板imageSettingsobjectQRCode 圖片配置imageSettings.srcstring圖片鏈接地址imageSettings.widthnumber默認為codeSize的 10%圖片寬度imageSettings.heightnumber默認為codeSize的 10%圖片高度imageSettings.xnumber默認水平居中圖片水平方向偏移量imageSettings.ynumber默認垂直居中圖片垂直方向偏移量eyeTypestringdefault碼眼類型有default、circle、rounded三種eyeBorderColorstring#000000碼眼邊框顏色eyeBorderSizestringdefault碼眼邊框大小有default、sm、xs三種eyeInnerColorstring#000000碼眼內部顏色pointTypestringdefault碼點類型有default、circle兩種pointSizestringdefault碼點大小有default、sm、xs三種pointSizeRandombooleanfalse碼點大小隨機除上表外從 AMISQRCodeSchema 的類型定義還可以看到兩個文檔表格未列出的實用屬性namestring關聯字段名可用于在表單中與數據字段綁定placeholderstring默認-value為空時展示的占位內容。動作表當前組件對外暴露以下特性動作其他組件可以通過指定actionType: 動作名稱、componentId: 該組件id來觸發這些動作動作配置可以通過args: {動作配置項名稱: xxx}來配置具體的參數詳細請查看事件動作。動作名稱動作配置說明saveAsname?: string文件名下載文檔附渲染模式與測試驗證mode決定二維碼最終的輸出載體默認canvas可切換為svg。兩種模式在 QRCode.test.tsx 中均有覆蓋svg 模式斷言渲染出svg節點且backgroundColor以background-color樣式呈現、foregroundColor以fill屬性呈現QRCode.test.tsx嵌入圖片斷言image節點存在、xlink:href已設置且x/y/width/height均大于 0QRCode.test.tsxcanvas 模式默認渲染canvas節點并對toDataURL輸出的圖片數據進行了斷言QRCode.test.tsx。SnapShot 文件 QRCode.test.tsx.snap 中也保留了三種 svg 場景默認、自定義顏色、嵌入圖片的完整 DOM 結構快照可作為理解組件實際輸出結構的參考。選擇建議需要位圖導出PNG時使用默認的canvas模式需要無損矢量輸出、便于放大或二次加工時選擇svg模式但需注意svg模式下saveAs下載的是.svg文件。【免費下載鏈接】amis前端低代碼框架通過 JSON 配置就能生成各種頁面。項目地址: https://gitcode.com/GitHub_Trending/am/amis創作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考 amis QRCode 二維碼組件完全指南：JSON 配置、樣式定制與下載導出實戰
amis QRCode 二維碼組件完全指南JSON 配置、樣式定制與下載導出實戰【免費下載鏈接】amis前端低代碼框架通過 JSON 配置就能生成各種頁面。項目地址: https://gitcode.com/GitHub_Trending/am/amis本文圍繞 amis 前端低代碼框架中的qr-code二維碼渲染器展開系統講解如何在 JSON Schema 中快速生成二維碼并深度覆蓋背景/前景色、糾錯等級、內嵌 Logo 圖片、碼眼與碼點樣式定制以及基于事件動作的二維碼下載導出等實戰能力。讀完本文你將掌握 amis 二維碼組件的全部配置屬性與底層實現原理可直接在表單、詳情頁或業務看板中落地使用。組件概述與基本用法在 amis 中二維碼組件通過type: qr-code聲明其核心職責是把一段文本或 URL 編碼為可掃描的二維碼圖形。從源碼 QRCode.tsx 可以看到渲染器注冊為type: qrcode并提供別名qr-code兩種寫法均有效文檔與示例統一推薦使用qr-code。最簡單的用法只需要提供value與codeSize兩個字段{ type: qr-code, codeSize: 128, value: https://www.baidu.com }value掃描二維碼后顯示的文本內容若要跳轉頁面必須填寫以http://或https://開頭的完整 URL并且該字段支持 amis 模板語法可引用上下文變量詳見下文嵌入圖片一節的關聯上下文變量。codeSize二維碼的寬高默認128單位 px可理解為整個二維碼圖形的邊長。需要特別說明的是內容長度限制根據 QR 碼國際標準二進制模式最多可存儲2953字節1 個中文漢字占 2 字節。這一限制并不僅僅是文檔提示而是被硬編碼進了組件實現——在 QRCode.tsx 的渲染邏輯中當finalValue.length 2953時組件不會渲染二維碼而是直接顯示本地化錯誤提示QRCode.tooLong文案形如內容超過 2953 字節。因此生成二維碼前建議先預估內容體積尤其是包含長中文文本的場景。另外當value為空時組件會渲染一個占位符默認占位內容為-由placeholder屬性控制默認值見 QRCode.tsx 的defaultProps。配置背景色與前景色二維碼由背景和前景碼點/碼眼兩部分構成二者可分別獨立配置顏色。背景色 backgroundColor背景色默認為#fff純白色通過backgroundColor屬性修改[ { type: qr-code, codeSize: 128, backgroundColor: #108cee, foregroundColor: #000, value: https://www.baidu.com } ]前景色 foregroundColor前景色默認為#000純黑色通過foregroundColor屬性修改[ { type: qr-code, codeSize: 128, backgroundColor: #fff, foregroundColor: #108cee, value: https://www.baidu.com } ]從實現層面看這兩個屬性最終會作為styleConfig.bgColor與styleConfig.color傳入底層二維碼渲染庫qrcode-react-next見 QRCode.tsx。測試用例 QRCode.test.tsx 驗證了在 svg 渲染模式下背景色會寫入 SVG 根節點的background-color樣式前景色會寫入碼點元素的fill屬性二者互不影響。配色實踐提示二維碼識別依賴碼點與背景之間的明暗對比建議保持深色前景 淺色背景的組合過度接近的配色如淺灰前景 白背景可能導致掃碼失敗。糾錯等級 level二維碼具備容錯能力即使部分圖形被遮擋、污損或印制模糊只要損壞程度在糾錯能力范圍內依然可以被正常識別。level屬性用于設置糾錯等級共四種從左到右糾錯能力依次提升等級容錯能力適用場景L約 7%默認值適合無遮擋、打印清晰的場景M約 15%一般場景Q約 25%推薦用于內嵌圖片Logo的場景H約 30%遮擋風險高的場景默認等級為L見 QRCode.tsx 的defaultProps與 屬性表。一個直觀的對比如下——同一內容分別使用 L/M/Q/H 四種等級渲染{ type: hbox, columns: [ { type: qr-code, codeSize: 128, level: L, value: https://www.baidu.com }, { type: qr-code, codeSize: 128, level: M, value: https://www.baidu.com }, { type: qr-code, codeSize: 128, level: Q, value: https://www.baidu.com }, { type: qr-code, codeSize: 128, level: H, value: https://www.baidu.com } ] }值得注意的是源碼中向渲染庫傳入的配置除了level外還包含了minVersion: 2與boostLevel: true見 QRCode.tsx。boostLevel表示在內容允許的情況下自動提升糾錯等級minVersion: 2則規定了二維碼符號的最小版本這保證了生成結果在圖形尺寸與糾錯冗余上有更穩定的表現。嵌入圖片Logo 水印二維碼中間可以嵌入一張圖片例如品牌 Logo通過imageSettings對象配置該能力自1.10.0版本起支持。基礎用法 srcimageSettings.src設置圖片鏈接地址圖片尺寸默認取二維碼大小的10%位置默認水平、垂直居中{ type: qr-code, codeSize: 128, level: Q, value: https://www.baidu.com, imageSettings: { src: https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpegs_0,w_216,l_1,f_jpg, } }強烈建議嵌入圖片會遮擋部分碼點請根據圖片大小適當調高level糾錯等級一般建議至少Q避免圖片遮擋導致二維碼無法被正確識別。關聯上下文變量imageSettings.src支持 amis 模板/變量語法可以引用頁面數據域中的值。下面的示例在頁面data中聲明了imgSrc變量圖片地址通過${imgSrc}動態注入同時顯式指定了圖片寬高{ type: page, data: { imgSrc: https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpegs_0,w_216,l_1,f_jpg }, body: { type: qr-code, codeSize: 128, level: Q, value: https://www.baidu.com, imageSettings: { width: 50, height: 30, src: ${imgSrc} } } }這個變量解析邏輯有明確的源碼支撐在 QRCode.tsx 的getImageSettings()方法中組件會通過isPureVariable檢測src是否為變量表達式若是則調用resolveVariableAndFilter(src, data, | raw)從當前數據域中解析出真實地址。同時width、height、x、y這四個數值型配置還會經過isNumeric校驗并轉換為Number以兼容從數據域中取到的字符串數值。圖片寬高width和height可以顯式設置圖片的寬度和高度不設置時默認各為codeSize的 10%{ type: qr-code, codeSize: 128, level: Q, value: https://www.baidu.com, imageSettings: { src: https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpegs_0,w_216,l_1,f_jpg, width: 50, height: 30 } }圖片偏移量 x / y默認情況下圖片水平、垂直居中。如需調整位置以二維碼左上角為原點用x設置水平偏移量、y設置垂直偏移量。下面的示例通過codeSize128與圖片的width50、height30推算出偏移量{x: 78, y: 98}使圖片位于右下角{ type: qr-code, codeSize: 128, level: Q, value: https://www.baidu.com, imageSettings: { src: https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpegs_0,w_216,l_1,f_jpg, width: 50, height: 30, x: 78, y: 98 } }偏移量的推算邏輯可以這樣理解以 128×128 的二維碼為例圖片寬 50、高 30若想貼到右下角x 應為128 - 50 - 某邊距、y 應為128 - 30 - 某邊距示例中的 78 與 98 即按此思路留出邊距后計算得到。svg 模式下測試用例 QRCode.test.tsx 會斷言圖片節點image的x、y、width、height屬性均大于 0驗證偏移與尺寸配置確實生效。imageSettings 匯總屬性類型默認值說明srcstring-圖片鏈接地址支持${var}變量widthnumbercodeSize的 10%圖片寬度heightnumbercodeSize的 10%圖片高度xnumber水平居中圖片水平偏移量左上角為原點ynumber垂直居中圖片垂直偏移量左上角為原點源碼中的QRCodeImageSettings接口還包含一個excavate: boolean字段見 QRCode.tsx表示是否挖空圖片覆蓋區域的碼點以提升識別率從類型定義看該能力由底層渲染庫提供。碼眼與碼點樣式定制從 1.x 起amis 二維碼組件支持對碼眼二維碼四角的定位圖案和碼點承載數據的小方塊進行個性化定制可用于品牌化二維碼的外觀設計。所有樣式屬性最終都會透傳給底層渲染庫的styleConfig見 QRCode.tsx。碼眼類型eyeType可配置default、rounded、circle碼眼邊框大小eyeBorderSize可配置default、sm、xs碼眼邊框顏色eyeBorderColor與內部顏色eyeInnerColor可分別配置默認使用foregroundColor碼點類型pointType可配置default、circle碼點大小pointSize可配置default、sm、xs碼點大小隨機pointSizeRandom布爾值開啟后各碼點大小會隨機變化營造更自然的視覺風格完整效果對照示例{ type: page, body: [{ type: hbox, columns: [ { type: qr-code, codeSize: 128, value: https://www.baidu.com }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, eyeType: rounded }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, eyeType: circle } ] },{ type: hbox, columns: [ { type: qr-code, codeSize: 128, value: https://www.baidu.com, }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, eyeBorderSize: sm }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, eyeBorderSize: xs } ] },{ type: hbox, columns: [ { type: qr-code, codeSize: 128, value: https://www.baidu.com, eyeBorderColor: red }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, eyeInnerColor: blue } ] },{ type: hbox, columns: [ { type: qr-code, codeSize: 128, value: https://www.baidu.com }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, pointType: circle } ] },{ type: hbox, columns: [ { type: qr-code, codeSize: 128, value: https://www.baidu.com, }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, pointSize: sm }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, pointSize: xs } ] },{ type: hbox, columns: [ { type: qr-code, codeSize: 128, value: https://www.baidu.com, eyeType: rounded, eyeBorderSize: sm, pointType: circle, pointSizeRandom: true } ] }] }設計提醒碼眼是掃碼設備定位二維碼的關鍵圖案對其做樣式改造尤其是顏色與形狀時請確保仍保留足夠的結構對比度并進行真機掃碼驗證。下載二維碼saveAs 動作自3.6.0版本起二維碼組件支持通過 amis 事件動作體系導出下載。其原理是給二維碼組件設置一個id然后在其他組件如按鈕的onEvent中觸發saveAs動作并指定該componentId即可把二維碼保存為本地圖片文件。[ { type: action, label: 下載二維碼, onEvent: { click: { actions: [ { actionType: saveAs, componentId: qr-code-download, args: { name: download.png } } ] } } }, { type: qr-code, id: qr-code-download, codeSize: 128, value: https://www.baidu.com } ]關鍵配置拆解componentId目標二維碼組件的id必須與qr-code上的id一一對應args.name下載文件的文件名可選。傳入.png后綴時導出 PNG 圖片不傳時默認文件名為qr-code.png。需要注意該下載方式不支持嵌入圖片的二維碼如果二維碼配置了imageSettings建議直接對頁面截圖保存。從源碼看saveAs動作在 QRCode.tsx 的doAction中實現且與mode渲染模式密切相關canvas 模式默認獲取容器內的canvas元素調用toBlob(..., image/png)生成 PNG 文件后通過saveAs下載若args.name以.svg結尾還會被自動替換為.png見 QRCode.tsx。svg 模式讀取容器內svg的innerHTML重新包裹上帶命名空間與viewBox的外層svg后以image/svgxml類型生成 Blob 下載默認文件名為qr-code.svg見 QRCode.tsx。因此實際下載得到的是 PNGcanvas 模式還是 SVGsvg 模式文件取決于當前組件的mode配置。關于事件動作的通用觸發機制actionTypecomponentIdargs可進一步參考 amis 的 事件動作文檔。屬性表以下為 QRCode 組件的完整屬性清單與文檔屬性表保持一致并結合源碼補充了部分實現細節屬性名類型默認值說明typestringqr-code指定為 QRCode 渲染器源碼別名qrcode亦可用modestringcanvas渲染模式有canvas和svg兩種classNamestring外層 Dom 的類名qrcodeClassNamestring二維碼的類名codeSizenumber128二維碼的寬高大小backgroundColorstring#fff二維碼背景色foregroundColorstring#000二維碼前景色levelstringL二維碼糾錯級別有L M Q H四種value模板https://www.baidu.com掃描二維碼后顯示的文本如果要顯示某個頁面請輸入完整 urlhttp://...或https://...開頭支持使用模板imageSettingsobjectQRCode 圖片配置imageSettings.srcstring圖片鏈接地址imageSettings.widthnumber默認為codeSize的 10%圖片寬度imageSettings.heightnumber默認為codeSize的 10%圖片高度imageSettings.xnumber默認水平居中圖片水平方向偏移量imageSettings.ynumber默認垂直居中圖片垂直方向偏移量eyeTypestringdefault碼眼類型有default、circle、rounded三種eyeBorderColorstring#000000碼眼邊框顏色eyeBorderSizestringdefault碼眼邊框大小有default、sm、xs三種eyeInnerColorstring#000000碼眼內部顏色pointTypestringdefault碼點類型有default、circle兩種pointSizestringdefault碼點大小有default、sm、xs三種pointSizeRandombooleanfalse碼點大小隨機除上表外從 AMISQRCodeSchema 的類型定義還可以看到兩個文檔表格未列出的實用屬性namestring關聯字段名可用于在表單中與數據字段綁定placeholderstring默認-value為空時展示的占位內容。動作表當前組件對外暴露以下特性動作其他組件可以通過指定actionType: 動作名稱、componentId: 該組件id來觸發這些動作動作配置可以通過args: {動作配置項名稱: xxx}來配置具體的參數詳細請查看事件動作。動作名稱動作配置說明saveAsname?: string文件名下載文檔附渲染模式與測試驗證mode決定二維碼最終的輸出載體默認canvas可切換為svg。兩種模式在 QRCode.test.tsx 中均有覆蓋svg 模式斷言渲染出svg節點且backgroundColor以background-color樣式呈現、foregroundColor以fill屬性呈現QRCode.test.tsx嵌入圖片斷言image節點存在、xlink:href已設置且x/y/width/height均大于 0QRCode.test.tsxcanvas 模式默認渲染canvas節點并對toDataURL輸出的圖片數據進行了斷言QRCode.test.tsx。SnapShot 文件 QRCode.test.tsx.snap 中也保留了三種 svg 場景默認、自定義顏色、嵌入圖片的完整 DOM 結構快照可作為理解組件實際輸出結構的參考。選擇建議需要位圖導出PNG時使用默認的canvas模式需要無損矢量輸出、便于放大或二次加工時選擇svg模式但需注意svg模式下saveAs下載的是.svg文件。【免費下載鏈接】amis前端低代碼框架通過 JSON 配置就能生成各種頁面。項目地址: https://gitcode.com/GitHub_Trending/am/amis創作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考