[JavaScript知识库]WPS加载项系列（2）第二个WPS项目

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

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

一、如何新建 WPS 加载项

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

2、新建一个wps加载项，假设这个wps加载项取名为"HelloWps"
输入命令： wpsjs create HelloWps
通过上下方向键可以选择要创建的wps加载项的类型，如果选择“文字”，则创建的加载项会在wps文字程序中加载并运行，同理选择“电子表格”，则会在wps表格中运行，这里假设我们选择的是“文字”，按Enter健确定。

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

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

最后，可以用visual studio code打开示例代码，开始愉快的写代码了。
备注：wpsjs工具包为示例代码中有一个package.json文件，这是node工具标准的配置文件，其中有一个依赖包为wps-jsapi,这个依赖包是wps支持的全部接口的TypeScript描述，方便在vscode中敲代码时，提供代码联想功能，由于wps接口会跟随业务需求不断更新，因此当发现代码联想对于有些接口不支持时，通过 npm update --save-dev wps-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、通用工具类、第三方包、业务代码。

document.write("<script language='javascript' src='js/ribbon.js?time=" + time + "'></script>");
document.write("<script language='javascript' src='js/xxx/xxx.js?time=" + time + "'></script>");

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

三、如何和后台交互

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

1.ribbon.xml添加登陆按钮

<group label="系统" enabled="true">
    <menu id="setting" getImage="GetImage" label="系统设置" getEnabled="OnGetEnabled">
        <button id="xxxLogin" onAction="OnAction" getImage="GetImage" label="登录" />
    </menu>
</group>

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

function OnAction(control) {
    const eleId = control.Id
    switch (eleId) {
        case "xxxLogin":
            OnActionForxxxLogin();
            break;
        default:
            break;
    }
    return true;
}

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

function OnActionForxxxLogin() {
  if (!wps.WpsApplication().ActiveDocument) {
    return;
  }
  OnShowDialog("html/login.html", "登录", 450, 300, true);
}

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

<div class="form-group">
<input type="text" class="form-control" id="username" name="username" placeholder="用户名" value=""/>
<input type="password" class="form-control" id="password" name="password" placeholder="密码" value=""/>
</div>
<div class="form-group">
<button type="button" class="btn btn-primary" onclick="Login()">登录</button>
<button type="button" class="btn btn-cancel" onclick="Cancel()">取消</button>
</div>

5.前台html登陆逻辑

function Login(){
  var username = $("input[name='username']").val();
  var password = $("input[name='password']").val();
  var serverURL= wps.PluginStorage.getItem("serverURL");
  $.ajax({
    type: "POST",
    url: serverURL + "/login",
    data: {
      "username": username,
      "password": password
    },
    xhrFields: {
      withCredentials: true
    },
    success: function (res) {
      if (res.code == 0) {
        // 登录成功
        // todo something
      } else {
        alert(res.msg);
      }
    },
    error: function () {
      alert("请求后台失败，请联系管理员");
    }
  });
}

6.后台controller登陆逻辑

@CrossOrigin(allowCredentials = "true", allowedHeaders = "*")
@PostMapping("/login")
@ResponseBody
public Map userLogin(String username, String password){
    Map result = new HashMap();
    result.put("code", 100);
    result.put("msg", "登陆成功");
    return result;
}

总结：通过以上的介绍，可以快速搭建起一个属于你自己的wps加载项项目，快动手试试吧