开发知识-React篇：在React应用中集成O2OA
本篇介绍自行搭建前端服务时如何在 React 应用中集成该平台：先安装依赖环境并创建应用，接着把平台服务目录下的资源整体拷入应用静态目录，在页面入口引入平台脚本。随后修改平台配置文件中的中心服务器与应用服务器地址端口，抽取全局对象供组件引用，并在脚本载入完成后渲染根组件，通过平台服务读取待办、打开主页与发起流程。最后说明开发服务器启动后即可预览，编译产物可部署到任意前端服务。
提示：
本文介绍的方法已过时，建议参阅文档：o2oa 开发平台前端源码级二次开发
该文档介绍了基于 React 和 Vue 创建 O2OA component 进行 O2OA 前端二次开发的方式。
前文介绍了在 O2OA 中使用 React 开发应用的两种方式，已能满足绝大多数场景。如需完全脱离 O2的 web 服务器、自行搭建 web 服务器，请阅读本章。
本章仍使用 React 的 Create React App 工具创建 React 应用，并将 O2OA 集成到应用中，实现以下功能：列示当前用户的前20条待办，点击标题打开待办；点击按钮启动流程和打开主页。
版本要求
本文适用于如下版本：
前提
开发端安装了 Node.js，Node >= 8.10， npm >= 5.6
创建 React 应用
可以使用 WebStorm 创建新的 React App，如下图：
也可先创建一个空项目，再使用以下命令创建 React 应用：
npx create-react-app my-app cd my-app
创建后目录结构如下：
添加 O2平台 web 脚本
将 O2服务器的 webServer 下的所有文件夹拷贝到 public 目录：
在 public/index.html 的 head 中添加 O2脚本引入：
<script src="../o2_core/bundle.js"></script>
修改 public/x_desktop/res/config/config.json 文件：
{
"center": [
{
"port": "20030", //O2服务器中心服务器端口
"host": "develop.o2oa.net" //O2服务器中心服务器Host
}
],
"applicationServer": {
"host": "develop.o2oa.net" //O2应用服务器Host
},
"initManagerChanged": true,
"initManagerName": "",
...
}此文件需修改两部分内容：
1、center 部分，修改为要访问的 O2中心服务器地址和端口；
2、applicationServer 部分，修改为要访问的 O2应用服务器地址；若不存在 applicationServer，则添加一个。集群环境下可配置应用服务器负载地址；
为方便后续引入，在 src 下创建一个 o2.js，添加以下代码：
let o2 = window.o2;
let layout = window.layout;
export {o2, layout};此后的步骤与第二章基本一致。
修改 inde.js
修改 src/index.js 文件如下：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
//获取O2全局对象
import {o2, layout} from './o2';
//在O2平台脚本载入完成后执行
layout.addReady(function(){
layout.app = true;
//通过平台服务，获取当前用户的前20条待办(可通过http://your-server:20030/x_program_center/jest/list.html查询平台接口服务)
o2.Actions.load("x_processplatform_assemble_surface").TaskAction.V2ListPaging(1,20, {}, function(json){
//React渲染App组件
ReactDOM.render(
<React.StrictMode>
<App value={json.count} data={json.data}></App>
</React.StrictMode>,
document.getElementById('root')
);
});
});layout.addReady 方法会在 O2载入完成后执行回调。
o2.Actions.load 方法用于调用平台的 Restful 服务。
修改 App 组件
先修改 src/App.css 样式文件，添加以下代码：
.App {
padding: 20px;
margin: 20px;
}
.App-header {
padding: 5px 10px;
background: #0f81cc;
font-size: 18px;
color: #ffffff;
}
.o2-tasklist {
padding: 10px;
background: #f3f3f3;
font-size: 18px;
}
.o2-task {
line-height: 30px;
height: 30px;
cursor: pointer;
}
.o2-button {
padding: 10px 20px;
text-align: center;
background: #0f81cc;
margin-top: 10px;
color: #ffffff;
font-size: 18px;
float: left;
margin-right: 20px;
cursor: pointer;
}修改 src/App.js 文件如下：
import React from 'react';
import './App.css';
//获取O2全局对象
import {o2, layout} from './o2';
function App(props) {
function openHomepage(){
//通过O2全局对象layout的openApplication方法打开主页"Homepage"
layout.openApplication(null,"Homepage")
}
function openTask(id){
//通过O2全局对象layout的openApplication方法打开待办
layout.openApplication(null,"process.Work", {"workId": id});
}
function startProcess(){
//通过o2.env对象启动流程
//o2.env对象即是在O2门户页面的脚本中的this指向，可以使用其方法。
//请将“application-name”和“process-name”修改为您的流程应用名称和流程名
o2.env.page.startProcess("application-name", "process-name");
}
function listTask(){
let list = [];
props.data.each(function(d){
list.push(<div className="o2-task" onClick={()=>{openTask(d.work)}}>{d.title || "无标题"}</div>);
});
return list;
}
return (
<div className="App">
<header className="App-header">
<p>
您有{props.value}个待办
</p>
</header>
<div className="o2-tasklist">
{listTask()}
</div>
<div className="o2-button" onClick={startProcess}>点击此处启动流程</div>
<div className="o2-button" onClick={openHomepage}>点击此处打开O2首页</div>
</div>
);
}
export default App;上述代码创建了一个 React 组件，列示待办列表，并创建两个 div，点击后分别启动指定的流程和打开主页。
App.js 中使用了 o2.env 对象，其指向与门户页面脚本中的 this 一致，可调用除门户页面组件相关方法以外的各类方法，如 o2.env.page.openWork、o2.env.inculde、o2.env.confirm、o2.env.page.startProcess 等，详见 API 文档。
编译并运行
完成上述开发工作后，即可编译并运行应用。使用以下命令查看结果：
npm run start
运行后会启动一个web服务器，默认端口3000，并自动打开浏览器；访问http://locahost:3000，即可看到与第二章相同的效果。
若未登录服务器，会出现登录页面；登录后可查看当前用户的待办列表，并可启动流程。
可继续修改代码，每次保存后 React 会自动编译并刷新浏览器，即可看到修改效果。
开发完成后，可使用命令：
npm run build
React 会将所有代码编译到 build 目录下，即可将 build 中的内容部署到任意的 web 服务器。
总结
O2OA 与 React 的集成方式简单，熟悉 React 的用户可使用更灵活的工具进行集成开发；更多 React 相关内容请参考 React 官网教程。
VUE 和 Angular 与 O2OA 的集成将在后续章节介绍。
相关问题讨论
在 Vue 应用中集成 O2OA 照着文档配置完之后报错
我们还是使用 React 的 Create React App 工具，创建 React 应用，然后将 O2OA 集成到应用中，并实现以下功能：列示当前用户的前20条待办，点击标题打开待办；通过点击按钮启动流程和打开主页。
查看原帖讨论 · 20,943 次浏览
钉钉集成 O2OA 的 H5应用不生效问题
我们还是使用 React 的 Create React App 工具，创建 React 应用，然后将 O2OA 集成到应用中，并实现以下功能：列示当前用户的前20条待办，点击标题打开待办；通过点击按钮启动流程和打开主页。
查看原帖讨论 · 19,369 次浏览
注意！O2OA 老版本应用市场已于2022年6月27日关闭！
我们还是使用 React 的 Create React App 工具，创建 React 应用，然后将 O2OA 集成到应用中，并实现以下功能：列示当前用户的前20条待办，点击标题打开待办；通过点击按钮启动流程和打开主页。
查看原帖讨论 · 46,692 次浏览
相关内容
浙公网安备33010602013943号