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 添加加載項