WPS加载项系列（2）第二个WPS项目

上一章讲解了官方提供的第一个wps项目，这个项目主要用来了解nodejs使用以及wps能实现哪些功能，后续在项目开发中，相似功能的开发可以有个参考。

下面将要讲解官网提供的第二个wps项目，这个项目可以选择原生的js及html代码，也可以选择集成看vue前端框架的代码。

一、如何新建WPS加载项

1、管理员权限(如果安装的是wps个人版，不需要管理员权限)启动命令行，通过npm全局安装wpsjs开发工具包

安装命令：npminstall-gwpsjs

更新命令：npmupdate-gwpsjs

2、新建一个wps加载项，假设这个wps加载项取名为"HelloWps"

输入命令：wpsjscreateHelloWps

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

3、选择示例代码的代码风格类型

4、开始调试并愉快的写代码

执行命令：wpsjsdebug

a.提供前端页的的热更新服务，wpsjs工具包检测到网页数据变化时，自动刷新页面。

最后，可以用visualstudiocode打开示例代码，开始愉快的写代码了。

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

二、如何在官网demo上创建自己的加载项项目

1.官网demo下载完成后，首先对项目文件夹进行重名名，比如重命名为OAProject，毕竟后续是要上生产环境，总不能还使用HelloWps吧

2.对项目结构进行调整，这里我创建了html、js、css、picture、配置、缓存六个文件夹，其中html、js、css存放的是业务代码。image存放的是图片，包括加载项图标。配置存放的是一些持久化配置文件。缓存存放的是一些缓存文件。ribbon.xml、index.html放在最外层，main.js、ribbon.js放在js文件夹中，js文件夹中还包括通用工具类文件夹、第三方包文件夹和业务文件夹，在main.js里面引入ribbon.js、通用工具类、第三方包、业务代码。

3.修改package.json中的版本号，用于打包部署使用

三、如何和后台交互

这里演示一个简单的登陆功能，进行账号登陆操作

1.ribbon.xml添加登陆按钮

2.在ribbon.js中加入id="xxxLogin"时点击触发的逻辑OnActionForxxxLogin()

functionOnAction(control){

consteleId=control.Id

switch(eleId){

case"xxxLogin":

OnActionForxxxLogin();

break;

default:

}

returntrue;

3.在js/业务文件夹中创建login.js，同时在main.js中引入login.js

functionOnActionForxxxLogin(){

if(!wps.WpsApplication().ActiveDocument){

return;

4.在html/业务文件夹中创建login.html