Cnoos

记录一些学习、工作、生活的内容或想法

记录一下为 Foxtable 接入 WebView2：把传统 ERP 客户端扩展成现代 Web 工作台

笔记 约 10 分钟 阅读 13

本篇目录
  1. 背景
  2. 架构设计
  3. 核心组件
  4. WebView2Controller 的能力
  5. Foxtable 向 HTML 发送数据
  6. 为什么选择 Alpine.js
  7. 本地资源与离线能力
  8. 与 ERP 数据源结合
  9. 带来的提升
  10. 当前需要继续完善的点
  11. 总结

在最近的 ERP 管理端改造中，我为 Foxtable 客户端增加了一套 WebView2 扩展能力：在 Foxtable 窗体中嵌入 WebView2 控件，加载本地 HTML 模板，并通过 VB 与 JavaScript 实现双向数据交互。

这次更新的目标不是简单地“在窗口里打开网页”，而是让 Foxtable 具备现代前端界面的表达能力，同时继续保留它原有的数据处理、ERP 接口和本地业务逻辑优势。

背景

Foxtable 本身非常适合处理表格数据、ERP 业务逻辑、内部工具和本地化管理场景。但在面对更复杂的管理员操作界面时，传统窗体控件会逐渐显得吃力，例如：

  • 复杂订单列表
  • 批量筛选与批量操作
  • 统计卡片和图表
  • 发票预览
  • 付款凭证图片查看
  • 经销商订单复核流程
  • 更现代的交互式管理面板

这些功能如果完全用 Foxtable 原生控件实现，开发成本高，界面表现也容易受限。而 HTML/CSS/JavaScript 在这类界面表达上天然更灵活。

因此，我选择将 WebView2 嵌入 Foxtable，让 Foxtable 负责数据与业务逻辑，让 WebView2 负责现代 UI 展示和交互。

架构设计

整体架构如下：

[Foxtable]

– 数据源：ERP订单数据

– 发送数据：window.receiveFoxData()

↓

[WebView2] (Alpine.js)

– 展示：表格 / 图表 / 操作管理界面

– 返回数据：window._foxData()

↑

[Foxtable] 接收返回数据

核心思想是：

  • Foxtable 继续作为 ERP 客户端和数据控制端
  • WebView2 作为本地 HTML UI 容器
  • HTML 页面使用 Alpine.js 实现响应式数据绑定
  • VB 通过 ExecuteControlScript 向页面注入数据
  • 页面将用户选择和操作结果写入全局对象，供 Foxtable 读取或后续扩展通信机制

核心组件

目前主要涉及以下几个部分：

项目根目录html
├── alpine-demo.html
├── cssstyle.css
├── js
│ ├── alpine.min.js
│ └── fox-bridge.js
└── vb
├── 窗口事件代码.vb     └── 窗体加载示例.vb

同时，Foxtable 客户端侧引入了自定义 DLL：

FoxtableWebView2.WebView2Controller

这个 COM 控件封装了 WebView2 的创建、加载、刷新、缩放、执行脚本等能力。

WebView2Controller 的能力

当前 WebView2Controller 已经支持嵌入式 WebView2 控件模式，常用方法包括：

CreateControl
LoadHtmlFile
LoadHtml
LoadHtmlWithBase
LoadUrl
ExecuteControlScript
ResizeControl
DestroyControl
RefreshControl
GetControlUrl
GetDocumentTitle
SetZoom
GetZoom

在 Foxtable 窗体加载时，可以这样创建并加载 HTML：

Set web = CreateObject("FoxtableWebView2.WebView2Controller") 

web.CreateControl( e.Form.Panel.Handle, 0, 0, e.Form.Panel.Width, e.Form.Panel.Height ) 

 web.LoadHtmlFile("H:狐表-2026-1-06htmlalpine-demo.html")

当窗口大小变化时，WebView2 控件也可以跟随缩放：

If Not (web Is Nothing) Then
web.ResizeControl 0, 0, e.Form.Panel.Width, e.Form.Panel.Height
End If

窗口关闭时释放资源：

If Not (web Is Nothing) Then
web.DestroyControl
Set web = Nothing
End If

Foxtable 向 HTML 发送数据

Foxtable 可以从 ERP 数据源中获取订单、商品、库存、付款凭证等数据，然后序列化为 JSON，再注入到 HTML 页面中。

示例：

