WPS加载项开发和离线加载项本地安装方法、在线部署

WPS加载项本质就是一个网页，每个加载项对应打开一个网页，因此需要有js、node.js基础知识和大概了解Application对象模型。另外WPS加载项支持Vue、React框架开发项目。

在线 / 离线加载项都不需要用户安装nodejs环境

服务器（没续费，地址失效了）部署：https://serve-huaermeier.inscode.cc/wps/addon

离线加载项安装包：https://download.csdn.net/download/huaermeier/88283547

新版本BUG了，无法使用加载项，去官网下载老版本过渡一下

效果演示

目录

一、准备环境

                1.1、测试npm包管理是否正常显示版本号

                1.2、安装wpsjs开发工具包

二、项目开发

                2.1、创建Excel加载项

                2.2、JS调试器

                2.3、加载项名称、类型和版本号

                2.4、customUI自定义功能区

                2.5、离线加载项网络请求

三、加载项离线安装和在线部署

        安装离线加载项

                3.1、打包离线加载项

                3.2、编辑publish.html

                3.3、安装加载项

        服务器部署 / publish模式

                4.1、打包在线加载项

                4.2、Express框架搭建服务器

                4.3、上传文件到serve项目

                4.4、更改加载项服务器地址

---

一、准备环境

软件安装非常简单，官网下载安装包，默认下一步/一键安装即可

安装WPS	尽量用新版本
安装node.js	推荐v16版本 win7最高支持v12版本
安装Visual Studio Code代码编辑器	win7最高支持v1.7版本

1.1、测试npm包管理是否正常显示版本号

1.打开cmd输入命令测试版本号

npm -v

2.首次安装nodejs，npm默认国外镜像，包下载较慢时，可切换到国内镜像

//下载速度较慢时可切换国内镜像
npm config set registry https://registry.npmmirror.com

//国内镜像不可用时，恢复官方镜像
npm config set registry https://registry.npmjs.org

1.2、安装wpsjs开发工具包

        全局安装命令：npm install -g wpsjs

        以前安装过可以用更新命令：npm update -g wpsjs

        显示帮助信息命令：wpsjs -h

---

二、项目开发

2.1、创建Excel加载项

1.在桌面目录下创建一个名称为wpsai的加载项实例

wpsjs create wpsai

2.提示选择加载项类型，利用方向键选择电子表格，UI框架选择无

        cd wpsai 命令进入加载项目录

        wpsjs debug 命令启动加载项进行调式，按下Ctrl + C可停止调式

提示：Vue框架调试项目可能会因为openssl报错导致无法启动

//解决方法1：在终端或cmd输入
//Linux & Mac OS：
export NODE_OPTIONS=--openssl-legacy-provider

//Windows：
set NODE_OPTIONS=--openssl-legacy-provider

//解决方法2. package.json增加配置
"scripts": {
    "serve": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "vue-cli-service build"
}

2.2、JS调试器

打开JS调试器 > 控制台 可以直接访问Application对象模型，方便查看执行结果

比如在控制台调用FileSystem对象创建txt文件，写入字符串数据；设置列宽和行高

//在桌面创建txt文件，并写入字符串test
let app = Application
let path = app.Env.GetHomePath()
app.FileSystem.WriteFile(`${path}/Desktop/test.txt`, 'Hello WPS-Addon')

//设置列宽和行高
let sh = app.ActiveSheet
sh.Columns.Item('A:F').ColumnWidth = 12
sh.Rows.Item('1:5').RowHeight = 36

//单元格赋值
let data = ['Hello', 'WPS-Addon']
sh.Range('A1').Resize(1, 2).Value2 = data

2.3、加载项名称、类型和版本号

2.4、customUI自定义功能区

加载项目录找到ribbon.xml

<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui" onLoad="OnAddinLoad">
    <!-- 自定义功能区 -->
    <ribbon startFromScratch="false">
        <tabs>
            <!-- 标签选项卡 -->
            <tab id="wpsAddinTab" label="WPS-AI">
                <!-- 分组 -->
				<group id="btnDemoGroup" label="group1">
                    <button id="btnShowMsg" label="弹出消息框" onAction="OnAction" getEnabled="OnGetEnabled"  getImage="GetImage" visible="true" size="large"/>
                    <button id="btnIsEnbable" getLabel="OnGetLabel" onAction="OnAction" enabled="true"  getImage="GetImage" visible="true" size="large"/>
                    <button id="btnShowDialog" label="弹对话框网页" onAction="OnAction" getEnabled="OnGetEnabled"  getImage="GetImage" getVisible="OnGetVisible" size="large"/>
                    <button id="btnShowTaskPane" label="弹任务窗格网页" onAction="OnAction" getEnabled="OnGetEnabled"  getImage="GetImage" getVisible="OnGetVisible" size="large"/>
                    <button id="btnApiEvent" getLabel="OnGetLabel" onAction="OnAction" getEnabled="OnGetEnabled"  getImage="GetImage" getVisible="OnGetVisible" size="large"/>
                    <button id="btnWebNotify" label="给业务系统发通知" onAction="OnAction" enabled="true"  getImage="GetImage" getVisible="OnGetVisible" size="large"/>
				</group>
                <group>
                    <button id="wpsai" label="WPS-AI" onAction="OnAction" getEnabled="OnGetEnabled"  getImage="GetImage" getVisible="OnGetVisible" size="large"/>
                    <button id="bilibili" label="视频列表" onAction="OnAction" getEnabled="OnGetEnabled"  getImage="GetImage" visible="true" size="large"/>
                    <button id="orderList" label="订单列表" onAction="OnAction" getEnabled="OnGetEnabled"  getImage="GetImage" visible="true" size="large"/>
                </group>
                <group>
                    <button id="debugCode" label="调式代码" onAction="OnAction" getEnabled="OnGetEnabled"  getImage="GetImage" visible="true" size="large"/>
                </group>
            </tab>
        </tabs>
    </ribbon>

    <!-- 自定义上下文菜单 -->
    <contextMenus>
        <!-- 单元格右键菜单 -->
        <contextMenu idMso="ContextMenuCell">
            <button id="orderList" label="加载项右键菜单-订单列表" onAction="OnAction" getImage="GetImage" visible="true" size="large"/>
            <!-- 扩展菜单 -->
            <menu id="menus" label="加载项右键扩展菜单" imageMso="HappyFace">
                <button id="menuBtn1" label="扩展菜单按钮1" imageMso="HappyFace"/>
                <button id="menuBtn2" label="扩展菜单按钮2" imageMso="HappyFace"/>
                <button id="menuBtn3" label="扩展菜单按钮3" imageMso="HappyFace"/>
            </menu>
        </contextMenu>
    </contextMenus>
