WPS office根目录在哪?_WPS加载项深入开发代码解析-2

这个系列的上一篇是一个不短的视频，是我们财应同学的出镜，这一篇我找个比较典型的场景从代码层面讲讲怎么利用ribbon控制WPS加载项和WPS自身功能。

ribbon是什么

Ribbon是一种以面板及标签页为架构的用户界面，原先出现在Microsoft Office 2007后续版本的Word、Excel和PowerPoint等组件中，后来也被运用到Windows 7的一些附加组件等其它软件中，如画图和写字板，以及Windows 8中的资源管理器。（这段儿摘自维基百科）

WPS利用ribbon做的是界面的定义，就是「标签选项卡」的这种界面。WPS加载项作为可以对WPS界面做自定义的一种扩展开发方式，也遵循ribbon的规范。以通过wpsjs创建的一个纯净的Demo为例，在Demo的根目录下有三个文件，作用如下说明：

index.html：入口文件，WPS启动后加载WPS加载项，就以这个文件为入口
main.js：index.html包含的，负责核心js的加载，开发者可以自主添加其他js文件
ribbon.xml：自定义功能区定义文件，遵循ribbon的CustomUI规范。

在ribbon.xml中，有几个常用的控件，之下用代码做个说明：

<customUI

tabs：这里控制的就是WPS界面里的功能区，如下图：

这里面常用的OA菜单开启显隐处理，用的就是getVisible这个方法， insertBeforeMso表示要在WPS自身某个tab之前显示，insertAfterMso表示在某个WPS自身tab之后显示，当前设置就是将「OA辅助」做了显示在「开始」之前。
那些用idMso控制的tab，就是WPS自身的tab，可以控制显隐。

commands：这里控制的是WPS的自身定义的命令，例如「新建」、「保存」这样的命令，给出的也是常用的命令的idMso，可以支持控制是否可用getEnabled和做功能重定义onAction。
contextMenus：这是可以定义一个右键菜单。

Web对话框和任务窗格

这两个就是WPS特有的两个WPS加载项提供的UI扩展方案，原理就是利用WPS内部自带的浏览器（CEF）来显示指定的网页。这里有个特性，就是WPS会在网页渲染是动态的在DOM树的window节点下注入wps这个对象，这样不论什么网页，只要是在WPS内部打开，在这个网页上都可以直接调用WPS的jsapi。

还是以wpsjs创建的Demo为例，在ui这个文件夹下：

dialog.html就是Web对话框，taskpane.html就是任务窗格，本质上他们没有区别，只不过在WPS内部显示的时候根据使用场景不同而已。

Web对话框

这就是Demo中Web对话框的效果。这个网页可以是WPS加载项自身工程中的。

任务窗格

这个任务窗格就是直接加载的一个非WPS加载项工程内的网页，直接指向一个网络可达的URL即可。

这个网页的window节点下就会注入wps这个对象，可以直接使用。

大家可以留言讲讲常用的UI控制场景，也希望这篇可以给大家对于利用WPS加载项做UI界面定义做个导引。

开源Demo获取地址
强烈建议大家安装wpsjs这个工具做开发：npm i -g wpsjs