需求:在wps自定义工具类,实现网页内嵌,使用自定义开发功能。
wps开放平台:https://open.wps.cn/previous/docs/client/wpsLoad
开始生成项目
- 安装wps
- 安装node.js
- 在VScode终端,npm安装:npm install -g wpsjs
- wpsjs版本更新:npm update -g wpsjs
- 安装完wpsjs后 -创建一个wps加载项:wpsjs create hellowps(项目名称)
- 选择类型:
文字 √
演示
电子表格
我们这里选择 ‘文字’
7. 下一步选择框架:无 or Vue or React
8. 安装完后进入hellowps目录并启动:wpsjs debug
备注:(低版本的node可能会启动失败,wps安装的目录有中文可能会启的失败)
9. 项目启动完成后 会自动打开wps文稿
-
可以看到目录下有:public > ribbon.xml 文件就是所谓的菜单,可以自定义,因开放平台给出的自定义 UI是,
CustomUI 标准进行配置 ,
备注:(有些UI不好使(ㄒoㄒ)) -
目录 src > components > js > ribbon.js 是菜单功能区,各种事件在这里,可以根据API自行开发,有个槽点,
打开本地文件,或者图片,要存放在public下,例如图片引入就是,(image/xxx.png),
文件打包后存放的目录绝对路径(C:\Users\Administrator\AppData\Roaming\kingsoft\wps\jsaddons\HelloWps_1.0.0\word\" + item.wordUrl)
别问我为什么这样写,因为找不到更好的办法了(。。。) -
接下来就是打包了 :
wpsjs publish 会生成一个文件,wps-addon-publish
wpsjs build 会生成一个文件,wps-addon-build
我这里是离线的所以:打包输入的服务器地址可以随便填写
把wps-addon-build 解压到:\Users\Administrator\AppData\Roaming\kingsoft\wps\jsaddons 文件下后
打开wps-addon-publish 打开publish.html网页接受信任并启动你的这个工具类,
重新打开wps就可以看到你的自定义功能了。
(纯文字版 后续在补充!!!!)