


成都web前端培訓
成都達內金融街中心
基于vscode的方式創建wps加載項在獲取類型之后,無法自動生成wps加載項,在網上查詢相關問題內容也無果。不過Wps官方文檔又更新了通過npm全局的方式創建wps加載項,成都web前端培訓課程下面就來具體介紹一下。
解決方案
創建步驟:
1.準備開發環境
(1)安裝wps 2019
(2)安裝node.js環境
(3)安裝 Visual Studio Code
2.創建wps加載項
打開命令窗口(win+R 輸入cmd),然后輸入安裝命令npm install -g wps js
執行安裝命令
輸入wpsjs create Hello創建一個新的文件(如果存在相同的文件,會提示刪除)。
創建新文件
按提示選擇需要創建的類型和框架,這里的UI框架提供了兩種選擇,“無”代表示例代碼中都是原生的js及html代碼,沒有集成vue\react等流行的前端框架。"Vue"代表生成的示例代碼集成了Vue相關的腳手架,在實際的項目中選用Vue基于示例代碼可能更適合做工程化的開發。
選擇類型和框架
確認后會生成Hello的文件夾,可以進入文件夾查看目錄。
查看文件目錄
輸入命令wpsjs debug啟動wps 2019
啟動wps
啟動成功后會自動跳轉到wps 2019,然后再頂部欄找到wps加載項示例
選擇wps加載項示例
執行此命令后即可開始調試("Alt+F12"打開調試器),wpsjs工具包會自動啟動wps并加載HelloWps這個加載項,同時wpsjs工具包啟了一個http服務,此服務主要提供兩方面的能力:
a.提供前端頁的的熱更新服務,wpsjs工具包檢測到網頁數據變化時,自動刷新頁面。
b.提供wps加載項的在線服務,wpsjs生成的代碼示例是一個在線模式,wps客戶端程序實際上是通過http服務來請求在線的wps加載項相關代碼和資源的。
創建完成后就可以用vscode軟件打開示例代碼,然后愉快地進行開發了