WPS 幻灯片插件开发教学系列（Open Source）

一套「由浅入深」的 WPS 演示（WPS PPT）插件开发开源工程，配套教学视频逐集讲解。五个示例从纯形状 API 一路做到网页/画布/摄像头/WebGL 实时元素，每一集都独立成目录、可单独安装运行。

环境基线：Windows + WPS Office（个人版 2021 之后 / 专业版），无需编译工具链。首次使用请先读 INSTALL.md。

视频/示例总览

序号	目录	一句话	学习要点
01	01_basic_shape	插件创建一个矩形色块，颜色/透明度可调	工程骨架、功能区、任务窗格、`Shapes.AddShape` 与 `Fill` 填充
02	02_canvas_draw	幻灯片里的实时画布元素：任意绘制，换色/粗细/橡皮，可保存 PNG	`AddWebShapeEx` 网页形状、HTML5 Canvas、事件与保存
03	03_camera_element	摄像头画面作为幻灯片元素显示，可设名称/宽高/重启	`getUserMedia`、元素属性（Name/几何）与“重启=重建”思想
04	04_webgl_3d	基于 WebGL 的 3D 元素：旋转立方体 + 三维曲线动画	WebGL 基础管线、顶点缓冲、MVP 矩阵、rAF 动画
05	05_web_content	把任意网页作为元素插入幻灯片，可交互、可调透明度	综合示例：远端/本地网页、尺寸预设、透明探测、异常处理

建议观看/学习顺序就是 01 → 05。01、02 的 addin 目录结构完全一致，后面的示例都在同一套骨架上做加法。

快速开始（30 秒版）

# 1) 安装 Node（可选）后，给示例元素页起本地服务（02/03/04/05 需要）
node tools/serve.js 8011 .powershell
# 1) 安装 Node（可选）后，给示例元素页起本地服务（02/03/04/05 需要）
node tools/serve.js 8011 .\02_canvas_draw\element

# 2) 把某个示例安装进 WPS（会合并注册并复制到 jsaddons）
.\tools\install.ps1 -Demo 01_basic_shape
#   02 → -Demo 02_canvas_draw；03 → 03_camera_element；04 → 04_webgl_3d；05 → 05_web_content

# 3) 完全重启 WPS，打开任意 .pptx，点击功能区出现的示例标签即可
2_canvas_draw\element

# 2) 把某个示例安装进 WPS（会合并注册并复制到 jsaddons）
.\tools\install.ps1 -Demo 01_basic_shape
#   02 → -Demo 02_canvas_draw；03 → 03_camera_element；04 → 04_webgl_3d；05 → 05_web_content

# 3) 完全重启 WPS，打开任意 .pptx，点击功能区出现的示例标签即可

详细步骤见 INSTALL.md。

仓库结构

ppt_plugin_tutorials/
├── INSTALL.md                    # 从零安装：软件下载 + 装进 WPS（必读）
├── tools/
│   ├── install.ps1               # 一键安装某个示例到 WPS
│   └── serve.js                  # 本地静态服务器（网页类元素页使用）
├── 01_basic_shape/
│   ├── README.md
│   └── addin/                    # WPS 插件包：publish.xml + BASIC_RECT_1.0/
├── 02_canvas_draw/
│   ├── README.md
│   ├── addin/CANVAS_DRAW_1.0/    # 插件（任务窗格：插入画布元素）
│   └── element/canvas.html       # 画布元素本体（在幻灯片里运行）
├── 03_camera_element/
│   ├── README.md
│   ├── addin/CAMERA_ELM_1.0/
│   └── element/camera.html       # 摄像头元素本体
├── 04_webgl_3d/
│   ├── README.md
│   ├── addin/WEBGL_3D_1.0/
│   └── element/3d.html           # WebGL 3D 元素本体
└── 05_web_content/
    ├── README.md
    ├── addin/WEB_CONTENT_1.0/    # 综合示例（迁移自 wps_html 工程）
    └── element/dashboard.html    # 可交互示例网页

每个 addin 内的插件包结构完全一致，是所有案例的统一骨架： ribbon.xml（功能区） + js/main.js（按钮回调，打开任务窗格） + index_TaskPane.html（任务窗格 UI） + js/core.js（与宿主无关的核心逻辑） + js/host.js（宿主探测） + js/taskpane.js（窗格交互）。

两个基础概念（贯穿全系列）

插件壳 vs 元素内容：插件（任务窗格）负责“在哪页、多大、插入什么”，元素内容（element/*.html）负责“长什么样、怎么交互”。02~04 演示的都是同一模式：把自建网页作为元素插进幻灯片。
WPS 网页形状：较新版本 WPS 提供 Shapes.AddWebShapeEx(url) / AddWebShape(url)，用自带内核渲染页面，放映时可交互。它是 02~05 的载体；01 则演示更传统的 AddShape 自选图形。

许可

MIT，可自由用于教学/商业（见 LICENSE）。