WPS加載項的功能特點及使用方法

WPS二次開發(fā)之加載項（一）：Hello WPS；

官方對 WPS 加載項的解釋：

WPS 加載項是一套基于 Web 技術用來擴展 WPS 應用程序的解決方案。每個 WPS 加載項都對應打開了一個網頁，并通過調用網頁中 JavaScript 方法來完成其功能邏輯。WPS 加載項打開的網頁可以直接與 WPS 應用程序進行交互，同時一個 WPS 加載項中的多個網頁形成了一個整體， 相互之間可以進行數(shù)據(jù)共享。開發(fā)者不必關注瀏覽器兼容的問題，因為 WPS 加載項的底層是以 Chromium 開源瀏覽器項目為基礎進行的優(yōu)化擴展。WPS 加載項具備快速開發(fā)、輕量化、跨平臺的特性，目前已針對 Windows/Linux 操作系統(tǒng)進行適配。WPS 加載項功能特點如下:

完整的功能。可通過多種不同的方法對文檔、電子表格和演示文稿進行創(chuàng)作、格式設置和操控；通過鼠標、鍵盤執(zhí)行的操作幾乎都能通過 WPS 加載項 完成；可以輕松地執(zhí)行重復任務，實現(xiàn)自動化。

三種交互方式。自定義功能區(qū)，采用公開的 CustomUI 標準，快速組織所有功能；任務窗格，展示網頁，內容更豐富；Web 對話框，結合事件監(jiān)聽，實現(xiàn)自由交互。

標準化集成。不影響 JavaScript 語言特性，網頁運行效果和在瀏覽器中完全一致；WPS 加載項開發(fā)文檔完整，接口設計符合 JavaScript 語法規(guī)范，避免不必要的學習成本，縮短開發(fā)周期。

想真正知道這所謂的 “加載項” 到底是是個啥，紙上談兵不如實踐一遍，跟著下面步驟來一發(fā)。首先得電腦需要安裝 wps（廢話）、Node.js。

1、管理員權限（如果安裝的是 wps 個人版，不需要管理員權限）啟動命令行，通過 npm 全局安裝 wpsjs 開發(fā)工具包：npm install -g wpsjs，如果之前已經安裝了，可以更新下：npm update -g wpsjs。

建議使用淘寶鏡像：npm config set registry https://registry.npm.taobao.org

2、新建一個 wps 加載項，假設取名為 "HelloWps"：wpsjs create HelloWps，會出現(xiàn)如下圖的幾個選項：

3、這里我們選擇 “電子表格” 后，會讓你選擇前端框架：

4、如果你熟悉 vue，選擇 “Vue” 以后，wpsjs 會在當前目錄創(chuàng)建如下的工程結構

5、執(zhí)行調試命令：wpsjs debug

該命令會自動修改 oem.ini 配置，并在本地生成 jsplugins.xml 文件，命令執(zhí)行后會自動啟動 wps 并加載 HelloWps 這個加載項，同時 wpsjs 工具包啟了一個 http 服務，此服務主要提供兩方面的能力:

提供前端頁的的熱更新服務，wpsjs 工具包檢測到網頁數(shù)據(jù)變化時，自動刷新頁面。

提供 wps 加載項的在線服務，wpsjs 生成的代碼示例是一個在線模式，wps 客戶端程序實際上是通過 http 服務來請求在線的 wps 加載項相關代碼和資源的。

6、在 wps 打開新標簽頁，選擇新建空白電子表格，如果出現(xiàn)如下的 “wps 加載項實例” 則表示加載項安裝成功了。

至此，wps 加載項代碼可以開始編寫運行。但是正式使用的時候，我們需要把加載項發(fā)布到生產環(huán)境

目前 wps 提供兩種部署方式：jsplugins.xml 模式和 publish.xml 模式。

