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

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

官方對 WPS 加載項的解釋：

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

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

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

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

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

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

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

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

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

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

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

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

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

提供 wps 加載項的在線服務(wù)，wpsjs 生成的代碼示例是一個在線模式，wps 客戶端程序?qū)嶋H上是通過 http 服務(wù)來請求在線的 wps 加載項相關(guān)代碼和資源的。

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

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

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

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

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

publish 模式：

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

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

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

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

nginx 關(guān)鍵配置如下

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

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

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

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

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

jsplugins.xml 模式

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

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

在線插件 ——

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

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

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

離線插件 ——

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

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

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

我這里選擇在線插件

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

審核編輯：湯梓紅