vue开发wps加载项之文本

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

提示：wps加载项不支持mac。

文本demo示例：

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

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

安装wpsjs开发工具包

1, npm install -g wpsjs
2,以前安装过可以用更新命令：npm update -g wpsjs
3,显示帮助信息命令：wpsjs -h

二、项目开发 2.1在桌面目录下创建一个名称为wpsai的加载项实例

1，wpsjs create wpsai
2，cd wpsai 命令进入加载项目录
3，wpsjs debug 命令启动加载项进行调式，按下Ctrl + C可停止调式

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

2.3customUI自定义功能区

加载项目录找到ribbon.xml

        <!-- 自定义功能区 -->
        <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>

2.4、离线加载项网络请求

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

在服务端设置header授权不同源的客户端进行跨域请求 setHeader('Access-Control-Allow-Origin', '*')

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，选择离线插件。（把打包生成的 .7z文件部署到服务器 拿到部署的地址）

2.发布命令：wpsjs publish，服务器地址随便填，后期要改代码。（会生成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文件，点击安装加载项

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