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

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? Wordyo 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 添加加载项