上一章讲解了官方提供的第一个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加载项项目，快动手试试吧
————————————————
版权声明：本文为CSDN博主「无跬步不千里」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/kuibuzhiqianli/article/details/123976823
联系客服
