WPS、Word加载项开发流程（免费最简版本）

文章目录

• • • [1 加载项对比](#1 加载项对比)
    • [2 WPS 加载项](#2 WPS 加载项)
    • • [2.1 本地开发](#2.1 本地开发)
      • • [2.1.1 准备开发环境](#2.1.1 准备开发环境)
        • [2.1.2 新建 WPS 加载项项目](#2.1.2 新建 WPS 加载项项目)
        • [2.1.3 运行项目](#2.1.3 运行项目)
      • [2.2 在线部署](#2.2 在线部署)
      • • [2.2.1 编译项目](#2.2.1 编译项目)
        • [2.2.2 部署项目](#2.2.2 部署项目)
        • [2.2.3 生成分发文件](#2.2.3 生成分发文件)
        • [2.2.4 部署分发文件](#2.2.4 部署分发文件)
      • [2.3 安装加载项](#2.3 安装加载项)
      • [2.4 取消发布](#2.4 取消发布)
    • [3 Word 加载项](#3 Word 加载项)
    • • [3.1 本地开发](#3.1 本地开发)
      • • [3.1.1 准备开发环境](#3.1.1 准备开发环境)
        • [3.1.2 新建 Word 加载项项目](#3.1.2 新建 Word 加载项项目)
        • • [3.1.2.1 VSCode 插件方式（推荐）](#3.1.2.1 VSCode 插件方式（推荐）)
          • [3.1.2.2 命令行方式（不推荐）](#3.1.2.2 命令行方式（不推荐）)
        • [3.1.3 运行项目](#3.1.3 运行项目)
      • [3.2 在线部署](#3.2 在线部署)
      • • [3.2.1 修改访问路径](#3.2.1 修改访问路径)
        • [3.2.2 编译项目](#3.2.2 编译项目)
        • [3.2.3 部署项目](#3.2.3 部署项目)
      • [3.3 安装加载项](#3.3 安装加载项)
      • • [3.3.1 共享 manifest.xml](#3.3.1 共享 manifest.xml)
        • [3.3.2 配置加载项目录](#3.3.2 配置加载项目录)
        • [3.3.3 添加加载项](#3.3.3 添加加载项)

1 加载项对比

WPS 加载项与 Word 加载项类似于插件，主要分为 COM 加载项（传统方案）与 Web 加载项（现代方案），以下为两种加载项对比表，本文介绍的是 Web 加载项在Windows操作系统上的开发流程。

2 WPS 加载项

2.1 本地开发

2.1.1 准备开发环境

• 安装 WPS
• 安装 Node.js
• 安装代码编辑器 Visual Studio Code

2.1.2 新建 WPS 加载项项目

• 全局安装 wpsjs

npm install -g wpsjs

• 新建项目

 // 选择 WPS 加载项类型：文字
 // 选择UI框架：Vue（推荐）
 
wpsjs create HelloWps

2.1.3 运行项目

命令运行完后自动打开 WPS

cd HelloWps
wpsjs debug

2.2 在线部署

2.2.1 编译项目

命令运行完后自动生成wps-addon-build文件夹

// 选择 WPS 加载项发布类型：在线插件

wpsjs build

2.2.2 部署项目

将编译后wps-addon-build文件夹下的所有文件部署到服务器，并记下地址（如：https://adds.example.com/wps/dist/）

2.2.3 生成分发文件

• 命令运行完后自动生成wps-addon-publish文件夹
• 可将文件夹下publish.html分发给使用者，但强烈建议同样将其部署到服务器

// 请输入发布 WPS 加载项的服务器地址: https://adds.example.com/wps/dist/
wpsjs publish

2.2.4 部署分发文件

将编译后wps-addon-publish文件夹下的publish.html部署到服务器，并记下地址（如：https://adds.example.com/wps/publish.html）

2.3 安装加载项

访问publish.html文件，如 https://adds.example.com/wps/publish.html，点击安装

2.4 取消发布

若访问publish.html文件后发现不止一个加载项，可以将项目中package.json文件下name改为不需要的加载项名称（如test123），然后执行wpsjs unpublish，重新生成的publish.html就不再包含该加载项（命令执行结束后记得将name改回原加载项名称）

3 Word 加载项

3.1 本地开发

3.1.1 准备开发环境

• 安装 Office
• 安装 Node.js
• 安装代码编辑器 Visual Studio Code

3.1.2 新建 Word 加载项项目

3.1.2.1 VSCode 插件方式（推荐）

• 在 VSCode 中安装Microsoft Office Add-ins Development Kit插件
• 选项按需选择，最后自定义加载项项目名称
  
  
  
  
  

3.1.2.2 命令行方式（不推荐）

使用yo安装容易失败，不推荐

• 全局安装 Yeoman 和 Office 加载项生成器：

npm install -g yo generator-office

• 新建项目

• 若报错generator-office does not support your version of Node. Please switch to the latest LTS version of Node. ，需更新Node版本再重新执行命令
• 若更新Node版本后报错无法识别"yo"，则需再次安装Yeoman 和 Office
• 若提示Office Add-in CLI tools collect anonymized usage data which is sent to Microsoft to help improve our product. Please read our privacy notice at https://aka.ms/OfficeAddInCLIPrivacy. ​To disable data collection, choose Exit and run "npx office-addin-usage-data off".，这是 Office 加载项 CLI 工具的隐私提示，询问你是否同意收集匿名使用数据，可以选择Continue同意数据收集（继续使用），也可以选择Exit禁用数据收集，退出后执行npx office-addin-usage-data off，此后不会再显示提示
• 若仍报错Unable to download project zip file for "https://github.com/OfficeDev/Office-Addin-TaskPane-JS/archive/release.zip".，可直接下载release.zip

// Choose a project type：Office Add-in Task Pane project
// Choose a script type：JavaScript
// What do you want to name your add-in? HelloWord
// Which Office client application would you like to support? Word

yo office

3.1.3 运行项目

命令运行完后自动打开 Word

若设置默认文档打开方式为 WPS，命令运行完后会自动打开 WPS，需手动打开 Word

cd HelloWord
npm install
npm start

3.2 在线部署

3.2.1 修改访问路径

修改webpack.config.js文件下urlProd地址（如：https://adds.example.com/word/dist/）

3.2.2 编译项目

npm run build

3.2.3 部署项目

将编译后dist文件夹下的所有文件部署到服务器（如：https://adds.example.com/word/dist/）

3.3 安装加载项

3.3.1 共享 manifest.xml

• 将dist文件夹下的manifest.xml分发给使用者
• 使用者将文件保存到本地，并在manifest.xml所在文件夹右键 ---显示更多选项---授予访问权限---特定用户
  创建共享目录并记下路径

3.3.2 配置加载项目录

• 打开 Word, 在文件 ---选项---信任中心---信任中心设置---受信任的加载项目录中添加上述共享目录路径

3.3.3 添加加载项