WebDash 使用教程

2025-04-21 13:39:49作者：邓越浪Henry

1. 项目介绍

WebDash 是一个基于 WebAssembly 技术的 Plotly Dash 分布版本，它可以在浏览器中运行。WebDash 通过 Emscripten 将 Python 科学计算栈（包括 Plotly Dash、Flask 及其依赖）编译成 WebAssembly，并由 pyodide 进行打包。在浏览器端，WebDash 负责拦截发送到 Dash 的请求，并将它们路由到虚拟的 Flask 服务器。这使得整个发行版可以作为一个静态网站来服务，极大地提高了可扩展性。

2. 项目快速启动

首先，确保你的开发环境已经安装了必要的依赖。以下是快速启动 WebDash 的步骤：

# 克隆项目
git clone https://github.com/ibdafna/webdash.git

# 进入项目目录
cd webdash

# 安装依赖
npm install

# 运行开发服务器
npm run start

在浏览器中访问 http://localhost:3000，你将看到 WebDash 的示例应用。

3. 应用案例和最佳实践

3.1 创建一个简单的 Dash 应用

在 src/dash_apps 目录下创建一个新的 TypeScript 文件（例如 my_app.ts），并在文件中定义你的 Dash 应用：

// my_app.ts
const app = new dash.Dash(__filename);
app.layout = html.Div([
  html.H1("我的 Dash 应用"),
  dcc.Graph(
    figure={
      "data": [
        {"x": [1, 2, 3], "y": [1, 4, 9], "type": "line"}
      ]
    }
  )
]);
window.dashApp = app;

确保在 index.html 中引用你的 TypeScript 文件：

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <!-- 其他头部信息 -->
</head>
<body>
  <!-- 应用挂载点 -->
  <div id="root"></div>
  <!-- 引入你的 Dash 应用 -->
  <script src="src/dash_apps/my_app.ts"></script>
  <!-- 引入 WebDash -->
  <script src="path_to_webdash.js"></script>
</body>
</html>