　　本章我们介绍使用React的Create React App工具，在O2平台中创建React应用。在本例中，我们将列示当前用户的前20条待办，点击标题打开待办；并通过点击按钮启动流程和打开主页。

版本要求

本文适用于如下版本：

O2OA版本要求：5.1及以上版本；
React版本：本文撰写时，react版本是16.13.1。（更低的版本未经验证）

前提
开发端安装了Node.js，Node >= 8.10， npm >= 5.6
有一台O2服务器
使用合适的开发工具：WebStorm、VSCode、Atom等（本例使用WebStorm）

创建React应用

　　您可以使用WebStorm创建一个新的React App，如下图：

或者创建一个空项目，然后使用以下命令创建React应用：

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

创建后目录结构如下：

添加O2脚本引入

在public/index.html的head中添加O2脚本引入：

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

修改src/index.js文件如下：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

//定义O2平台对象
let layout = window.layout;
let o2 = window.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') ); }); });

其中：
let layout = window.layout;
let o2 = window.o2;
获取两个O2的全局对象。

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';

function App(props) {
    function openHomepage(){
            //通过O2全局对象layout的openApplication方法打开主页"Homepage"
        window.layout.openApplication(null,"Homepage")
    }
    function openTask(id){
          //通过O2全局对象layout的openApplication方法打开待办
        window.layout.openApplication(null,"process.Work", {"workId": id});
    }
    function startProcess(){
          //通过o2.env对象启动流程
          //o2.env对象即是在O2门户页面的脚本中的this指向，可以使用其方法。
          //请将“application-name”和“process-name”修改为您的流程应用名称和流程名
        window.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，点击后分别启动指定的流程，打开主页。
其中用到两个全局对象：o2和layout。我们在Node.Js环境中开发，o2的对象是通过

results matching ""

No results matching ""