WPS二次开发之加载项(一)

语言: CN / TW / HK

官方对WPS加载项的解释:

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

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

 想真正知道这所谓的“加载项”到底是是个啥,纸上谈兵不如实践一遍,跟着下面步骤来一发。首先得电脑需要安装wps(废话)、Node.js。

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

建议使用淘宝镜像:npm config set registry http://registry.npm.taobao.org

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

3、这里我们选择“电子表格”后,会让你选择前端框架:

 

4、如果你熟悉vue,选择“Vue”以后,wpsjs会在当前目录创建如下的工程结构 

 
5、 执行调试命令:  wpsjs debug
该命令会自动修改oem.ini配置,并在本地生成jsplugins.xml文件,命令执行后会自动启动wps并加载HelloWps这个加载项 ,同时wpsjs工具包启了一个http服务,此服务主要提供两方面的能力:
  • 提供前端页的的热更新服务,wpsjs工具包检测到网页数据变化时,自动刷新页面。
  • 提供wps加载项的在线服务,wpsjs生成的代码示例是一个在线模式,wps客户端程序实际上是通过http服务来请求在线的wps加载项相关代码和资源的。

6、在wps打开新标签页,选择新建空白电子表格,如果出现如下的“wps加载项实例”则表示加载项安装成功了。

 
至此,wps加载项代码可以开始编写运行。但是正式使用的时候,我们需要把加载项发布到生产环境
目前wps提供两种部署方式:jsplugins.xml模式和publish.xml模式。
  • publish模式是通过wpsjs工具包的wpsjs publish命令打包,将生成的文件夹下的所有文件部署到打包时填写服务器地址去。告知用户publish.html地址,业务系统开发商可将publish.html的功能按需整合到自己的页面中,便于做基础环境监测。也可以复用此页面给到用户,用户可自己控制启用和禁用哪些加载项。
  • jsplugins.xml模式是通过设置oem.ini配置文件的JSPluginsServer的值为加载项管理文件jsplugins.xml来控制加载项的加载(相当于WPS加载项列表文件),二次打包时,业务开发商需要告知我们JSPluginsServer的配置地址,将其配置到oem.ini文件中,业务开发商再做安装包分发。后续的加载项的控制用,业务开发商可以自由的更改jsplugins.xml文件,实现加载项的新增,修改。

publish模式:

1、执行发布命令: wpsjs publish
2、输入你打算部署wps加载项的服务器地址,本例是  http://localhost/wps-host/ ,注意必须要有结尾的斜杠
3、按照提示,把 wps-addon-build 目录下的文件部署到服务器目录。 我本地配置了nginx代理,服务器目录是  D:/static_folder/wps-addon-build/ ,可通过  http://localhost/wps-host/  访问打包出来的文件。
如果部署地址下的ribbon.xml(   http://localhost/wps-host/ribbon.xml)可以正常访问,说明代码部署成功了。
nginx关键配置如下
如果想学习 nginx可参考另一篇博文: 如何优雅地在Windows上使用Nginx
4、按照提示把 publish.html 也 部署到服务器上,通过访问服务器上的publish.html  实现加载项的加载和卸载操作。当存在多个加载项时,在每一个加载项项目下都执行一次 wpsjs publish ,并且将每个加载项单独部署即可。本例的地址是: http://localhost/wps-host/publish.html
5、浏览器打开publish.html 的线上地址,点击“安装”,等页面按钮变成“卸载”,状态显示“正常”,则表示加载项安装成功,如图:
6、这时候重启wps,打开一个空白电子表格,如果出现debug时的“wps加载项实例”则表示加载项在线安装生效了
7、如果以上步骤都没问题,但是就是没出现“wps加载项实例”,可以试着把 wps安装目录/office6/cfgs/oem.ini文件的 JsApiPlugin=true改为 JsApiPlugin=false  。
 

jsplugins.xml模式

1、执行生产环境打包命令: wpsjs build
2、离线和在线的方式各有优缺点:
在线插件——
  • 优点:加载比较平滑,用户首次加载或版本更新后的用户初次访问时间会比离线模式高,且每次都是使用最新的代码
  • 缺点:每次执行时,都是去请求服务器上的资源,比较浪费网络资源,并且网络不好时,不能访问。
  • 总结:在线模式适合在资源频繁改动,且网络稳定的情况下使用
离线插件——
  • 优点:只要name_version等于加载项文件夹的名字,加载项就不会去更新加载项的包,采用本地的加载项包资源,大大的节省网络资源和用户的时间。
  • 缺点:初次加载或版本变更时,都会先去下载整个加载项包,并解压,会比较耗费时间
  • 总结:离线模式适合资源改动不频繁的情况
我这里选择在线插件
 
3、按照提示,将目录wps-addon-build下的文件署到服务器,然后将加载项的地址配置到原有的jsplugins.xml文件中,如果没有,新建一个jsplugins.xml文件,将加载项的地址配置到该文件。将oem.ini文件中的JSPluginsServer的值写成jsplugins.xml文件的部署地址。