如何开发一个 WPS 加载项

WPS 加载项是一套基于 Web 技术用来扩展 WPS 应用程序的解决方案。每个 WPS 加载项都对应打开了一个网页，并通过调用网页中 JavaScript 方法来完成其功能逻辑。 WPS 加载项打开的网页可以直接与 WPS 应用程序进行交互，同时一个 WPS 加载项中的多个网页形成了一个整体，相互之间可以进行数据共享。开发者不必关注浏览器兼容的问题，因为 WPS 加载项的底层是以 Chromium 开源浏览器项目为基础进行的优化扩展。 WPS 加载项具备快速开发、轻量化、跨平台的特性，目前已针对Windows/Linux操作系统进行适配。 WPS 加载项功能特点如下:

完整的功能。可通过多种不同的方法对文档、电子表格和演示文稿进行创作、格式设置和操控；通过鼠标、键盘执行的操作几乎都能通过WPS 加载项完成；可以轻松地执行重复任务，实现自动化。
三种交互方式。自定义功能区，采用公开的CustomUI标准，快速组织所有功能；任务窗格，展示网页，内容更丰富；Web 对话框，结合事件监听，实现自由交互。
标准化集成。不影响 JavaScript 语言特性，网页运行效果和在浏览器中完全一致；WPS 加载项开发文档完整，接口设计符合 JavaScript 语法规范，避免不必要的学习成本，缩短开发周期。

在本教程中，将创建一个 WPS 加载项，该加载项将：

设计自定义功能区
打开对话框
创建自定义任务窗格

准备开发环境

安装wps
安装Node.js
安装代码编辑器 Visual Studio Code

新建 WPS 加载项

1、管理员权限(如果安装的是wps个人版，不需要管理员权限)启动命令行，通过npm全局安装wpsjs开发工具包:
安装命令： npm install -g wpsjs, 如果之前已经安装了，可以检查下wpsjs版本，更新wpsjs的命令为:npm update -g wpsjs

2、新建一个wps加载项，假设这个wps加载项取名为"HelloWps"。
输入命令： wpsjs create HelloWps, 会出现如下图的几个选项:

通过上下方向键可以选择要创建的wps加载项的类型，如果选择“文字”，则创建的加载项会在wps文字程序中加载并运行，
同理选择“电子表格”，则会在wps表格中运行，这里假设我们选择的是“文字”，按Enter健确定。

3、选择示例代码的代码风格类型
wpsjs工具包提供了两种不同代码风格的示例，“无”代表示例代码中都是原生的js及html代码，没有集成vue\react等流行的前端框架。
"Vue"代表生成的示例代码集成了Vue相关的脚手架，在实际的项目中选用Vue基于示例代码可能更适合做工程化的开发，感兴趣的同学可以两种都尝试一下。
这里我们选择“无”，按Enter健确认。
确认后wpsjs工具包会在当前目录下生成一个HelloWps的文件夹，我们进入到此文件夹，可以看到HelloWps的相关代码已经生成：

4、开始调试并愉快的写代码
        执行命令： wpsjs debug
        执行此命令后即可开始调试，wpsjs工具包会自动启动wps并加载HelloWps这个加载项，同时wpsjs工具包启了一个http服务,此服务主要提供两方面的能力:
        a.提供前端页的的热更新服务，wpsjs工具包检测到网页数据变化时，自动刷新页面。
        b.提供wps加载项的在线服务，wpsjs生成的代码示例是一个在线模式，wps客户端程序实际上是通过http服务来请求在线的wps加载项相关代码和资源的。
最后，可以用visual studio code打开示例代码，开始愉快的写代码了。

备注：wpsjs工具包为示例代码中有一个package.json文件，这是node工具标准的配置文件，其中有一个依赖包为wps-jsapi,
这个依赖包是wps支持的全部接口的TypeScript描述，方便在vscode中敲代码时，提供代码联想功能，由于wps接口会跟随业务
需求不断更新，因此当发现代码联想对于有些接口不支持时，通过 npm update --save-dev wps-jsapi命令定期更新这个包。

以上展示了如何开始一个wps加载项的制作，在实际用况中，如果需要让企业的业务系统与wps加载项进行集成，可以参考以下示例:
OA助手示例

如何开发一个 WPS 加载项相关推荐

wps加载项初步开发
技术选型应公司要求,在不连外网情况下,需要完成服务器文档的预览.编辑.上传等功能.于是选用了wps客户端的加载项开发. 参考资料: wps客户端开发文档 wps客户端开发文档 wps加载项demo地 ...
WPS加载项系列（2）第二个WPS项目
上一章讲解了官方提供的第一个wps项目,这个项目主要用来了解nodejs使用以及wps能实现哪些功能,后续在项目开发中,相似功能的开发可以有个参考. 下面将要讲解官网提供的第二个wps项目,这个项目可 ...
WPS 加载项开发说明
WPS 加载项结构 WPS 加载项由自定义功能区和网页两部分组成.自定义功能区只需要一个配置文件,对应 WPS 加载项目录中的ribbon.xml文件: 网页部分负责执行自定义功能区对应的逻辑功能. ...
wps加载项开发和使用
这里写自定义目录标题 wps加载项的使用准备环境生成一个加载项的demo wps加载项的使用准备环境 1.安装wps企业版(个人版可能出问题) 2.安装node 环境 3.详细情况可查看官方开发 ...
WPS加载项系列（1）第一个WPS项目
前言任何一个新技术的学习使用,一般都由demo开始,然后逐步深入直到完全掌握,这个也不例外,所以这个系列的第一篇文章主要写的是如何将官方提供的demo跑起来. 一.项目地址官方提供的演示示例(OA ...
wps多人协作的意义_怎么能快速体验WPS加载项
相信大家看过了前三篇专栏文章后,一定对与WPS的各类集成对接模式产生了想试一试的想法,那咱们就实操一下,先从WPS加载项的对接开始吧. 目前获取WPS加载项的资料一共有五个途径: 提供一个外网体验环境 ...
前端|npm全局创建wps加载项
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 问题描述基于vscode的方式创建wps加载项在获取类型之后 ...
WPS加载项系列（3）WPS项目部署
一.部署方式 wps加载项目有两种部署模式,publish模式和jsplugins.xml模式,可以参考实际情况自己选择部署模式. 二.publish模式 1. 原理通过访问 publish自动安装 ...
WPS加载项是如何实现调用业务系统JS的 WPS通信原理
WPS加载项是如何实现调用业务系统JS的 WPS通信原理 wpssdk 一.业务系统调用WPS原理二.WPS调用业务系统JS的原理 End 写在前面:JSAPI金山办公官方群 756432763 欢 ...

如何开发一个 WPS 加载项

如何开发一个 WPS 加载项相关推荐

最新文章

热门文章