话说上文提到WPS表格使用JS开发宏后文件打开异常,想到身边的大神玩表格都是常规的复制粘贴,公式最多都是乘除加减,连个VLOOKUP都不会,开发出来的宏就怕他们一不小心动到代码就全部废了,而且做在宏里有个问题就是必须跟着文件走,还必须得是xlsm格式,但是这群大神都连xls和xlsx都分不清的人,怎么敢他们这么玩?

        玩过了VBA,玩过了wpsjs宏,想来又想去,搞个插件吧,官方文档都摆在那里,自己又刚好动一点点html、css、js,不大干一场心里总归是痒痒的,忍了好几天忍不住了,终于开始搭建开发环境闯进这个世界。

        话说为什么会忍了几天呢,因为一是js技术学得不到家,二是那官方开发文档简直就是隐晦得不行不像是指导新人入门的样子,看了两天那个文档基本都是不明所以,所以一直不想搞加载项。

        经过一个星期多的研究奋战,竟然成功了。看看那不知所谓的官方文档,所以想写一下心得,算是给刚踏入这个门槛的新人一个指导吧,有些说得不对的话也就只能仅供参考了,毕竟我自己都是个菜鸟。


正文

1. 开局:wpsjs工具包安装与使用

  这第一步参考官方教程即可,一步一步来,别怕有错,项目创建多了删掉就完事,大不了从头再来,俗话说胆大心细,而且通常不会遇到什么大问题,有问题多上网找找答案。

2. 额外信息

  下面的内容请对照着官方教程看,别看完了一傻二楞三不知。
2.1. 工具安装完之后,基本的步骤是建议先到想在的工程目录按住shift+鼠标右键打开cmd命令窗口或者powershell(powershell执行后续命令可能会报错,请自行上网查找权限不足的处理方法),然后就可以按如下步骤写命令了。
建议:UI框架菜鸟入门选“无”,学过VUE的可以选VUE,毕竟与时俱进嘛是不? 但是选“无” 可能会有报错,具体怎么处理待更新,或自行先上网找答案。

步骤(1) 新建项目

# 下面的demo改成自己想要的名字
wpsjs create demo

步骤(2) 启动

# 如果你是按照上述建议的在工程目录按住`shift+鼠标右键`来创建的目录,就可以执行下面的命令进入项目文件夹了,
#否则要写全路径例如D:/project/demo:
cd demo
# 然后才是启动:
wpsjs debug

步骤(3) 写代码
写代码之前呢,先去了解一下项目文件结构,否则估计很多新手第一行代码在哪些都不知道。
下面是我自己写的几个关键文件简要说明,仅供参考,写错了不负责!
别急着写代码,建议先去改改ribbon.xmlribbon.js,再启动wps去看看发生了什么变化,了解得差不多了再去撸代码。

  • public/ribbon.xml —— 菜单
  • src/components/ribbon.js —— 菜单各个功能的实现路径
  • src/components/XXX.vue —— 功能模块
  • src/components/js/XXX.js —— 功能实现方法
  • router/index.js —— 路由
  • %APPDATA%\Roaming\kingsoft\wps\jsaddons下有两个文件,涉及到发布后加载项能否显示

步骤(4) 发布
发布类型:

  • 在线插件:就是要部署在服务器,像用浏览器访问网站一样的意思,开发出来的插件部署在远端服务器,可以分享给别人使用,你服务器一关,大伙儿就都不能玩了。好比网游,你懂的。
  • 离线插件:就首次要部署在服务器里(好像不用服务器也行,这里我没尝试,懒……),浏览器访问后会安装到本地,后面就不需要服务器了,类似单机游戏下载安装就可以断网了。

    # cmd路径还是要在项目里,例如demo,然后执行发布命令:
    wpsjs publish

步骤(5) 安装使用
  去安装phpenv或者小皮面板都可以的,建个本地网站把插件包丢进去,访问安装就行了。这里懒得赘述,你都会敲js代码了还不会架设网站是有点丢人的,自己上网查查吧,教程多得是。

发表评论