前端|对wps加载项的探究

1 wps加载项介绍

WPS 加载项是一套基于 Web 技术用来扩展 WPS 应用程序的解决方案。每个 WPS 加载项都对应打开了一个网页，并通过调用网页中 JavaScript 方法来完成其功能逻辑。WPS 加载项打开的网页可以直接与 WPS 应用程序进行交互，同时一个 WPS 加载项中的多个网页形成了一个整体， 相互之间可以进行数据共享。开发者不必关注浏览器兼容的问题，因为 WPS 加载项的底层是以 Chromium 开源浏览器项目为基础进行的优化扩展。

2 wps加载项功能特点

1.完整的功能。可通过多种不同的方法对文档、电子表格和演示文稿进行创作、格式设置和操控；通过鼠标、键盘执行的操作几乎都能通过WPS 加载项 完成；可以轻松地执行重复任务，实现自动化；

2.三种交互方式。自定义功能区，采用公开的CustomUI标准，快速组织所有功能；任务窗格，展示网页，内容更丰富；Web 对话框，结合事件监听，实现自由交互。

3.标准化集成。不影响 JavaScript 语言特性，网页运行效果和在浏览器中完全一致；WPS 加载项开发文档完整，接口设计符合 JavaScript 语法规范，避免不必要的学习成本，缩短开发周期。

3 如何生成一个wps加载项

wps的集成方式有四种：Visual Studio Code创建集成，浏览器应用集成，c++应用集成，java应用集成。这里主要讲利用代码编辑器Visual Studio Code生成wps加载项。

3.1 准备开发环境

（1）安装node.js

（2）安装wps office和代码编辑器Visual Studio Code

（3）打开 Visual Studio Code 扩展搜索"WPS 加载项"，点击安装。

3.2 新建wps加载项

打开Visual Studio Code命令窗口（ctrl+shift+p），执行init wps

图 3.2.1 加载项

按照提示输入插件名JsDemo

图 3.2.2 输入插件名

按照提示选择wps加载项类型

图 3.2.3 选择wps加载项类型

按照提示指定wps加载项的版本号，加载项就创建完成了。

图 3.2.4 指定wps加载项的版本号

然后打开命令窗口，输入get wps types

图 3.2.5 打开命令窗口

运行插件。打开Visual Studio Code终端（ctrl+shift+`），执行 npm install 安装前端开发所需插件；执行npm run dev后自动启动了 WPS 程序。

图 3.2.6 运行插件

在 WPS 程序中新建空白文档，查看刚刚新建的 WPS 加载项。

图 3.2.7 新建空白文档

4 wps加载项结构及启动分析

4.1 wps加载项结构

WPS 加载项由自定义功能区和网页两部分组成。自定义功能区只需要一个配置文件，对应 WPS 加载项目录中的ribbon.xml文件；网页部分负责执行自定义功能区对应的逻辑功能。因为不需要显示网页，所以省略了 HTML 文件，并用main.js来引入所有的外部 JavaScript 文件；在这些 JavaScript 文件中通常包含了一系列用 JavaScript 实现的函数，这些函数与自定义功能区的功能一一对应，我们称之为接口函数。

4.2 wps加载项启动流程

WPS 加载项启动时，首先在 WPS 加载项对应文件夹中自动创建index.html网页并打开，index.html从当前路径引入main.js，从而能够在接下来的过程中执行接口函数。当网页打开成功之后，开始解析ribbon.xml生成自定义功能区，解析过程中会调用若干次接口函数，最终完成加载（注意，开发者应当避免在该目录下创建index.html）。