前言
任何一个新技术的学习使用，一般都由demo开始，然后逐步深入直到完全掌握，这个也不例外，所以这个系列的第一篇文章主要写的是如何将官方提供的demo跑起来。
一、项目地址
官方提供的演示示例（OA助手）
https://code.aliyun.com/zouyingfeng/wps/tree/master
官方提供的开发文档
https://open.wps.cn/docs/office
二、环境安装
1.安装node.js
下载地址：
https://nodejs.org/en/download/
安装验证：安装时一直Next，安装后进行版本验证
2.安装vs code
下载地址：
https://code.visualstudio.com/
安装目的：
代码编辑软件，建议使用软件
3.安装wps
建议安装最新专业版wps
注意：存在
兼容性问题
，版本不同可能会导致有的js方法报错
三
、项目启动
1.进入 oaassist\server\ 目录下
2.npm config set registry http://registry.npm.taobao.org //切换npm淘宝镜像源
3.npm install //安装相应依赖
4.node StartupServer //启动demo的服务注意：
1、正常情况下，通过新建文件可以自动打开wps文档，并展示wps加载项。如果点击新建文件提示“请允许浏览器打开WPS Office”，同意后如果没有响应是wps版本导致，可以通过重新安装其他版本wps，或者通过手动打开wps文档，也可以看到wps加载项
3、这个项目有使用node.js编写代码，所以需要用node启动。如果你的项目不想通过node启动，可以参考官方技术文档中
生成首个WPS加载项
四、项目解析
参考
生成首个WPS加载项
生成的demo，我简单介绍下wps加载项的主要文件
1、index.html
这个是页面部分，通过main.js来引入所有的外部JavaScript文件，比如ribbon.js、通用.js、业务.js
2、ribbon.js
这个是自定义功能区配置文件，其中第一行配置onLoad=”OnAddinLoad”方法在整个wps加载项中是第一个执行的，可以用来进行初始化操作。
ribbon.xml文件中的getImage会在初始化时完成加载项图标的加载,在用户点击加载项时会通过onAction会触发ribbon.js中对应的方法，并根据加载项id执行对应的业务逻辑。
结束语
这就是本章的内容，如果有什么不明白的可以在下方留言，如果看到我会及时回复的。
在下一篇文章中，我会编写一个简单的wps加载项实操演示一番，另外还会说下wps的相关配置文件以及作用，如果有时间的话，再说说wps的部署模式，感兴趣的小伙伴可以点赞关注，我会尽快更新哦！