</customUI>

属性	作用
id	标签/控件唯一标识
lable	标签/控件显示的名称
onAction	事件发生时执行的函数名称
getEnabled	执行函数OnGetEnabled控制激活/冻结
getImage	执行函数GetImage获取图标
visible	显示或隐藏控件可选属性true或false
size	控件尺寸可选属性large或normal
idMso	WPS内置控件标识，具体参考WPS官方文档idMso列表

2.5、离线加载项网络请求

由于WPS通过file协议启动离线加载项，发送请求存在跨域问题，解决办法：

在服务端设置header授权不同源的客户端进行跨域请求

setHeader('Access-Control-Allow-Origin', '*')

//nodejs服务端代码实例
const http = require('http')
http.createServer((req, res) => {
    const data = { message: '离线插件发送请求示例' }

    res.setHeader('Access-Control-Allow-Origin', '*')
    res.setHeader('Content-Type', 'application/json')
    res.end(JSON.stringify(data))
}).listen(80, () => console.log('server running at http://127.0.0.1'))

//离线加载项发送请求示例
fetch('http://127.0.0.1', {
    method: 'GET',
    mode: 'cors', //设置cors
})
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error))

---

三、加载项离线安装和在线部署

注意！加载项只能从离线插件和在线插件二选一，如果已经安装了在线加载项，再安装离线加载项应该会失败

安装离线加载项

WPS内置浏览器通过file协议直接打开保存在本地的html文件启动加载项，因此打包好离线加载项再改好publish.html文件发给用户自行安装即可。

3.1、打包离线加载项

1.打包命令：wpsjs build，选择离线插件

2.发布命令：wpsjs publish，服务器地址随便填，后期要改代码

3.新建一个文件夹，文件夹名称和路径随意，把wpsai.7z和publish.html文件放进去即可

3.2、编辑publish.html

找到LoadPublishAddons函数的位置修改代码并保存

完成之后发给用户，用户通过浏览器打开publish.html文件安装，再把压缩包文件解压到jsaddons目录即可使用

function LoadPublishAddons() {
    var addonList = document.getElementById("addonList");

    //publish.html文件的路径位置不同，url也会跟着不同，增加这行代码
    var addonPath = location.href.match(/.+\//)[0] + 'wpsai.7z'
    var curList = [{"name": "wpsai","addonType": "et","online": "false","multiUser": "false","url": addonPath,"version": "1.0.0"}];
    curList.forEach(function(element) {
        var param = JSON.stringify(element).replace("\"", "\'");
        UpdateElement(element, 'enable')
    });
}

3.3、安装加载项

1.用浏览器打开publish.html文件，点击安装加载项

2.把wpsai.7z解压到jsaddons目录，输入cmd命令可快速打开该文件夹

注意！解压的文件夹名称格式必须是加载项名称 + _ + 版本号，例如：wpsai_1.0.0

start %Appdata%\kingsoft\wps\jsaddons

到这里离线加载项已经安装在本地可以使用了，根据加载项类型打开WPS的 Excel Word PPT查看加载项是否启动

服务器部署 / publish模式

把加载项文件和publish.html文件上传到服务器即可，在线加载项的安装、卸载、禁用统一在publish.html页面管理

4.1、打包在线加载项

1.打包加载项时，选择在线插件

2.输入命令：wpsjs publish 发布加载项

提示输入服务器地址，先随便填后期再从publish.html文件上更改，例如本机ipv4地址：192.168.16.103:3000/

局域网使用建议在路由器设置固定ip地址并绑定服务器电脑的mac地址，然后在服务器电脑上设置防火墙入站规则开放端口

上述步骤将会得到的wps-addon-build文件夹和publish.html文件

4.2、Express框架搭建服务器

1.全局安装express脚手架，安装完成输入express -h显示帮助信息

npm install -g express-generator

2.创建名称为serve的Express应用

express --view=ejs serve

3.根据提示依次输入命令启动项目，浏览器打开127.0.0.1:3000或者本机ip地址访问项目

4.3、上传文件到serve项目

把加载项wps-addon-build文件夹和publish.html文件放到serve项目的public目录里，

再把wps-addon-build文件夹重命名为wpsai

4.4、更改加载项服务器地址

编辑publish.html代码，找到LoadPublishAddons函数改代码

因为wpsai加载项托管在public目录下，

服务器地址应改为本机ip地址：http://192.168.16.103:3000/wpsai/

后续可以添加多个加载项项目、更改加载项服务器地址

加载项服务器部署完毕，管理加载项从浏览器打开192.168.16.103:3000/publish.html