WPS插件开发技能

本技能帮助你开发WPS Office的JavaScript插件(加载项/Addin)。

适用场景

开发WPS文字(WPS Writer)的扩展功能
开发WPS表格(WPS ET)的扩展功能
开发WPS演示(WPS Presentation)的扩展功能
需要在WPS中自定义功能按钮、菜单、任务窗格

WPS插件开发概述

WPS加载项是一套基于Web技术用来扩展WPS应用程序的解决方案。每个WPS加载项都对应打开了一个网页，并通过调用网页中的JavaScript代码与WPS进行交互。

开发环境准备

1. 安装Node.js

需要Node.js v14或更高版本
下载地址: https://nodejs.org/

2. 安装WPS客户端

安装WPS Office客户端(专业版或个人版均可)
必须是Windows客户端

3. 安装wpsjs脚手架

npm install -g wpsjs

创建新项目

方式一: 使用wpsjs create命令(推荐)

wpsjs create HelloWps

这会创建一个完整的项目结构，包含:

manifest.json - 插件配置文件
entry.js - 入口JavaScript文件
index.html - 主页HTML文件

方式二: 手动创建项目结构

my-wps-addin/
├── manifest.json    # 插件配置文件(必需)
├── entry.js         # 入口JavaScript文件
├── index.html       # 主页HTML文件
└── images/          # 图标文件夹

manifest.json配置文件

插件的核心配置文件，描述插件的基本信息:

{
  "pluginName": {
    "name": "我的WPS插件",
    "version": "1.0.0",
    "identifier": "com.example.mywpsplugin",
    "description": "插件描述"
  },
  "permissions": [
    "xxxxxxxxxxxxxx"
  ],
  "entry": "index.html",
  "platform": ["win32"],
  "product": {
    "wps": {
      "index.html": {
        "label": "我的插件"
      }
    }
  },
  "icons": {
    "48": "images/icon48.png"
  }
}

重要字段说明:

name: 插件名称
version: 插件版本号
identifier: 插件唯一标识符
entry: 入口HTML文件
platform: 支持的平台(win32)
product: 支持的产品(wps/wpp/et)

插件类型

1. WPS文字 (WPS Writer)

"product": {
  "wps": {
    "index.html": {
      "label": "插件名称"
    }
  }
}

2. WPS表格 (WPS ET)

"product": {
  "et": {
    "index.html": {
      "label": "插件名称"
    }
  }
}

3. WPS演示 (WPS Presentation)

"product": {
  "wpp": {
    "index.html": {
      "label": "插件名称"
    }
  }
}

JavaScript API

获取WPS应用对象

// 在entry.js中
var wps = wpsMain.app;

常用API

1. 创建任务窗格

var taskpane = wps.TaskPanes.Add({
    title: "我的插件",
    html: "index.html"
});
taskpane.Visible = true;

2. 插入文本(WPS文字)

var doc = wps.ActiveDocument;
doc.Content.Text = "Hello WPS!";

3. 操作选区

var selection = wps.Selection;
selection.Text = "选中的文字";

4. 创建按钮/菜单

wps.CommandBars.Add("MyToolbar");
var btn = wps.CommandBars("MyToolbar").Controls.Add({
    Type: 1, // 按钮
    Caption: "点击我",
    OnAction: "buttonClick"
});

5. 添加自定义函数(WPS表格)

// manifest.json中配置
"customFunctions": {
  "script": "customFunctions.js",
  "entry": "Register"
}

// customFunctions.js中
function Register(config) {
    config.define({
        name: "MYFUNCTION",
        description: "我的自定义函数",
        parameters: ["number"],
        returns: "number"
    });
}

function MYFUNCTION(x) {
    return x * 2;
}

调试插件

1. 开发模式调试

在项目目录下运行:

wpsjs debug

这会启动调试服务器并在WPS中加载插件进行调试。

2. 查看调试信息

使用浏览器访问:

http://localhost:8888/index.html

打包发布

1. 使用wpsjs打包

wpsjs build

这会生成一个.wps后缀的插件包文件。

2. 手动打包

将以下文件打包成ZIP:

manifest.json
index.html
entry.js
其他资源文件

然后将ZIP重命名为.wps格式。

安装插件

方式一: 开发调试安装

打开WPS客户端
开发者工具 -> 加载项 -> 添加加载项
选择开发目录或.wps文件

方式二: 正式安装

双击.wps文件
按照提示完成安装

官方资源

WPS开放平台: https://open.wps.cn/
WPS JS API文档: https://qn.cache.wpscdn.cn/encs/doc/office_v11/index.htm
npm包: https://www.npmjs.com/package/wpsjs

注意事项

manifest.json必须是UTF-8编码
图标建议使用PNG格式
调试时需要关闭杀毒软件或添加信任
不同版本的WPS API可能略有差异
在线模式和离线模式的配置有所不同

快速开始示例

全局安装wpsjs:

npm install -g wpsjs

创建新项目:

wpsjs create MyFirstPlugin
cd MyFirstPlugin

启动调试:

wpsjs debug

修改代码后刷新即可看到效果