WPS二次開(kāi)發(fā)之加載項(xiàng)（一）：Hello WPS；

官方對(duì) WPS 加載項(xiàng)的解釋：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

publish 模式：

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

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

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

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

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

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

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

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

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

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

jsplugins.xml 模式

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

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

在線插件 ——

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

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

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

離線插件 ——

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

缺點(diǎn)：初次加載或版本變更時(shí)，都會(huì)先去下載整個(gè)加載項(xiàng)包，并解壓，會(huì)比較耗費(fèi)時(shí)間

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

我這里選擇在線插件

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

審核編輯：湯梓紅