在前面的章节中,我们介绍了两种在O2OA中使用React开发应用的方式,已经可以满足绝大多数的情况了。如果您考虑完全脱离O2的web服务器,自己搭建web服务器,那就请阅读本章。
  我们还是使用React的Create React App工具,创建React应用,然后将O2OA集成到应用中,并实现以下功能:列示当前用户的前20条待办,点击标题打开待办;通过点击按钮启动流程和打开主页。

版本要求

本文适用于如下版本:

  • O2OA版本要求:5.1及以上版本;
  • React版本:本文撰写时,react版本是16.13.1。(更低的版本未经验证)

    前提

  • 开发端安装了Node.js,Node >= 8.10, npm >= 5.6

  • 有一台O2服务器(并不需要启动webServer,但其他服务需要正常启动)
  • 使用合适的开发工具:WebStorm、VSCode、Atom等(本例使用WebStorm)

创建React应用

您可以使用WebStorm创建一个新的React App,如下图:
image.png
或者创建一个空项目,然后使用以下命令创建React应用:

npx create-react-app my-app
cd my-app


创建后目录结构如下:
image.png

添加O2平台web脚本

  将O2服务器的webServer下的所有文件夹拷贝到public目录:image.png
在public/index.html的head中添加O2脚本引入:

<script src="../o2_core/bundle.js">script>