WPS加载项系列(2)第二个WPS项目
上一章讲解了官方提供的第一个wps项目,这个项目主要用来了解nodejs使用以及wps能实现哪些功能,后续在项目开发中,相似功能的开发可以有个参考。下面将要讲解官网提供的第二个wps项目,这个项目可以选择原生的js及html代码,也可以选择集成看vue前端框架的代码。一、如何新建 WPS 加载项1、管理员权限(如果安装的是wps个人版,不需要管理员权限)启动命令行,通过npm全局安装wpsjs开发
上一章讲解了官方提供的第一个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加载项项目,快动手试试吧
更多推荐
所有评论(0)