简介TMS FNC WX Pack v1.7.3.0 是面向 Delphi 与 CBuilder XE7-13含 12.3 Athens开发者的跨平台 Web 扩展控件包同一套源码可编译为 VCL、FMX、LCL 或 TMS WEB Core 应用覆盖 Windows、macOS、iOS、Android、Linux 及 Web 全平台。包内提供条码生成、摄像头调用、HTML 富文本编辑、PDF 渲染、视频播放、JSON 树编辑、TTS 朗读、OCR 识别、DocX 生成、LaTeX 公式编辑与 WebControl 嵌入等十余类组件并针对 Delphi 13 的 64 位 IDE 与 Win64x Modern 目标做了高 DPI 优化新增 WebEngine 属性可切换 Edge/WebView2 内核。资源共 815 个文件以 pas 源码、dproj/dpr 工程、dfm/fmx 窗体、dcr 组件资源及 html、ico、res 等素材为主压缩包约 14.37MB全源码交付、无 DLL 依赖可闭源商用。目前已有 128 人学习下载适合需要快速为桌面或移动项目补齐 Web 与文档处理能力的 Delphi 开发者参考。1. TMS FNC WX Pack 在 Delphi 里的定位它到底补上了哪块短板如果你用 Delphi 做过几年桌面项目大概率遇到过这种局面VCL 自带的控件够用但不够好看FMX 跨平台但某些交互控件缺失想引入 Web 技术做混合界面又不想把整个项目改成 Electron 架构。TMS FNC WX Pack 就是在这个缝隙里出现的——它把一批基于 Web 技术封装的控件地图、图表、富文本编辑、二维码、签名板等做成 Delphi 可直接拖放的组件同时兼容 VCL 和 FMX支持 Delphi XE7 到 13 Florence 这个跨度极大的版本区间。标题里的 “FS” 通常指 Full Source完整源码意味着拿到的不只是编译好的 bpl/dcu而是可以自己编译、调试、甚至改源码的完整包。这对一线工程师来说差别很大遇到玄学崩溃时有源码就能跟进去看没源码只能等官方更新。这篇文章面向的是正在评估或已经拿到这个包、准备在真实项目里落地的 Delphi 开发者重点讲清楚三件事这个包在你的工程里怎么装、装完怎么用、用起来哪些地方容易翻车。2. 从 7z 到 IDE 工具栏TMS FNC WX Pack 的安装与工程接入2.1 先搞清楚包里的目录结构和版本对应关系拿到一个 7z 压缩包第一步不是急着解压到 IDE 目录而是先看清楚里面的组织方式。TMS 的包通常按产品线分目录FNC WX Pack 会包含 FNC Core 依赖、WX 控件本体、Demo 工程、帮助文档和可能的安装脚本。解压后你大概率会看到类似这样的结构TMS FNC WX Pack/ ├── Source/ # 完整源码FS 版本的核心价值 ├── Packages/ # 各 Delphi 版本的 .dpk 包文件 │ ├── Delphi XE7/ │ ├── Delphi 10.4/ │ ├── Delphi 11/ │ ├── Delphi 12/ │ └── Delphi 13 Florence/ ├── Demos/ # 按控件分类的示例工程 ├── Doc/ # API 文档和 PDF 手册 └── Install/ # 安装辅助脚本或说明关键点是Packages 目录下会按 Delphi 版本分子目录你必须选和自己 IDE 版本匹配的那个 .dpk。选错了不会立刻报错但编译出来的 bpl 在 IDE 里加载时会提示版本不兼容。另一个容易忽略的是 FNC Core——WX Pack 依赖 TMS FNC Core 包如果之前没装过 FNC Core需要先把它编译安装好否则 WX 的包编译时会报找不到单元。注意Delphi 13 Florence 是较新的版本如果你的包是从旧版本升级上来的确认 Packages 目录里确实有对应子目录没有的话需要联系供应商获取更新不要试图用 Delphi 12 的包强行装到 13 上。2.2 编译安装包并验证 IDE 里能看到控件安装的核心操作是在 IDE 里打开对应版本的 .dpk 工程然后 Build、Install。以 Delphi 12 为例具体步骤# 假设解压到了 D:\Components\TMSFNCMXPack # 1. 先确认 FNC Core 已安装 # 在 IDE 中检查 Component - Install Packages 里是否有 TMS FNC Core # 2. 打开 WX Pack 的包工程 # 路径类似 # D:\Components\TMSFNCMXPack\Packages\Delphi 12\TMSFNCWXPack.dpk # 3. 在 IDE 中右键 - Build然后右键 - Install # 4. 验证新建一个 VCL Application # 在 Tool Palette 搜索 TMSFNC应该能看到 WX 系列控件编译过程中最常见的报错是 “Unit not found: FMX.TMSFNC...”这说明 FNC Core 的源码路径没有加到 Library Path 里。解决方式是在 IDE 的 Tools - Options - Language - Delphi - Library 中把 FNC Core 的 Source 目录加到对应平台的搜索路径下。VCL 项目和 FMX 项目需要的路径可能不同建议两个都加。安装成功后Tool Palette 里会出现 TMS FNC WX 分类包含 TTMSFNCWXMap、TTMSFNCWXChart、TTMSFNCWXQRCode、TTMSFNCWXSignature 等控件。拖一个到窗体上如果设计期能看到占位区域而不是报错弹窗说明运行时依赖也基本就位了。2.3 在 VCL 和 FMX 工程里分别接入第一个控件装好之后先用最小工程验证一遍。VCL 和 FMX 的接入方式有细微差别主要是父容器和渲染方式不同。VCL 下拖一个 TTMSFNCWXQRCode 到 Form 上设置好位置和大小然后在按钮点击事件里生成二维码procedure TForm1.Button1Click(Sender: TObject); begin // 设置要编码的内容 TMSFNCWXQRCode1.Text : https://example.com/delphi-fnc-wx; // 设置纠错级别L/M/Q/H 对应 7%/15%/25%/30% 容错 TMSFNCWXQRCode1.ErrorCorrectionLevel : eclMedium; // 触发重新生成 TMSFNCWXQRCode1.Update; end;FMX 下同样的控件用法类似但要注意 FMX 的渲染是基于 GPU 的某些 WX 控件在 FMX 里是通过内嵌浏览器或 WebView 实现的在 Android/iOS 上需要额外配置权限和 WebView 组件。如果你只做 Windows 桌面VCL 路线更稳踩坑更少。参数说明ErrorCorrectionLevel 越高二维码越密集但抗污损能力越强Text 属性支持中文但要注意编码格式建议统一用 UTF-8 字符串。如果生成的二维码扫不出来先检查 Text 是否为空、纠错级别是否设得太低、控件尺寸是否小于最小可渲染尺寸。3. 把 WX 控件用进真实业务地图、图表与富文本的落地参数3.1 TTMSFNCWXMap 的坐标体系与离线加载策略地图控件是 WX Pack 里使用频率最高的之一底层通常封装了 Leaflet 或类似的前端地图库。在 Delphi 里你操作的是 Pascal 属性但实际渲染发生在内嵌的浏览器环境里。这意味着两件事第一网络不通时地图瓦片加载不出来第二坐标系转换需要你自己处理。常用属性配置procedure TForm1.FormCreate(Sender: TObject); begin // 设置初始中心点和缩放级别 TMSFNCWXMap1.Center : PointF(116.397, 39.908); // 北京 TMSFNCWXMap1.Zoom : 12; // 添加标记 TMSFNCWXMap1.AddMarker(116.397, 39.908, 项目现场); // 如果需要离线使用需要提前把瓦片缓存到本地 // 并通过自定义 URL 模板指向本地文件服务 TMSFNCWXMap1.TileServerURL : http://localhost:8080/tiles/{z}/{x}/{y}.png; end;参数说明Center 用的是经纬度注意纬度在前还是经度在前取决于具体版本建议先用一个已知坐标测试。Zoom 范围通常是 1 到 18超过 18 很多瓦片服务不提供。TileServerURL 是离线部署的关键——你需要自己搭一个静态文件服务把瓦片目录暴露出来或者用 file:// 协议直接指向本地目录但后者在部分 WebView 里会被安全策略拦截。离线地图的瓦片来源需要合法合规建议使用自己测绘或已获授权的数据。如果项目只需要展示少量固定点位可以考虑用静态图片叠加标记的方式替代完整地图控件减少依赖。3.2 TTMSFNCWXChart 的数据绑定与实时刷新图表控件的使用路径通常是准备数据序列 - 绑定到控件 - 设置样式 - 刷新。WX Chart 支持折线、柱状、饼图等常见类型数据通过 AddPoint 或直接操作 Series 对象来填充。procedure TForm1.Timer1Timer(Sender: TObject); var NewValue: Double; begin // 模拟实时数据 NewValue : Random(100) Sin(Now * 10) * 20; // 添加数据点第一个参数是 X 轴标签第二个是 Y 值 TMSFNCWXChart1.AddPoint(FormatDateTime(hh:nn:ss, Now), NewValue); // 限制数据点数量避免内存无限增长 if TMSFNCWXChart1.Series[0].Points.Count 100 then TMSFNCWXChart1.Series[0].Points.Delete(0); // 刷新显示 TMSFNCWXChart1.Update; end;参数说明AddPoint 的第一个参数如果是字符串会作为分类轴标签如果是数值则作为数值轴。实时刷新场景下Timer 的 Interval 不建议低于 200ms因为每次 Update 都会触发一次 WebView 重绘频率太高会导致界面卡顿。数据点数量超过 500 后建议做降采样或滚动窗口否则前端渲染压力会明显上升。如果图表在 FMX 的移动端上显示异常先检查 WebView 是否正常初始化。部分 Android 设备需要手动开启硬件加速否则图表会白屏。3.3 富文本编辑器与签名板在表单场景里的配合TTMSFNCWXRichEditor 和 TTMSFNCWXSignature 经常一起出现在需要用户填写并签字的业务表单里。富文本编辑器负责内容录入签名板负责手写签名最后把两者合成一份 PDF 或图片存档。procedure TForm1.btnSaveClick(Sender: TObject); var RichContent: string; SignatureStream: TMemoryStream; begin // 获取富文本 HTML 内容 RichContent : TMSFNCWXRichEditor1.ContentAsHTML; // 获取签名图片流 SignatureStream : TMemoryStream.Create; try TMSFNCWXSignature1.SaveToStream(SignatureStream, image/png); SignatureStream.Position : 0; // 这里可以把 RichContent 和 SignatureStream 一起存库或生成 PDF // 具体存储逻辑取决于你的后端接口 finally SignatureStream.Free; end; end;参数说明ContentAsHTML 返回的是标准 HTML 字符串可以直接存入数据库的 TEXT 字段。签名板的 SaveToStream 第二个参数指定图片格式PNG 支持透明背景适合叠加到文档上。注意签名板在触摸屏和高分屏上的坐标映射如果发现签名偏移检查控件的 Scale 属性和系统的 DPI 设置是否匹配。4. 避坑与排查TMS FNC WX Pack 落地时最容易翻车的五个地方4.1 安装后控件面板空白或控件灰色不可用现象包编译安装成功但 Tool Palette 里 TMS FNC WX 分类下没有控件或者控件图标是灰色的。原因最常见的是 FNC Core 版本不匹配。WX Pack 对 FNC Core 有最低版本要求如果之前装过旧版 FNC Core新装的 WX Pack 可能无法注册控件。另一个原因是包的 Register 过程没有正确执行通常和编译时的条件编译指令有关。解决先在 IDE 的 Component - Install Packages 里卸载所有 TMS 相关包然后按 FNC Core - FNC WX Pack 的顺序重新编译安装。如果仍然不行检查包的 .dpk 文件里是否有 {$IFDEF} 条件编译把 Register 过程排除掉了手动确认当前平台宏定义是否正确。4.2 设计期正常运行时报 “Class not registered”现象窗体设计器里控件显示正常一运行就弹出 “Class not registered” 或 “OLE error”。原因WX 控件底层依赖 WebView2 或系统浏览器组件。如果目标机器上没有安装 WebView2 Runtime运行时就会失败。设计期能显示是因为 IDE 所在机器通常已经装了开发环境。解决在部署包里附带 WebView2 Runtime 安装程序或者在安装脚本里检测并自动下载安装。对于 Windows 7 等老系统WebView2 支持有限需要考虑降级方案或改用其他控件。4.3 FMX 项目在 Android 上编译通过但运行时白屏现象FMX 工程在 Android 设备上安装后WX 控件区域一片空白日志里可能有 WebView 相关警告。原因Android 的 WebView 需要网络权限和存储权限如果 AndroidManifest.xml 里没有声明WebView 初始化会静默失败。另外部分国产 ROM 对 WebView 有额外限制。解决在 Project - Options - Application - Uses Permissions 里勾选 INTERNET 和 WRITE_EXTERNAL_STORAGE。如果仍然白屏尝试在代码里手动创建 WebView 并检查 onReceivedError 回调定位具体加载失败原因。4.4 富文本内容在保存后格式丢失现象RichEditor 里编辑好的加粗、颜色、列表等格式保存到数据库再读出来显示时全部变成纯文本。原因ContentAsHTML 返回的 HTML 里可能包含编辑器特有的标签或内联样式如果存储过程中被转义或截断格式就会丢失。另一个可能是读取时没有用 LoadFromHTML 而是直接赋值给了 Text 属性。解决存储时确保数据库字段类型是 TEXT 或 CLOB不会被截断。读取时用 LoadFromHTML 方法而不是 Text 属性。如果后端是 JSON 接口注意 HTML 字符串的转义处理。4.5 多显示器或高 DPI 环境下控件错位现象在 4K 显示器或双屏环境下WX 控件的实际渲染区域和设计期位置不一致鼠标点击位置偏移。原因WX 控件内部是 WebViewWebView 的 DPI 感知和 Delphi 窗体的 DPI 感知可能不一致。Delphi 12 之后对高 DPI 的支持有改进但第三方控件不一定完全适配。解决在项目设置里把 DPI Awareness 设为 Per Monitor v2然后在代码里根据当前显示器的 Scale 因子手动调整控件尺寸。如果问题依旧考虑在 WX 控件外层包一个 Panel通过 Panel 的 Align 和 Padding 来间接控制布局。5. 进阶技巧用源码级调试定位 WX 控件的内部异常FS 版本最大的价值在于源码可见。当 WX 控件出现异常而官方文档没有覆盖时直接跟源码是最快的路径。我一般的做法是在 IDE 里把 WX Pack 的 Source 目录加到调试路径然后在关键方法上下断点比如控件的 Update、LoadFromHTML、SaveToStream 这些入口。具体操作在 Project - Options - Delphi Compiler - Search Path 里加入 WX Pack 的 Source 目录确保 Debug 配置下编译的是源码而不是预编译的 dcu。然后在需要排查的方法里按 F7 单步进入观察参数传递和内部状态变化。另一个实用技巧是打开 WebView 的开发者工具。部分 WX 控件支持通过属性开启调试模式开启后可以在运行时右键弹出 Inspect 菜单直接查看前端 DOM 和 Console 报错。这对排查地图瓦片加载失败、图表数据绑定异常这类问题非常有效。// 部分版本支持这样开启调试 TMSFNCWXMap1.DebugMode : True; // 或者通过全局设置 TMSFNCWXComponent.DebugEnabled : True;参数说明DebugMode 开启后会在控件右键菜单里增加 “Inspect” 选项但会略微增加内存占用生产环境记得关掉。如果找不到这个属性说明当前版本不支持需要查对应版本的文档或直接看源码里有没有暴露相关接口。最后说一个我自己的习惯每次升级 WX Pack 版本前先把当前能正常工作的包完整备份一份包括 bpl、dcu 和源码目录。Delphi 的包管理在版本切换时偶尔会出玄学问题有备份就能快速回滚不至于因为一个控件升级把整个项目卡住。希望帮到你。本文还有配套的精品资源点击获取