简介：面向Delphi XE10.3开发者的TMS WebCore v1.1.3.0完整源码包，适合希望沿用VCL/FMX经验构建响应式Web界面的中高级开发者，也便于团队研究组件库实现并做二次开发。包内共1573个文件，约34.72MB，以png、jpg等界面与示例图片，pas、dfm、dpr、dproj等Delphi源码与工程文件，dcu、res等编译资源，以及js、html、css等前端文件为主，另含少量exe、dll和字体资源，覆盖组件源码、示例工程与运行支撑素材，目录结构较完整。已有374人学习，说明该版本在Delphi转Web场景中具有一定关注度。读者可获得可编译的组件完整源码，理解按钮、表格、图表、导航条等控件在HTML5、CSS3与JavaScript下的实现方式，并借助Canvas、WebSocket扩展动态图形与实时通信应用；开放源码也便于排查问题、裁剪模块和按项目定制，降低桌面端迁移到Web端的学习成本。
1. 从 Object Pascal 到浏览器：TMS WebCore v1.1.3.0 到底解决的是哪类问题
先说结论：TMS WebCore v1.1.3.0 这个 full source 包的核心不是“又一个前端框架”，它把 pas2js 编译链、一套 Web 控件和 Delphi 10.3 的设计期集成封装在一起，让 Pascal 单元被编译成 JavaScript 后丢进浏览器里跑。压缩包名里的 TMSWebCorev1.1.3.0 就是版本标识，full source 意味着你拿到的不只是编译好的组件，还有可以打开、可以改的实现单元。
真正被打动的场景是这样的：一个维护了多年的 10.3 工程，里面沉淀了数据校验、状态机、接口封装，现在有人要把其中两三块界面搬上 Web。用 TypeScript 重写一遍，成本看得见；用这套东西，业务单元原地复用，界面换一批控件，编译产物是纯静态文件，扔到任意静态服务器上就能跑。
适合谁：熟悉 Delphi、能看懂 VCL 风格的属性事件、愿意接受“浏览器是单线程事件循环”这个前提的人；适合想把已有 Pascal 逻辑搬到 Web、又不想另起一条技术栈的团队。不适合：从零起步做前端、或者对首屏体积和第三方生态有硬指标的新项目——那些场景下它只会让你绕远路。
2. 装进 Delphi 10.3：full source 包的三种落地方式与验证方法
入手这份东西的第一个卡点从来不是写代码，是“装完之后组件面板上到底该有什么”。这一章把三种安装路径拆开讲，最后用一次空白页跑通来收口。装错了不是不能跑，而是后面每一个问题都会长得像玄学。
2.1 解压后先做一次目录盘点
full source 包解压出来通常是三层结构：第一层是包名目录，第二层按源码、包工程、示例分成几块，第三层才是真正的.pas单元和.dpk/.dproj包工程。包工程目录一般会按 Delphi 版本再分子目录，找带 10.3 标记的那一个，别看旁边 10.2 或 10.4 的。
盘点目的只有一个：确认要加进 Library Path 的根目录到底在哪一层。判断方法很直接——找到包含Web.pas或者TMSWebCore.pas的那一级，它的父目录通常就是源码根。加错一层的表现是编译时找不到单元，但组件面板上控件又都在，很容易误判成“装坏了”。
顺手看一眼包里有没有带 pas2js 的编译器和运行时 JS。运行时那几份lib*.js是从这里拷贝进输出目录的，缺了这一步，编译能过、页面却白屏。
2.2 路径一：编译并安装设计期包
这是最正规也最省心的一条路。运行时会分成两类包：运行时包承载真正的实现单元，会被打进最终的 js 产物；设计期包（对普通开发者最常见的是带dcl前缀那种）只负责把控件注册到 IDE 的组件面板上，不进产物。两者的区别决定了 Build 顺序必须由 groupproj 统一调度，因为设计期包依赖运行时包。
- 打开 Delphi 10.3，
File → Open Project，定位到包工程目录下 10.3 那一级的.groupproj（没有就打开.dpk）。 - 在项目管理器里对包执行
Build，不要只点Compile——设计期包在 Build 时会连依赖的运行时包一起重编。 - Build 全绿之后点
Install，IDE 会提示把新包写进注册表，允许就行。 - 完全退出并重启 IDE，看组件面板有没有多出一页。
| 动作 | 观察点 | 出问题时的含义 |
|---|---|---|
| Open Project | 能否列出包工程 | 列不出多半是包工程版本不对 |
| Build | 输出窗口最后一行 | 出现成功字样才算过 |
| Install | IDE 的注册表写入提示 | 报“包已存在”说明之前装过 |
| 重启后 | 组件面板页名 | 页名对不上说明装的是别的版本 |
为什么必须重启：组件面板是 IDE 启动时读注册表构建的，Install 只是写入，不刷新。很多人卡在这里，以为没装上，反复 Install，最后注册表里堆了一串重复项。
编译产物默认落在公共文档目录下带Bpl的那一级，路径在Tools → Options → Environment Options里能改。找不到 bpl 的时候先去那里翻，别在包工程目录里瞎找。
2.3 路径二：手动注册已有 bpl
有些机器上包编译不成功，或者你手上拿到的就是别人编好的 bpl，那就走注册这条路。Components → Install Packages → Add，选中 bpl，确定，重启。
这条路能装出来，但前提很硬：bpl 的编译环境和当前 IDE 必须完全一致。10.3 有若干子版本，混着来就会在加载时报“找不到入口点”之类的错，而错误信息往往指向系统库而不是这个包，排查成本很高。
卸载顺序别搞反：先把 Library Path 里对应的源码目录删掉，再Install Packages里 Remove，最后才删磁盘上的 bpl。顺序反了，下次启动 IDE 会弹一个找不到包的对话框，点掉之后组件面板也跟着没了。
2.4 路径三：不装包，纯路径引用
只写代码、不用设计器拖控件的话，其实可以不装设计期包，只在Tools → Options → Library → Library Path（选 Win32）里把源码根目录和它的几个子目录加进去，编译照样过。适合想把这份源码当普通单元库来用、或者准备改源码的场景。
代价是组件面板上看不到东西，写界面只能手写TWebButton.Create(Self)那种形式。听起来别扭，但如果你的目的本来就是读实现、改行为，这条路径反而干净——不会被设计期包牵着走，也不会因为包版本不一致在启动时弹窗。
2.5 验证：跑通一个空白页
装完别急着写业务，先验证链路。
File → New → Other → TMS Web，选 Web Application，项目起个名字，输出目录默认会落在项目目录下带TMSWeb的那一级。直接编译，输出目录里应该能看到三样东西：一个.html、一个同名.js，以及运行时那几份lib*.js。
然后在输出目录里起一个本地静态服务器：
# 在编译输出目录里起本地静态服务器 # 不要用 file:// 双击 html，XHR 和相对路径都会出问题 # 端口随意，别和已有服务冲突 python -m http.server 8080浏览器打开http://localhost:8080，页面空白且控制台没有红色报错，说明编译链、运行时和 HTML 模板这三段是通的。
提示：这一步跑不通，后面所有问题都是它的连锁反应。先停在这里排查，别往下走。
3. 控件落到 DOM 上的真实样子：TWebForm、ElementID 与事件回调
这套东西最容易让人误解的地方是“它到底生成什么”。很多人脑子里还是 VCL 的窗体图纸模型，结果一打开输出目录就懵了。这一章把编译产物拆开，讲清楚控件到 DOM 的映射规则、事件的绑定方式，以及为什么这里不能写阻塞逻辑。
3.1 一次编译到底生成了什么
输出目录里最少会多出三份东西：<Project>.html、<Project>.js、以及运行时依赖的一组lib*.js（pas2js 运行时代码、RTTI 表、基础库）。.html是个壳，.js里才是你写的 Pascal 编译后的样子。
打开<Project>.html，骨架大概是：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Project1</title> <!-- 运行时依赖，顺序不能乱 --> <script src="lib.js"></script> <script src="rtti.js"></script> <!-- 你的 Pascal 编译产物 --> <script src="Project1.js"></script> </head> <body> </body> </html>然后.js文件里能搜到你写的方法名——pas2js 基本上一比一映射，方法名、类名都保留着。这就是后面能直接打调试断点、能对着源码看行为的原因。
要注意<body>默认是空的。控件不是写死在 HTML 里的，而是运行时由 Pascal 侧创建的。这个认知很关键：页面结构可以在编译前改，但控件的生命周期由 Pascal 代码控制。
3.2 TWebForm 与控件的创建时机
TWebForm是这套东西里的“窗口”，但它在浏览器里没有自己的 DOM 容器——它对应document.body。WebFormCreate这类事件比 VCL 的FormCreate晚，触发时机在 DOM 解析完之后，所以找元素、设ElementID都应该放在这里。
procedure TForm1.WebFormCreate(Sender: TObject); begin // 此刻 document.body 已存在，可以安全地按 id 找元素并接管 WebEdit1.ElementID := 'userName'; WebButton1.ElementID := 'submit'; WebLabel1.ElementID := 'tip'; end;同样的代码写进FormCreate就不一定成立——那时 DOM 可能还没解析完，getElementById拿到的是null，控件挂不上去，运行时表现就是“界面看着正常但点了没反应”。这是这套框架里最容易犯的第一个错，也是最容易被误判成 bug 的一个。
3.3 ElementID：把控件挂到已有 DOM 上
ElementID是这个框架里最关键的一个属性。它告诉控件“不要自己造元素，去挂到页面上已经存在的那个 id 上”。理解这一个属性，整套 UI 模型就通了。
配套的 HTML 长这样：
<body> <div class="login"> <input id="userName" type="text" placeholder="账号"> <button id="submit">登录</button> <span id="tip"></span> </div> </body>这样WebEdit1就有了可读写的value、WebButton1就有了点击事件、WebLabel1.Caption就直接写进#tip的innerHTML。Pascal 侧写的是属性，落到浏览器里就是 DOM 属性，中间没有额外的虚拟 DOM 层。
几个约束要记住：
ElementID必须在控件首次渲染前设置，常见位置就是WebFormCreate，设在Click里已经晚了。- 一个 DOM 元素只能被一个控件接管，重复绑定会出现两个控件抢同一个节点，表现是随机一个不更新。
- 设了
ElementID之后，控件的Left/Top/Width这些布局属性就不起作用了，位置完全由 CSS 决定。
这条规则的实践含义很明确：页面结构和样式交给 HTML/CSS，行为和值交给 Pascal。想让设计出图、你只写逻辑，走的就是这条路。反过来如果想纯代码搭界面，就别设ElementID，让控件自己造元素。
3.4 事件方法是怎么变成浏览器回调的
写一个procedure TForm1.WebButton1Click(Sender: TObject);，编译之后在.js里就是一个绑到该元素click上的函数。不需要写额外代码，也不需要手动addEventListener。这是设计期集成省下来的事。
需要直接操作 DOM 时，用内联汇编：
procedure TForm1.WebButton1Click(Sender: TObject); begin // 内联 asm 会被原样写进 js 产物，这里直接操作真实 DOM asm document.getElementById('tip').innerHTML = '已提交'; document.getElementById('submit').disabled = true; end; end;内联asm是这套框架留的“后门”，代价是这部分代码拿不到编译期检查，元素 id 写错了只会在浏览器控制台报错。我的习惯是只在两三种场景用它：需要调用浏览器原生 API、需要绕开 RTL 子集实现的差异、需要做性能敏感的批量 DOM 操作。其余场景还是走控件属性，可维护性差得不是一点。
3.5 为什么这里不能写阻塞逻辑
浏览器是单线程事件循环。Pascal 侧任何“等结果出来再往下走”的写法都会把页面卡住，因为主线程被你占着，浏览器连重绘都排不上。常见做法是把后续逻辑塞进回调，或者用TWebTimer把一步拆成几步。
procedure TForm1.StartFlow; begin // 先让界面把状态文字画出来，再开始耗时的异步操作 FStep := 1; WebTimer1.Interval := 10; WebTimer1.Enabled := True; end; procedure TForm1.WebTimer1Timer(Sender: TObject); begin WebTimer1.Enabled := False; case FStep of 1: begin WebLabel1.Caption := '正在加载…'; FStep := 2; WebTimer1.Enabled := True; // 排到下一轮事件循环 end; 2: LoadUsers; // 发请求，结果走回调 end; end;Interval := 10的实际含义是“下一轮事件循环再执行”，不是精确等 10 毫秒——这点和 VCL 里TTimer的直觉不一样，但效果正好是想要的：先让浏览器把这次的 DOM 改动画出来，再去干耗时的事。这个技巧在“点按钮后立刻显示加载中”这种需求里特别好用，不用它的话，用户会觉得按钮点了没反应。
4. 打通数据这一段：TWebHttpRequest、JSON 解析与 TWebClientDataSet
界面能跑起来只是第一步。真正决定这套东西能不能用在项目里的，是数据这条路走得顺不顺。这一章从一次 GET 请求讲到本地存储，重点放在几个版本相关的边界上。
4.1 TWebHttpRequest 的最小可用写法
从工具箱拖一个TWebHttpRequest到窗体上，配三个属性：URL、Command、OnResponse。
procedure TForm1.LoadUsers; begin WebHttpRequest1.URL := '/api/users?page=1'; WebHttpRequest1.Command := httpGET; WebHttpRequest1.Execute; // 发起后立刻返回，不阻塞 end; procedure TForm1.WebHttpRequest1Response(Sender: TObject; AResponse: string); begin // AResponse 是响应体字符串，状态码另取 ParseUsers(AResponse); end;Execute调用后马上返回，结果从OnResponse里出来。Command的可选值对应 HTTP 方法，IDE 里补全能看到完整列表。这里用相对路径/api/users，目的是让前端和接口走同一个域名，省掉跨域那一堆配置。
POST 的时候要设PostData，常见做法是先把对象序列化成 JSON 字符串再塞进去。
procedure TForm1.SaveUser(const AName: string); var body: string; begin body := '{"name":"' + AName + '"}'; WebHttpRequest1.URL := '/api/users'; WebHttpRequest1.Command := httpPOST; WebHttpRequest1.PostData := body; WebHttpRequest1.Execute; end;手拼 JSON 只是为了把链路说清楚，真项目里请走序列化，不然姓名里带个双引号就能把请求体搞坏，而服务端返回的往往是一个笼统的 400，追起来很費劲。
注意：
OnResponse的方法签名在不同版本间有过调整。一律以自己 IDE 里代码补全给出的签名为准，别照搬别处的写法。签名对不上时编译不报错，运行期事件静默不触发，这个坑足够让人怀疑人生。
4.2 响应解析：TJSONObject 的可用范围和边界
procedure TForm1.ParseUsers(const AResp: string); var root: TJSONObject; arr: TJSONArray; i: Integer; begin root := TJSONObject.ParseJSONValue(AResp) as TJSONObject; if root = nil then Exit; // 解析失败直接退，别带着 nil 往下走 try arr := root.GetValue('data') as TJSONArray; if arr = nil then Exit; for i := 0 to arr.Count - 1 do AddRow(arr.Items[i] as TJSONObject); finally root.Free; // 必须释放，否则每刷新一次漏一份 end; end;TJSONObject在 pas2js 环境下是 Delphi RTL 的一个子集实现。层级浅、字段少的时候完全够用；一旦遇到深层嵌套或者null值处理，容易踩到实现差异。我一般会在超过三层嵌套时直接借浏览器原生：
function TForm1.GetField(const AJson, APath: string): string; begin // 借用浏览器原生 JSON.parse，避开子集实现的边界 asm var o = JSON.parse(AJson); var p = APath.split('.'), v = o; for (var k = 0; k < p.length; k++) v = v ? v[p[k]] : null; Result = (v === null || v === undefined) ? '' : String(v); end; end;代价是失去编译期检查，好处是行为完全等于浏览器里你熟悉的那一套。这两种写法在项目里混用没问题，前提是团队里说清楚边界：简单结构走 RTL，复杂结构走原生。
4.3 TWebClientDataSet 与界面绑定
TWebClientDataSet在 Web 端是精简版的TClientDataSet：字段定义、记录遍历、Append/Post都在，但别指望LoadFromFile那种文件级能力。它的定位是“前端内存表”，不是完整的 midas 客户端。
procedure TForm1.InitDataSet; begin // FieldDefs 必须在 CreateDataSet 之前加完，顺序反了就是空表 WebClientDataSet1.FieldDefs.Add('id', ftInteger); WebClientDataSet1.FieldDefs.Add('name', ftString, 64); WebClientDataSet1.CreateDataSet; WebDataSource1.DataSet := WebClientDataSet1; WebDBGrid1.DataSource := WebDataSource1; end; procedure TForm1.AddRow(AObj: TJSONObject); begin WebClientDataSet1.Append; WebClientDataSet1.FieldByName('id').AsInteger := AObj.GetValue('id').Value.ToInteger; WebClientDataSet1.FieldByName('name').AsString := AObj.GetValue('name').Value; WebClientDataSet1.Post; end;这套东西的元数据是运行时构建的，不像桌面端还能从设计期窗体文件里读回来。所以字段定义一定要集中在初始化方法里，别散在各个事件里，否则调试时会发现某个字段时而有时而没有。WebDBGrid1这种数据感知控件是直接挂WebDataSource1的，绑定链断在哪一环，界面就停在最后一次成功的状态，没有任何报错——这是排查数据问题最难受的地方。
4.4 本地状态放哪儿
TWebLocalStorage对应浏览器的localStorage，TWebSessionStorage对应sessionStorage。区别一句话：前者关掉标签页还在，后者关掉就没。
procedure TForm1.RememberToken(const AToken: string); begin WebLocalStorage1.Values['token'] := AToken; end; function TForm1.GetToken: string; begin Result := WebLocalStorage1.Values['token']; end;注意存的是字符串。对象要先序列化，读回来再反序列化。localStorage有容量上限，塞大块数据进去会被静默截断或直接抛异常，排查起来非常费劲——我的习惯是超过几 KB 的数据就不放这儿，宁可每次请求拉一遍。
5. 五处最容易翻车的地方：从白屏到版本混用的排查路径
安装和第一版功能跑通之后，真正的成本才开始显现。下面这五条都是我在实际项目里反复遇到的，按“现象 → 原因 → 解决”写，照着对号入座就行。
5.1 编译通过、浏览器白屏，控制台报xxx is not defined
现象：编译输出全部成功，打开页面一片空白，控制台第一行是某个函数或类名未定义。
原因：`.
本文还有配套的精品资源，点击获取
