WPS二次開發之載入項（一）

官方對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 http://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檔案的部署地址。