WPS开发之第一个WPS加载项项目

任何一个新技术的学习使用,一般都由demo开始,然后逐步深入直到完全掌握,这个也不例外,所以这个系列的第一篇文章主要写的是如何将官方提供的demo跑起来。

在本教程中,将创建一个 WPS 加载项,该加载项将:.

  • 设计自定义功能区

  • 打开对话框

  • 创建自定义任务窗格

准备开发环境

  • 安装wps

  • 安装Node.js

  • 安装代码编辑器 Visual Studio Code

新建 WPS 加载项

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

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

WPS开发之第一个WPS加载项项目

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

WPS开发之第一个WPS加载项项目

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

WPS开发之第一个WPS加载项项目

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

WPS开发之第一个WPS加载项项目

WPS开发之第一个WPS加载项项目

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