整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
開發(fā)Winform程序的時(shí)候，我們往往需要根據(jù)需要做一些自定義的控件模塊，這樣可以給系統(tǒng)模塊重復(fù)利用，或者實(shí)現(xiàn)更好的效果等功能。但在使用的時(shí)候，我們又往往設(shè)計(jì)時(shí)刻發(fā)現(xiàn)一些莫名其妙的錯(cuò)誤，那么我們?cè)撊绾芜M(jìn)行控件的設(shè)計(jì)時(shí)刻的開發(fā)調(diào)試呢，如何解決碰到設(shè)計(jì)時(shí)刻出現(xiàn)的錯(cuò)誤呢？本文主要介紹我自己在這方面積累的一些經(jīng)驗(yàn)和處理方法，期望對(duì)大家有幫助。
DevExpress Universal Subscription官方最新版免費(fèi)下載試用，歷史版本下載，在線文檔和幫助文件下載-慧都網(wǎng)
例如我的通用附件模塊里面，有一個(gè)自定義控件，需要提供給外部使用的，如下所示。
這里外部使用的模塊，是工作流里面的一個(gè)模塊，也是一個(gè)自定義控件，我想把它作為一個(gè)流程信息的展示控件。
因此就想把這個(gè)附件管理的自定義控件拖動(dòng)到另外一個(gè)自定義控件流程信息展示控件里面，設(shè)計(jì)的流程信息管理的界面如下所示，這個(gè)時(shí)候，使用這個(gè)附近控件是沒(méi)有問(wèn)題的，正常拖動(dòng)到另外一個(gè)控件里面。
編譯整個(gè)項(xiàng)目，左邊的VS工具箱會(huì)出現(xiàn)一個(gè)ApplyControl的自定義控件，但是當(dāng)我拖動(dòng)該控件到新的窗體界面里面的時(shí)候，錯(cuò)誤就出現(xiàn)了。
這個(gè)問(wèn)題可能是因?yàn)檎{(diào)用了訪問(wèn)數(shù)據(jù)庫(kù)的操作，但是更加詳細(xì)的位置我們看不太清楚（數(shù)據(jù)給截?cái)囡@示了）。
為了更好跟蹤到錯(cuò)誤的發(fā)生的地方，我們可以用VS自帶的調(diào)試操作來(lái)進(jìn)行跟蹤。
首先我們?cè)陧?xiàng)目的【屬性】-》【調(diào)試】里面設(shè)置啟動(dòng)操作為指定的VS，選擇“啟動(dòng)外部程序”為對(duì)應(yīng)版本的VS的IDE程序，如下所示。
啟動(dòng)調(diào)試后，打開對(duì)應(yīng)的這個(gè)項(xiàng)目，然后再次模擬從工具箱里面拖動(dòng)控件的效果，這樣VS IDE就能定位到具體的位置了。
我們發(fā)現(xiàn)VS定位到一個(gè)綁定數(shù)據(jù)的數(shù)據(jù)庫(kù)訪問(wèn)操作里面去，但是我開始一直不明白，這個(gè)BindData的操作，其實(shí)已經(jīng)是通過(guò)指定了設(shè)計(jì)時(shí)刻不進(jìn)行的了（!this.DesignMode），不知道為什么還繼續(xù)。
public void BindData()
{
ClearData();
if (!this.DesignMode)
{
List<FileUploadInfo> fileList=new List<FileUploadInfo>();
if (!string.IsNullOrEmpty(this.AttachmentGUID))
{
fileList=BLLFactory<FileUpload>.Instance.GetByAttachGUID(this.AttachmentGUID, this.pager1.PagerInfo);
}
else
{
fileList=BLLFactory<FileUpload>.Instance.GetAllByUser(this.UserId, this.AttachmentDirectory, this.pager1.PagerInfo);
}
..........................調(diào)試到這個(gè)DesignMode的時(shí)候，它的值竟然是false，那么肯定就會(huì)去從數(shù)據(jù)庫(kù)獲取了，而設(shè)計(jì)時(shí)候去找數(shù)據(jù)，這個(gè)時(shí)候就出錯(cuò)了。至于為什么會(huì)是DesignMode為false，開始有點(diǎn)搞不太清楚，不是說(shuō)好設(shè)計(jì)時(shí)刻為True的嗎？
通過(guò)搜索，發(fā)現(xiàn)有位仁兄總結(jié)的比較精辟，這里就借用一下。
也就是說(shuō)一個(gè)控件只有在它自己被拖拽到設(shè)計(jì)器的時(shí)候，其 DesignMode 才是真，如果它被包含在其他控件中被加入到設(shè)計(jì)器，那么那個(gè)控件才是在設(shè)計(jì)模式，而它不是！換句話說(shuō)，DesignMode 并不能反映當(dāng)前環(huán)境是否是運(yùn)行時(shí)，它只能告訴你，這個(gè)控件當(dāng)前是不是直接被設(shè)計(jì)器操作（嵌套的已經(jīng)不算了） ?！?/span>
那解決方法應(yīng)該如何呢，其實(shí)也很簡(jiǎn)單，就是重寫下這個(gè)DesignMode的屬性為我們期望的值即可，如下所示。
/// <summary>
/// 標(biāo)題：獲取一個(gè)值，用以指示 System.ComponentModel.Component 當(dāng)前是否處于設(shè)計(jì)模式。
/// 描述：DesignMode 在 Visual Studio 產(chǎn)品中存在 Bug ，使用下面的方式可以解決這個(gè)問(wèn)題。/// </summary>
protected new bool DesignMode
{
get
{
bool returnFlag=false;
#if DEBUG
if (System.ComponentModel.LicenseManager.UsageMode==System.ComponentModel.LicenseUsageMode.Designtime)
{
returnFlag=true;
}
else if (System.Diagnostics.Process.GetCurrentProcess().ProcessName.ToUpper().Equals("DEVENV"))
{
returnFlag=true;
}
#endif
return returnFlag;
}
}重新編譯控件，然后測(cè)試拖動(dòng)，操作正常，再無(wú)出錯(cuò)，搞定！
DevExpress
DevExpress Universal 10月正式發(fā)布今年第二個(gè)重大版本——v21.2，此版本正式官宣支持Visual Studio 2022 & .NET6，同時(shí)與微軟最新發(fā)布的Windows 11完美兼容，全面解決用戶各種使用場(chǎng)景問(wèn)題。 與時(shí)俱進(jìn)，從未止步！
本文轉(zhuǎn)載自：博客園 - 伍華聰
無(wú)論大公司還是小公司，我們開發(fā)前端工程時(shí)候，項(xiàng)目工程又很多類似的功能或者頁(yè)面，開發(fā)經(jīng)常是加班加點(diǎn)搬磚去做一些無(wú)成長(zhǎng)反復(fù)操作的工作，看鍵盤上 Ctrl 鍵已經(jīng)被磨掉了漆，C 和 V 也馬上磨白了，那對(duì)于開發(fā)如何把這些重復(fù)的工作用機(jī)器去解決？在前端資源緊缺的情況下，是否可直接有工具直接就可以搭建出我想要的前端頁(yè)面？于是業(yè)界的頁(yè)面可視化搭建工具就出現(xiàn)了，本文會(huì)介紹目前最流行的頁(yè)面可視化搭建工具，也會(huì)提供一些業(yè)界開源的可視化搭建項(xiàng)目供大家參考（Copy）。
編程開發(fā)頁(yè)面：動(dòng)態(tài)邏輯頁(yè)面分解為 HTML Tree, Data 和 Dynamic Logic. 前端開發(fā)工程師開發(fā)前端頁(yè)面的過(guò)程, 本質(zhì)上是用編程工具(IDE)對(duì)頁(yè)面的 HTML Tree, Data 和 Dynamic Logic 進(jìn)行增刪和修改.
頁(yè)面可視化搭建：是用可視化交互的方式對(duì)頁(yè)面的 HTML Tree, Data 和 Dynamic Logic 進(jìn)行增刪和修改, 從而實(shí)現(xiàn)頁(yè)面的生成. 頁(yè)面可視化搭建工具是實(shí)現(xiàn)頁(yè)面可視化編輯的軟件工具
目的：任何工具的存在都是更高效地解決問(wèn)題. 頁(yè)面可視化搭建工具, 用于解決頁(yè)面生成的效率問(wèn)題. 可能前端工程師會(huì)覺(jué)得最有效率的頁(yè)面生成方式是打代碼, 但有搭建頁(yè)面需求的不只是前端工程師. 而可視化頁(yè)面搭建工具, 恰恰是面向"就缺一個(gè)前端工程師"的人員, 用于提升他們生成頁(yè)面的效率.
差異點(diǎn) | 編程開發(fā)頁(yè)面 | 可視化搭建頁(yè)面 |
技能要求 | 需要編程基礎(chǔ) | 可以沒(méi)有編程基礎(chǔ) |
操作方式 | 在代碼編輯器中編寫代碼 | 在可視化搭建工具中拖拉/填表/編寫代碼 |
項(xiàng)目名稱 | 項(xiàng)目簡(jiǎn)介 | 能解決什么 |
百度amis（開源） | 前端低代碼框架，通過(guò) JSON 配置就能生成各種后臺(tái)頁(yè)面，極大減少開發(fā)成本，甚至可以不需要了解前端 | 不需要懂前端就能做出專業(yè)且復(fù)雜的后臺(tái)界面，不受前端技術(shù)更新的影響，可以完全使用可視化頁(yè)面編輯器來(lái)制作頁(yè)面 |
政采云-魯班（未開源） | 魯班是一個(gè)基于業(yè)務(wù)組件快速生成頁(yè)面的搭建系統(tǒng)（站點(diǎn)、頁(yè)面、組件、數(shù)據(jù)、權(quán)限） ，JSON Schema將業(yè)務(wù)轉(zhuǎn)成數(shù)據(jù)→將數(shù)據(jù)轉(zhuǎn)為定義→將定義規(guī)范成結(jié)構(gòu) | 提升用戶體驗(yàn)：頁(yè)面采用靜態(tài)化方案，渲染及訪問(wèn)速度更快；提高穩(wěn)定性：采用 Nginx 直接轉(zhuǎn)發(fā)的方案，頁(yè)面路由可用性保障及響應(yīng)性能更具優(yōu)勢(shì)，同時(shí)支持更健壯的容災(zāi)方案，支持快速發(fā)版、回滾。；快速響應(yīng)業(yè)務(wù)需求：通過(guò)組件化復(fù)用，能夠快速響應(yīng)業(yè)務(wù)需求、提高研發(fā)人效；更好的業(yè)務(wù)賦能：使得產(chǎn)品、運(yùn)營(yíng)等同學(xué)也能參與頁(yè)面的搭建，提升業(yè)務(wù)迭代效率和數(shù)據(jù)可用性。；更好的系統(tǒng)化能力：基于搭建系統(tǒng)，便于橫向和性能檢測(cè)系統(tǒng)、穩(wěn)定性保障系統(tǒng)、運(yùn)維部署系統(tǒng)、線上監(jiān)控系統(tǒng)進(jìn)行打通，形成系統(tǒng)級(jí)合力、復(fù)利。 |
淘寶-imgcook（未開源） | 由設(shè)計(jì)稿一鍵智能生成代碼Skecher、ps、圖片、原型圖通過(guò)算法UI智能識(shí)別表達(dá)式轉(zhuǎn)成DSL，再解析DSL為前端頁(yè)面 | 還原設(shè)計(jì)稿；Skecher、ps、圖片、原型圖直接生成代碼；精準(zhǔn)還原；所見(jiàn)所得生；成代碼可維護(hù)強(qiáng)；機(jī)器智能識(shí)別理解；DSL / Plugin可自定義 |
阿里-iceluna、Paas | 配置生成搭建描述協(xié)議 - 標(biāo)準(zhǔn)規(guī)范 - Schema再生成頁(yè)面及邏輯、低代碼編輯器 - 開發(fā)生態(tài) | 改變生產(chǎn)關(guān)系，提升生產(chǎn)力（賦能）- 中后臺(tái)通用搭建產(chǎn)品--所有人；降低研發(fā)成本（提效）- 低代碼開發(fā)平臺(tái)--開發(fā)人員（工程創(chuàng)建、開發(fā)、調(diào)試、發(fā)布全鏈路）；孵化領(lǐng)域產(chǎn)品（搭建生態(tài)）- PaaS平臺(tái)--開發(fā)人員（基礎(chǔ)設(shè)施，基于標(biāo)準(zhǔn)搭建協(xié)議生產(chǎn)搭建物料，為各業(yè)務(wù)場(chǎng)景提供搭建服務(wù)的運(yùn)行和開發(fā)環(huán)境） |
阿里-云鳳蝶（未開源）/pipeline （類似開源） | 像做PPT一樣去做web前；頁(yè)面 Data 編輯 | 支持頁(yè)面 Data 編輯, 面向運(yùn)營(yíng)、產(chǎn)品人員, 編輯自由度為無(wú)嵌套的組件.；目前制作運(yùn)營(yíng)、活動(dòng)頁(yè)面功能上最好的工具.；提供頁(yè)面搭建的模板, 并支持自定義模板.；配置表單基于 Schema 生成, 配置表單操作功能完善. |
阿里-飛冰（未開源）/vue-layout（類似開源） | Component Tree 編輯；針對(duì)中后臺(tái)開發(fā)人員；針對(duì)組件化的頁(yè)面, 主要實(shí)現(xiàn) Component Tree 的可視化編輯. 其核心功能在于頁(yè)面布局設(shè)計(jì): 在 UI 組件列表中選擇合適的組件, 通過(guò)拖拉的方式將組件嵌入到頁(yè)面中, 生成帶布局和樣式的頁(yè)面. | 支持 Component Tree 編輯, 面向中后臺(tái)開發(fā)人員, 編輯自由度為無(wú)嵌套的組件；使用"物料-區(qū)塊", 非前端開發(fā)人員可以快速搭建出可用、符合規(guī)范的頁(yè)面.；頁(yè)面以源碼方式輸出.；前端服務(wù)化的一種方式. |
淘寶-天馬（未開源） | 跨端頁(yè)面搭建 | 跨終端搭建頁(yè)面；面向標(biāo)準(zhǔn)數(shù)據(jù)研發(fā)schema.json；對(duì)模塊的props入?yún)⒚枋?；?shù)據(jù)標(biāo)準(zhǔn)化；數(shù)據(jù)驅(qū)動(dòng)展示；編寫模塊代碼（解耦、模塊既代碼）；打包每個(gè)模塊單獨(dú)打包；從頁(yè)面視角seed動(dòng)態(tài)加載；跨終端的緩存方案（phone tm tb緩存副本、對(duì)應(yīng)訪問(wèn)、代碼標(biāo)識(shí)）；服務(wù)端渲染SSR |
淘寶-方舟 | 設(shè)計(jì)實(shí)現(xiàn)toC營(yíng)銷搭建 | 終端秒開；采用前端優(yōu)化手段實(shí)現(xiàn)終端秒開 |
阿里媽媽-淘積木（未開源） | 從基礎(chǔ)組件搭建完整的營(yíng)銷頁(yè)面的方案設(shè)計(jì) | |
阿里@維奇 | 文檔即代碼;文檔轉(zhuǎn)換成部分代碼 | |
阿里alist /Formily（開源） | Formily 表單方案作為搜索區(qū)域的不二之選時(shí)，通過(guò)對(duì)這些方案的整合，可以快速實(shí)現(xiàn)標(biāo)準(zhǔn)化的列表場(chǎng)景。;同時(shí)AList支持 JSON Schema 協(xié)議渲染，可通過(guò)數(shù)據(jù)驅(qū)動(dòng)快速開發(fā)。 | 內(nèi)置Formily作為搜索區(qū)域方案，性能及功能強(qiáng)大;支持 Ant Design/Fusion Next 組件體系;支持JSON Schema 數(shù)據(jù)驅(qū)動(dòng)方案;副作用邏輯獨(dú)立管理，涵蓋各種復(fù)雜聯(lián)動(dòng)校驗(yàn)邏輯;支持各種復(fù)雜布局方案 |
京東-MPM（未開源） | 采用ComData的數(shù)據(jù)配置方式解析成前端頁(yè)面，是本系統(tǒng)的核心，7PageData 是??的抽象描述層 | 搭建物料豐富:MPM 現(xiàn)有 30+ 個(gè)組件、500+ 個(gè)模板，業(yè)務(wù)能?覆蓋商品、導(dǎo)購(gòu)、營(yíng)銷等多個(gè)場(chǎng)景。配置功能強(qiáng)?:三端渲染是 MPM 的強(qiáng)?能?，除此之外，MPM 還?持??配置 BI 排序、?動(dòng)化埋點(diǎn)、?動(dòng)化測(cè)試、??測(cè)速等。系統(tǒng)能?全?:MPM 為??保駕護(hù)航，不但配備了流暢的拖拽編輯器、實(shí)時(shí)預(yù)覽和??健康診斷能?，還對(duì)系統(tǒng)和??做了全??的監(jiān)控和容災(zāi)降級(jí)?案。 |
美團(tuán)魔方（未開源） | 從基礎(chǔ)組件搭建完整的營(yíng)銷頁(yè)面的方案設(shè)計(jì) | |
美團(tuán)樂(lè)高（未開源） | 從基礎(chǔ)組件搭建完整的營(yíng)銷頁(yè)面的方案設(shè)計(jì) | |
esview(模仿樂(lè)高開源） | Drag vue dynamic components to build your page，generate vue code. | esview開源項(xiàng)目, 模仿美團(tuán)點(diǎn)評(píng)的樂(lè)高.完整的可視化頁(yè)面搭建框架, 面向中后臺(tái)開發(fā)人員.頁(yè)面布局結(jié)果看起來(lái)比較亂, 自定義組件寫法比較詭異; 沒(méi)有融合業(yè)務(wù)邏輯, 不支持在框架中寫頁(yè)面的代碼邏輯. |
Element UI表單設(shè)計(jì)及代碼生成器（開源） | Element UI表單設(shè)計(jì)及代碼生成器，可將生成的代碼直接運(yùn)行在基于Element的vue項(xiàng)目中；也可導(dǎo)出JSON表單，使用配套的解析器將JSON解析成真實(shí)的表單。 | |
Vue-Layout（開源） | 從基礎(chǔ)組件搭建完整的營(yíng)銷頁(yè)面的方案設(shè)計(jì) 基于UI組件的Vue可視化布局、生成.vue代碼的工具。https://github.com/JakHuang/form-generator | 支持 Component Tree 編輯, 面向中后臺(tái)開發(fā)人員, 編輯自由度為可嵌套的組件.頁(yè)面的拖拉生成, 實(shí)現(xiàn)得很完整.用于頁(yè)面設(shè)計(jì), 所以偏向頁(yè)面元素的樣式控制.技術(shù)文章對(duì)可視化搭建工具數(shù)據(jù)流有深刻理解: 可視化在線編輯器架構(gòu)設(shè)計(jì). |
gaea-editor（開源） | 開源項(xiàng)目.支持 Component Tree 編輯, 面向中后臺(tái)開發(fā)人員, 編輯自由度為可嵌套的組件.頁(yè)面的拖拉生成, 實(shí)現(xiàn)得很完整.用于頁(yè)面設(shè)計(jì), 所以偏向頁(yè)面元素的樣式控制.技術(shù)文章對(duì)可視化搭建工具數(shù)據(jù)流有深刻理解: 可視化在線編輯器架構(gòu)設(shè)計(jì). | |
pipeline（開源） | 運(yùn)營(yíng)/產(chǎn)品活動(dòng)頁(yè)面 | |
gengen（開源） | 根據(jù)接口生成頁(yè)面，減少重復(fù)性工作 | |
H5.cn | https://www.ih5.cn/not-logged-in | |
Brick Design（開源） | 拖拽區(qū)塊內(nèi)可直接編輯,生成前端頁(yè)面并預(yù)覽 | |
百度H5（未開源） | https://h5.bce.baidu.com/docs/intro營(yíng)銷活動(dòng)頁(yè)面搭建 | |
其他（開源） | 1.website-builder 2.site-builder 3.VvvebJs 4.grapesjs 5.Maha 6.有贊微頁(yè)面 7.X-Page-Editor-Vue |
基于對(duì)以上頁(yè)面可視化搭建工具調(diào)研，業(yè)界有很多看法，拿出兩個(gè)比較有代表性的文章供大家參考：
以上調(diào)研了那么多業(yè)界比較牛的前端可視化的框架工程，大致思路是類似的，百家爭(zhēng)鳴，盡管阿里的飛冰云鳳蝶很完善了但還是存在以下兩點(diǎn)問(wèn)題：
這兩個(gè)問(wèn)題存在就會(huì)導(dǎo)致我們生產(chǎn)設(shè)計(jì)出來(lái)的東西需要low code，如果是low code開發(fā)人員不愿意用，因?yàn)樯傻拇a不易維護(hù)且臃腫；如果給非開發(fā)人員用，他們又不會(huì)寫代碼，一點(diǎn)代碼都不想寫，所以他們也不愿意用；
而我們站在巨人的肩膀上，能否把上面兩個(gè)問(wèn)題解決呢？目前我沒(méi)有什么好的辦法，但是我們可以先去把他們實(shí)現(xiàn)思路研究明白，才有可能去處上面的最難以解決的問(wèn)題。
相通之處 | 不同之處 | 可借鑒之處 | 應(yīng)該避免問(wèn)題 | 開源代碼可借鑒 |
1、DSL方式解析拖拽或者配置好的偽代碼生成所需前端頁(yè)面，大部分使用的是JSON Schema形式；2、從配置要生成頁(yè)面整個(gè)處理步驟類似 | 1、處理方法不同；2、定義的DSL字段不同；3、優(yōu)化程度不同；4、針對(duì)的業(yè)務(wù)場(chǎng)景不同 | 1、從配置到生成DSL方式的偽代碼再到如何解析最后生成前端頁(yè)面的整體架構(gòu)設(shè)計(jì)及思想可借鑒；2、如何定時(shí)DSL字段schema的模式，如何處理轉(zhuǎn)移編譯打包上線及優(yōu)化 | 1、定位準(zhǔn)用戶群；2、后期維護(hù)問(wèn)題 | 1、百度amis（開源可借鑒 react）2、vue-layout（類似飛冰開源 vue） 3、pipeline （類似飛冰開源 react）4、美團(tuán)樂(lè)高（可參考 vue）5、美團(tuán)魔方（可參考react 6、esview(模仿樂(lè)高開源) 7、Brick Design（開源可借鑒 react） 8、gen（開源）9、gaea-editor（開源） 10、阿里alist/Formily（開源）11、魯班H5(開源) |
JSON Schem數(shù)據(jù)結(jié)構(gòu)特點(diǎn)：
demo1：
{
"type": "object",
"properties": {
"$attr": {
"type": "object",
"properties": {
"hidden": {
"type": "boolean"
}
}
},
"$theme": {
"type": "object",
"properties": {
"themeColor": {
"type": "string"
}
}
},
"items": {
"type": "array",
"items": {
"type": "object",
"properties": {
“itemId”: {
"type": "string"
}
}
}
}
}
}
復(fù)制代碼demo2：
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
