wps加载项示例

开发调试加载项

1. 通过 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，会出现如下图的几个选项：

   
   
   image.png
   
   

   通过上下方向键可以选择要创建的wps加载项的类型，如果选择“文字”，则创建的加载项会在wps文字程序中加载并运行，
   同理选择“电子表格”，则会在wps表格中运行，这里假设我们选择的是“文字”，按Enter健确定。

   
   
   image.png

3. 、选择示例代码的代码风格类型
   wpsjs工具包提供了两种不同代码风格的示例，“无”代表示例代码中都是原生的js及html代码，没有集成vue\react等流行的前端框架。
   "Vue"代表生成的示例代码集成了Vue相关的脚手架，在实际的项目中选用Vue基于示例代码可能更适合做工程化的开发，感兴趣的同学可以两种都尝试一下。
   这里我们选择“无”，按Enter健确认。

确认后wpsjs工具包会在当前目录下生成一个HelloWps的文件夹，我们进入到此文件夹，可以看到HelloWps的相关代码已经生成：

4. 开始调试并愉快的写代码
   执行命令： wpsjs debug
   执行此命令后即可开始调试，wpsjs工具包会自动启动wps并加载HelloWps这个加载项，同时wpsjs工具包启了一个http服务,此服务主要提供两方面的能力:
   a.提供前端页的的热更新服务，wpsjs工具包检测到网页数据变化时，自动刷新页面。
   b.提供wps加载项的在线服务，wpsjs生成的代码示例是一个在线模式，wps客户端程序实际上是通过http服务来请求在线的wps加载项相关代码和资源的。
   最后，可以用visual studio code打开示例代码，开始愉快的写代码了。

   
   
   image.png

发布加载项

1. publish模式
   publish模式是通过wpsjs工具包的wpsjs publish命令打包，将生成的文件夹下的所有文件部署到打包时填写服务器地址去。告知用户publish.html地址，业务系统开发商可将publish.html的功能按需整合到自己的页面中，便于做基础环境监测。也可以复用此页面给到用户，用户可自己控制启用和禁用哪些加载项

• 1.2 部署
  • 使用wpsjs包的wpsjs publish命令进行打包
  • 将目录wps-addon-build下的文件署到服务器
  • 将wps-addon-publish下的publish.html文件部署到服务器上，一般与加载项分开部署。

  • 告知用户publish.html文件地址。

    
    
    image.png

• 1.3 加载项加载流程
  • 用户在浏览器中打开publish.html文件
  • 校验加载项是否正常
  • 点击安装或卸载的加载项。
  • 告知用户publish.html文件地址。
  • 启动WPS ，打开一个空白电子表格，如果出现 debug 时的 “wps 加载项实例” 则表示加载项在线安装生效了
  • 如果以上步骤都没问题，但是就是没出现 “wps 加载项实例”，可以试着把 wps 安装目录下的oem.ini 文件的 JsApiPlugin=true 改为 JsApiPlugin=false 。

  • 加载对应组件的所有加载项

    
    
    image.png