web.ExecuteControlScript("window.receiveFoxData('data', " & jsonData & ")")

HTML 侧暴露接收方法：

window.receiveFoxData = function(action, data) {
if (action === 'data') {
// 更新 Alpine.js 数据
}
}

在 Alpine.js 页面中，可以将接收到的数据直接绑定到表格、统计卡片和交互控件上。

为什么选择 Alpine.js

这次没有选择 Vue、React 这类完整前端框架，而是使用 Alpine.js，原因很简单：

  • 体积小
  • 无需构建工具
  • 可以直接写在 HTML 中
  • 适合本地模板
  • 和 Foxtable 的“轻量嵌入式 UI”场景非常匹配

对于管理员 ERP 工具来说，很多页面并不需要复杂的前端工程化。Alpine.js 提供的响应式能力已经足够完成：

  • 数据绑定
  • 条件显示
  • 列表渲染
  • 点击事件
  • 选中状态
  • 简单计算属性

这让本地 HTML 模板可以保持非常低的维护成本。

本地资源与离线能力

所有前端资源都放在本地：

jsalpine.min.js
jsfox-bridge.js
cssstyle.css

这意味着整个管理端不依赖公网 CDN，不受网络波动影响，也更适合 ERP 内部环境部署。

对于传统管理软件来说，这是一个非常重要的优势：界面现代化了，但部署方式仍然保持本地、可控、稳定。

与 ERP 数据源结合

Foxtable 服务端的 HttpRequest.vb 已经提供了多组 ERP 数据接口，例如：

productboat
productaccessory
productlist
productstock
productbaseprice
productdealerprice
productdealerpricebatch
ordercreate
orderupdate
orderreview
orderpayment

这些接口让 Foxtable 可以作为 ERP 数据中间层，为前端 HTML 页面提供实时数据。

同时，WordPress 经销商系统中也已经注册了 ERP REST API：

AppsWebErpOrderApi::init();

用于处理结算站订单、付款、复核、发票等流程。

这样一来，系统整体形成了三端协作：

Foxtable ERP 客户端
↓
WebView2 管理界面
↓
WordPress 经销商/结算系统

Foxtable 仍然是 ERP 管理中心，而 WebView2 则变成了管理员操作界面的现代化承载层。

带来的提升

这次扩展极大提升了 Foxtable 的灵活度和应用范围。

以前 Foxtable 更像一个强大的表格和本地业务工具；现在，它可以进一步变成一个现代 ERP 工作台。

具体提升包括：

  • 可以构建更复杂的管理界面
  • 可以使用 HTML/CSS 快速迭代 UI
  • 可以复用前端组件和样式
  • 可以在本地离线加载页面
  • 可以承载图表、图片、发票、付款凭证等富内容
  • 可以把复杂交互从 VB 窗体中拆出来
  • 可以让 Foxtable 保持数据能力，同时获得现代前端体验

这不是简单的界面美化，而是能力边界的扩展。

当前需要继续完善的点

目前 Foxtable 向 HTML 注入数据已经比较成熟，但 HTML 向 Foxtable 回传数据还可以继续增强。

当前方案是页面把结果写入全局变量：

window._foxData = {
action: 'selection',
data: selected,
count: selected.length,
timestamp: new Date().toISOString()
}

后续更理想的方案，是在 DLL 中补充一个可以读取 JS 返回值的方法，例如：

ExecuteControlScriptResult

这样 Foxtable 端就可以直接读取：

selectedJson = web.ExecuteControlScriptResult("JSON.stringify(window._foxData)")

或者进一步接入 WebView2 原生的 chrome.webview.postMessage，让 HTML 可以主动向宿主发送消息。

这一步完成后，Foxtable 与 HTML 的双向通信会更加完整。

总结

这次扩展为 Foxtable 增加了一层现代 Web UI 能力。

Foxtable 继续负责它最擅长的事情：ERP 数据、业务逻辑、本地客户端能力。WebView2 则负责承载更灵活、更现代、更易维护的管理界面。

这种组合非常适合内部 ERP、订单管理、经销商管理、付款审核、发票预览、库存查询等场景。

它不是把 Foxtable 替换成网页，而是让 Foxtable 拥有网页级别的界面表达能力。

从应用范围上看，这次更新让 Foxtable 从传统数据管理工具，进一步扩展成了可以承载完整业务工作流的本地 Web 管理平台