publish 模式是通過 wpsjs 工具包的 wpsjs publish 命令打包，將生成的文件夾下的所有文件部署到打包時填寫服務器地址去。告知用戶 publish.html 地址，業(yè)務系統(tǒng)開發(fā)商可將 publish.html 的功能按需整合到自己的頁面中，便于做基礎環(huán)境監(jiān)測。也可以復用此頁面給到用戶，用戶可自己控制啟用和禁用哪些加載項。

jsplugins.xml 模式是通過設置 oem.ini 配置文件的 JSPluginsServer 的值為加載項管理文件 jsplugins.xml 來控制加載項的加載（相當于 WPS 加載項列表文件），二次打包時，業(yè)務開發(fā)商需要告知我們 JSPluginsServer 的配置地址，將其配置到 oem.ini 文件中，業(yè)務開發(fā)商再做安裝包分發(fā)。后續(xù)的加載項的控制用，業(yè)務開發(fā)商可以自由的更改 jsplugins.xml 文件，實現(xiàn)加載項的新增，修改。

publish 模式：

1、執(zhí)行發(fā)布命令：wpsjs publish

2、輸入你打算部署 wps 加載項的服務器地址，本例是http://localhost/wps-host/，注意必須要有結尾的斜杠

3、按照提示，把 wps-addon-build 目錄下的文件部署到服務器目錄。我本地配置了 nginx 代理，服務器目錄是D:/static_folder/wps-addon-build/，可通過http://localhost/wps-host/訪問打包出來的文件。

如果部署地址下的 ribbon.xml（http://localhost/wps-host/ribbon.xml）可以正常訪問，說明代碼部署成功了。

nginx 關鍵配置如下

如果想學習nginx 可參考另一篇博文：如何優(yōu)雅地在 Windows 上使用 Nginx

4、按照提示把 publish.html 也部署到服務器上，通過訪問服務器上的 publish.html實現(xiàn)加載項的加載和卸載操作。當存在多個加載項時，在每一個加載項項目下都執(zhí)行一次wpsjs publish，并且將每個加載項單獨部署即可。本例的地址是：http://localhost/wps-host/publish.html

5、瀏覽器打開 publish.html 的線上地址，點擊 “安裝”，等頁面按鈕變成 “卸載”，狀態(tài)顯示 “正?！?，則表示加載項安裝成功，如圖：

6、這時候重啟 wps，打開一個空白電子表格，如果出現(xiàn) debug 時的 “wps 加載項實例” 則表示加載項在線安裝生效了

7、如果以上步驟都沒問題，但是就是沒出現(xiàn) “wps 加載項實例”，可以試著把wps 安裝目錄 /office6/cfgs/oem.ini文件的JsApiPlugin=true改為JsApiPlugin=false。

jsplugins.xml 模式

1、執(zhí)行生產環(huán)境打包命令：wpsjs build

2、離線和在線的方式各有優(yōu)缺點：

在線插件 ——

優(yōu)點：加載比較平滑，用戶首次加載或版本更新后的用戶初次訪問時間會比離線模式高，且每次都是使用最新的代碼

缺點：每次執(zhí)行時，都是去請求服務器上的資源，比較浪費網絡資源，并且網絡不好時，不能訪問。

總結：在線模式適合在資源頻繁改動，且網絡穩(wěn)定的情況下使用

離線插件 ——

優(yōu)點：只要 name_version 等于加載項文件夾的名字，加載項就不會去更新加載項的包，采用本地的加載項包資源，大大的節(jié)省網絡資源和用戶的時間。

缺點：初次加載或版本變更時，都會先去下載整個加載項包，并解壓，會比較耗費時間

總結：離線模式適合資源改動不頻繁的情況

我這里選擇在線插件

3、按照提示，將目錄 wps-addon-build 下的文件署到服務器，然后將加載項的地址配置到原有的 jsplugins.xml 文件中，如果沒有，新建一個 jsplugins.xml 文件，將加載項的地址配置到該文件。將 oem.ini 文件中的 JSPluginsServer 的值寫成 jsplugins.xml 文件的部署地址。

審核編輯：湯梓紅