WPS二次開發之加載項(一)

語言: CN / TW / HK

官方對WPS加載項的解釋:

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

  • 完整的功能。可通過多種不同的方法對文檔、電子表格和演示文稿進行創作、格式設置和操控;通過鼠標、鍵盤執行的操作幾乎都能通過WPS 加載項 完成;可以輕鬆地執行重複任務,實現自動化。
  • 三種交互方式。自定義功能區,採用公開的CustomUI標準,快速組織所有功能;任務窗格,展示網頁,內容更豐富;Web 對話框,結合事件監聽,實現自由交互。
  • 標準化集成。不影響 JavaScript 語言特性,網頁運行效果和在瀏覽器中完全一致;WPS 加載項開發文檔完整,接口設計符合 JavaScript 語法規範,避免不必要的學習成本,縮短開發週期。

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

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

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

2、新建一個wps加載項,假設取名為"HelloWps": wpsjs create HelloWps,會出現如下圖的幾個選項:

3、這裏我們選擇“電子表格”後,會讓你選擇前端框架:

 

4、如果你熟悉vue,選擇“Vue”以後,wpsjs會在當前目錄創建如下的工程結構 

 
5、 執行調試命令:  wpsjs debug
該命令會自動修改oem.ini配置,並在本地生成jsplugins.xml文件,命令執行後會自動啟動wps並加載HelloWps這個加載項 ,同時wpsjs工具包啟了一個http服務,此服務主要提供兩方面的能力:
  • 提供前端頁的的熱更新服務,wpsjs工具包檢測到網頁數據變化時,自動刷新頁面。
  • 提供wps加載項的在線服務,wpsjs生成的代碼示例是一個在線模式,wps客户端程序實際上是通過http服務來請求在線的wps加載項相關代碼和資源的。

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

 
至此,wps加載項代碼可以開始編寫運行。但是正式使用的時候,我們需要把加載項發佈到生產環境
目前wps提供兩種部署方式:jsplugins.xml模式和publish.xml模式。
  • publish模式是通過wpsjs工具包的wpsjs publish命令打包,將生成的文件夾下的所有文件部署到打包時填寫服務器地址去。吿知用户publish.html地址,業務系統開發商可將publish.html的功能按需整合到自己的頁面中,便於做基礎環境監測。也可以複用此頁面給到用户,用户可自己控制啟用和禁用哪些加載項。
  • jsplugins.xml模式是通過設置oem.ini配置文件的JSPluginsServer的值為加載項管理文件jsplugins.xml來控制加載項的加載(相當於WPS加載項列表文件),二次打包時,業務開發商需要吿知我們JSPluginsServer的配置地址,將其配置到oem.ini文件中,業務開發商再做安裝包分發。後續的加載項的控制用,業務開發商可以自由的更改jsplugins.xml文件,實現加載項的新增,修改。

publish模式:

1、執行發佈命令: 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可參考另一篇博文: 如何優雅地在Windows上使用Nginx
4、按照提示把 publish.html 也 部署到服務器上,通過訪問服務器上的publish.html  實現加載項的加載和卸載操作。當存在多個加載項時,在每一個加載項項目下都執行一次 wpsjs publish ,並且將每個加載項單獨部署即可。本例的地址是: http://localhost/wps-host/publish.html
5、瀏覽器打開publish.html 的線上地址,點擊“安裝”,等頁面按鈕變成“卸載”,狀態顯示“正常”,則表示加載項安裝成功,如圖:
6、這時候重啟wps,打開一個空白電子表格,如果出現debug時的“wps加載項實例”則表示加載項在線安裝生效了
7、如果以上步驟都沒問題,但是就是沒出現“wps加載項實例”,可以試着把 wps安裝目錄/office6/cfgs/oem.ini文件的 JsApiPlugin=true改為 JsApiPlugin=false  。
 

jsplugins.xml模式

1、執行生產環境打包命令: wpsjs build
2、離線和在線的方式各有優缺點:
在線插件——
  • 優點:加載比較平滑,用户首次加載或版本更新後的用户初次訪問時間會比離線模式高,且每次都是使用最新的代碼
  • 缺點:每次執行時,都是去請求服務器上的資源,比較浪費網絡資源,並且網絡不好時,不能訪問。
  • 總結:在線模式適合在資源頻繁改動,且網絡穩定的情況下使用
離線插件——
  • 優點:只要name_version等於加載項文件夾的名字,加載項就不會去更新加載項的包,採用本地的加載項包資源,大大的節省網絡資源和用户的時間。
  • 缺點:初次加載或版本變更時,都會先去下載整個加載項包,並解壓,會比較耗費時間
  • 總結:離線模式適合資源改動不頻繁的情況
我這裏選擇在線插件
 
3、按照提示,將目錄wps-addon-build下的文件署到服務器,然後將加載項的地址配置到原有的jsplugins.xml文件中,如果沒有,新建一個jsplugins.xml文件,將加載項的地址配置到該文件。將oem.ini文件中的JSPluginsServer的值寫成jsplugins.xml文件的部署地址。