专栏首页算法与编程之美前端|对wps加载项的探究

前端|对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)。

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:冯博

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-03-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端|npm全局创建wps加载项

    基于vscode的方式创建wps加载项在获取类型之后,无法自动生成wps加载项,在网上查询相关问题内容也无果。不过Wps官方文档又更新了通过npm全局的方式创建...

    算法与编程之美
  • 答粉丝问|用python计算时间间隔

    如图1.1中关于如何用python去计算两个时间(年月日)相隔多少天,简单了解一下接下来的几种解法。

    算法与编程之美
  • 人工智能|大数据时代的信息获取

    人们最初,信息获取的方式单一,但是获取信息的准确性更加的高。互联网时代,亦是大数据时代。新时代的数据有以下几点基本特征,数据量大、类型繁多、价值密度低、速度快、...

    算法与编程之美
  • 移动端下拉刷新、上拉加载更多 Jquery插件 dropload

    a javascript implementation of pull to refresh and up to loadmore 移动端下拉刷新、上拉加...

    王念博客
  • 等级保护主机安全:CentOS入侵防范(一)

    本篇文章主要想说一说我对入侵防范中前3个测评项的理解(对于centos系统而言),如果大家有其他的看法或者思路也可以在回复中提出,我也跟着学习学习。

    FB客服
  • TCP关闭问题

    alexqdjay
  • hibernate延迟加载详解

    hibernate延迟加载详解 Hibernae 的延迟加载是一个非常常用的技术,实体的集合属性默认会被延迟加载,实体所关联的实体默认也会被延迟加载。hiber...

    奋斗蒙
  • TCP协议的连接和释放

    TCP传输控制协议,是一个面向连接的协议。在运用此协议进行数据传输前都会进行连接的建立工作(三次握手);当数据传输完毕,连接的双方都会通知对方要释放此连接(四次...

    JouyPub
  • 基于 HTML5 的 WebGL 楼宇自控 3D 可视化监控 顶

    智慧楼宇和人们的生活息息相关,楼宇智能化程度的提高,会极大程度的改善人们的生活品质,在当前工业互联网大背景下受到很大关注。目前智慧楼宇可视化监控的主要优点包括:

    HT_hightopo
  • 基于 HTML5 的 WebGL 楼宇自控 3D 可视化监控

    智慧楼宇和人们的生活息息相关,楼宇智能化程度的提高,会极大程度的改善人们的生活品质,在当前工业互联网大背景下受到很大关注。目前智慧楼宇可视化监控的主要优点包括:

    HT for Web

扫码关注云+社区

领取腾讯云代金券