TMSWEBCore把Delphi的Pascal窗体代码经pas2js编译器译成JavaScript，产出纯HTML/JS/CSS单页应用（SPA），浏览器直接跑，不依赖任何原生可执行文件。设计期在DelphiIDE里像画VCL一样拖TWebButton、TWebEdit、TWebLabel，编译期由TMSWEBCore插件调用pas2js把.pas/.dfm编成Project1.js，再由项目同目录的Project1.html作为容器加载。下面按“建项目→TMSWebForm结构→事件与组件→调JS→REST/XData联调→编译部署→排错”顺序直拆。
一、新建项目与目录结构
DelphiIDE→File→New→Other→TMSWEB→TMSWebApplication（或TMSWebBrowserApplication）。生成结构：
-Project1.dpr：项目入口，形似VCL的.dpr
•Unit1.pas：窗体逻辑，类继承TWebForm（不是TForm）
•Unit1.dfm：组件布局持久化
•Project1.html：SPA容器，body里默认仅引<scriptsrc="Project1.js"></script>
-编译输出：默认落项目目录\tmsweb子目录，含.html/.js/.css/图片
设计期本质是借VCL设计器画Web客户端，运行时才是真浏览器DOM。多Form共存时，所有TWebForm挂在同一个HTML页面URL下切换，不刷新整页。
二、TMSWebForm与HTML容器绑定机制
每个TWebForm配套一个同名单.html（如unit1.html），作为该窗体控件的挂载容器。运行时TMSWEBCore把TWebButton等控件动态建成对应DOM元素塞进body或指定ElementID节点。
关键属性：
•ElementID：把Delphi控件绑到HTML里已存在的<divid="xxx">，适合套Bootstrap/AdminLTE模板
•ElementFont/ElementClassName：直接挂CSSclass，接Bootstrap5、AdminLTE4无压力
-Body合并规则：Form创建时，unit.html内容合并进主Project.html的body，ElementID对不上就渲染错位
三、基础组件与事件写法
拖TWebEdit1、TWebButton1、TWebLabel1到Form，双击按钮写：
procedureTForm1.WebButton1Click(Sender:TObject);
begin
WebLabel1.Caption:='你好，'+WebEdit1.Text+'！';
end;
F9运行→IDE起内置轻量WebServer（默认localhost:8000）→拉起默认浏览器加载Project1.html→点击按钮改标签。背后就是pas2js编出的JS在操纵DOM。
常用TMSWEBCore前端组件：
•TWebButton/TWebEdit/TWebLabel/TWebMemo
•TWebTableView/TWebTableControl（数据表格）
-TWebHttpRequest（AJAX请求）
•TWebClientConnection+TWebClientDataSet+TWebDataSource（REST/JSON数据集绑定）
四、从Delphi调JavaScript
三种方式直接混写：
1.全局对象：unitWeb里已声明document:TJSDocument;window:TJSWindow;console:TJSConsole
document.title:='后台首页';
window.alert('保存成功');
console.log('debuginfo');
2.asm…end内联JS块（pas2js原生支持）：
procedureTForm1.WebButton1Click(Sender:TObject);
vars:string;
begin
s:=WebEdit1.Text;
asm
alert('你输入了：'+s);
localStorage.setItem('uid's);
end;
end;
3.引入外部JS库：IDE→Project右键→JavaScriptLibraryManager加cdn或本地.js，运行时直接window.xxx()调
五、REST/XData后端联调（管理后台标配）
前端纯SPA不落地数据，走HTTPREST+JSON。后端用TMSXData最快，几分钟把数据库暴露成RESTAPI。
前端连XData步骤：
1.放TXDataWebConnection到Form，设URL：http://localhost:2001/tms/xdata
2.设XDataWebConnection1.Connected:=True（注意：浏览器内全异步，不能紧接写依赖连接的同步代码，用OnConnect回调）
3.用TXDataWebClient发查询/新增/修改，或挂TWebClientDataSet做DB-Aware绑定，写法接近传统TClientDataSet
4.登录鉴权：JWT放Authorization头，TXDataWebConnection的RequestHeaders里加；或用TMSSphinx做统一认证
示例：拉角色列表渲染表格
procedureTForm1.LoadRoles;
begin
XDataWebClient1.RoleList(
procedure(Resp:TXDataClientResponse)
varjson:TJSONArray;
begin
json:=TJSONObject(Resp.Result).GetValue('value')asTJSONArray;
WebTableControl1.LoadFromJSON(json);
end);
end;
六、编译与部署
1.开发期：F9由TMSWebRunner拉起浏览器，内置Server占8000端口，改Project→Options→TMSWeb→Browser可换Chrome/Edge
2.发布期：编译完把\tmsweb输出目录（Project1.html+Project1.js+.css+资源）整目录拷到IIS/Nginx/Apache根目录即可，无DLL、无EXE
3.生产配置：XData后端地址写进同目录td_configuration.json：{"Server":"https://域名/tms/xdata"}，前端读取避免硬编码
4.HTTPS混用坑：页面走HTTPS时，XData也必须HTTPS，否则浏览器拦JS发HTTP请求，Let'sEncrypt免费证书挂XData即可
七、常见排错
•编译报pas2jsnotfound：Tools→Options→TMSWeb→WebCompiler路径未指到pas2js.exe，重装TMSWEBCore或手动指路径
-页面白屏控件不显：unit.html的ElementID与Delphi控件ElementID不一致，或Bootstrap模板DOM结构覆盖掉了挂载点
•XData连不上：URL末尾是否带/tms/xdata、CORS未开（XData端启TCorsMiddleware）、JWT头拼错
-asm块里Pascal变量拿不到：asm内是纯JS上下文，必须先在Pascal侧赋给局部变量再进asm，或用window.__uid=uid桥接
•多Form切换闪屏：用Form.Show/ShowModal而非新建浏览器页，SPA内Form切换不刷新URL
TMSWEBCore的实战价值在“一套Pascal代码出桌面VCL+Web后台”，传奇类开服管理端（在线人数、爆率热改、GM审计、行会查询）直接套AdminLTE模板+XData读HeroDB/SQL，比另学Vue/React省一套语言栈。按上面建项目→拖组件→asm调JS→TXDataWebConnection联后端→\tmsweb目录丢Nginx的流程走，管理后台前端一次成型。
一、新建项目与目录结构
DelphiIDE→File→New→Other→TMSWEB→TMSWebApplication（或TMSWebBrowserApplication）。生成结构：
-Project1.dpr：项目入口，形似VCL的.dpr
•Unit1.pas：窗体逻辑，类继承TWebForm（不是TForm）
•Unit1.dfm：组件布局持久化
•Project1.html：SPA容器，body里默认仅引<scriptsrc="Project1.js"></script>
-编译输出：默认落项目目录\tmsweb子目录，含.html/.js/.css/图片
设计期本质是借VCL设计器画Web客户端，运行时才是真浏览器DOM。多Form共存时，所有TWebForm挂在同一个HTML页面URL下切换，不刷新整页。
二、TMSWebForm与HTML容器绑定机制
每个TWebForm配套一个同名单.html（如unit1.html），作为该窗体控件的挂载容器。运行时TMSWEBCore把TWebButton等控件动态建成对应DOM元素塞进body或指定ElementID节点。
关键属性：
•ElementID：把Delphi控件绑到HTML里已存在的<divid="xxx">，适合套Bootstrap/AdminLTE模板
•ElementFont/ElementClassName：直接挂CSSclass，接Bootstrap5、AdminLTE4无压力
-Body合并规则：Form创建时，unit.html内容合并进主Project.html的body，ElementID对不上就渲染错位
三、基础组件与事件写法
拖TWebEdit1、TWebButton1、TWebLabel1到Form，双击按钮写：
procedureTForm1.WebButton1Click(Sender:TObject);
begin
WebLabel1.Caption:='你好，'+WebEdit1.Text+'！';
end;
F9运行→IDE起内置轻量WebServer（默认localhost:8000）→拉起默认浏览器加载Project1.html→点击按钮改标签。背后就是pas2js编出的JS在操纵DOM。
常用TMSWEBCore前端组件：
•TWebButton/TWebEdit/TWebLabel/TWebMemo
•TWebTableView/TWebTableControl（数据表格）
-TWebHttpRequest（AJAX请求）
•TWebClientConnection+TWebClientDataSet+TWebDataSource（REST/JSON数据集绑定）
四、从Delphi调JavaScript
三种方式直接混写：
1.全局对象：unitWeb里已声明document:TJSDocument;window:TJSWindow;console:TJSConsole
document.title:='后台首页';
window.alert('保存成功');
console.log('debuginfo');
2.asm…end内联JS块（pas2js原生支持）：
procedureTForm1.WebButton1Click(Sender:TObject);
vars:string;
begin
s:=WebEdit1.Text;
asm
alert('你输入了：'+s);
localStorage.setItem('uid's);
end;
end;
3.引入外部JS库：IDE→Project右键→JavaScriptLibraryManager加cdn或本地.js，运行时直接window.xxx()调
五、REST/XData后端联调（管理后台标配）
前端纯SPA不落地数据，走HTTPREST+JSON。后端用TMSXData最快，几分钟把数据库暴露成RESTAPI。
前端连XData步骤：
1.放TXDataWebConnection到Form，设URL：http://localhost:2001/tms/xdata
2.设XDataWebConnection1.Connected:=True（注意：浏览器内全异步，不能紧接写依赖连接的同步代码，用OnConnect回调）
3.用TXDataWebClient发查询/新增/修改，或挂TWebClientDataSet做DB-Aware绑定，写法接近传统TClientDataSet
4.登录鉴权：JWT放Authorization头，TXDataWebConnection的RequestHeaders里加；或用TMSSphinx做统一认证
示例：拉角色列表渲染表格
procedureTForm1.LoadRoles;
begin
XDataWebClient1.RoleList(
procedure(Resp:TXDataClientResponse)
varjson:TJSONArray;
begin
json:=TJSONObject(Resp.Result).GetValue('value')asTJSONArray;
WebTableControl1.LoadFromJSON(json);
end);
end;
六、编译与部署
1.开发期：F9由TMSWebRunner拉起浏览器，内置Server占8000端口，改Project→Options→TMSWeb→Browser可换Chrome/Edge
2.发布期：编译完把\tmsweb输出目录（Project1.html+Project1.js+.css+资源）整目录拷到IIS/Nginx/Apache根目录即可，无DLL、无EXE
3.生产配置：XData后端地址写进同目录td_configuration.json：{"Server":"https://域名/tms/xdata"}，前端读取避免硬编码
4.HTTPS混用坑：页面走HTTPS时，XData也必须HTTPS，否则浏览器拦JS发HTTP请求，Let'sEncrypt免费证书挂XData即可
七、常见排错
•编译报pas2jsnotfound：Tools→Options→TMSWeb→WebCompiler路径未指到pas2js.exe，重装TMSWEBCore或手动指路径
-页面白屏控件不显：unit.html的ElementID与Delphi控件ElementID不一致，或Bootstrap模板DOM结构覆盖掉了挂载点
•XData连不上：URL末尾是否带/tms/xdata、CORS未开（XData端启TCorsMiddleware）、JWT头拼错
-asm块里Pascal变量拿不到：asm内是纯JS上下文，必须先在Pascal侧赋给局部变量再进asm，或用window.__uid=uid桥接
•多Form切换闪屏：用Form.Show/ShowModal而非新建浏览器页，SPA内Form切换不刷新URL
TMSWEBCore的实战价值在“一套Pascal代码出桌面VCL+Web后台”，传奇类开服管理端（在线人数、爆率热改、GM审计、行会查询）直接套AdminLTE模板+XData读HeroDB/SQL，比另学Vue/React省一套语言栈。按上面建项目→拖组件→asm调JS→TXDataWebConnection联后端→\tmsweb目录丢Nginx的流程走，管理后台前端一次成型。