在本教程中，将创建一个 WPS 加载项，该加载项将：
- 设计自定义功能区
- 打开对话框
- 创建自定义任务窗格
准备开发环境
- 安装WPS 12.1.0.18912个人版
- 安装Node.js
- 安装代码编辑器 Visual Studio Code
新建 WPS 加载项
1、通过npm全局安装wpsjs开发工具包
安装命令：
npm install -g wpsjs如果之前已经安装了，可以检查下wpsjs版本。
更新wpsjs的命令为：
npm update -g wpsjs2、新建一个WPS加载项：HelloWps
输入命令：
wpsjs create HelloWps会出现如下图的几个选项：
通过上下方向键可以选择要创建的WPS加载项的类型，如果选择“文字”，则创建的加载项会在WPS文字程序中加载并运行，同理选择“电子表格”，则会在WPS表格中运行，这里假设我们选择的是“文字”，按Enter键确定。
3、选择示例代码的代码风格类型
wpsjs工具包提供了两种不同代码风格的示例，“无”代表示例代码中都是原生的JS及HTML代码，没有集成vue\react等流行的前端框架。
初步学习建议不使用框架，选“无”。实际项目开发推荐使用Vue框架。
确认后wpsjs工具包会在当前目录下生成一个HelloWps的文件夹，我们进入到此文件夹，可以看到HelloWps的相关代码已经生成。
4、开始调试并愉快的写代码
在HelloWps项目文件夹下，执行命令：
wpsjs debug
执行此命令后即可开始调试，wpsjs工具包会自动启动WPS并加载HelloWps这个加载项，同时wpsjs工具包启了一个HTTP服务，此服务主要提供两方面的能力：
（1）提供前端页的的热更新服务，wpsjs工具包检测到网页数据变化时，自动刷新页面。
（2）提供WPS加载项的在线服务，wpsjs生成的代码示例是一个在线模式，WPS客户端程序实际上是通过HTTP服务来请求在线的WPS加载项相关代码和资源的。
最后，可以用Visual Studio Code打开示例代码，开始愉快的写代码了。
备注：wpsjs工具包为示例代码中有一个package.json文件，这是node工具标准的配置文件，其中有一个依赖包为wps-jsapi，这个依赖包是WPS支持的全部接口的TypeScript描述，方便在vscode中敲代码时，提供代码联想功能，由于WPS接口会跟随业务需求不断更新，因此当发现代码联想对于有些接口不支持时，通过”npm update –save-dev wps-jsapi“命令定期更新这个包。
