O2OA提供了门户平台,使用可视化方式设计页面,用于设计系统主页、列表等系统中的各类页面,在一定程度上降低了开发者的技能要求。但是对于有经验的前端开发人员,或者已经习惯了使用前端开发框架的用户,这种页面设计模式的效率就显得不合适了。
  本系列教程,我们就来讲一下如何使用主流前端框架集成O2OA进行开发。主要包括现在主流的三个框架:React、VUE和Angular。
  本系列文章适用于O2OA5.1及以后的版本。
  让我们先从React开始吧!

版本要求

本文适用于如下版本:

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

    在O2门户页面中使用React


  在很多情况下,我们不需要复杂的React应用,通过仅仅几行代码并且无需使用构建工具,即可在O2平台门户页面中使用React。本章实现的例子和React官网的《在网站中添加 React》效果一致,可参考:

https://zh-hans.reactjs.org/docs/add-react-to-a-website.html

第一步:创建门户页面

在O2平台创建一个门户,并新建一个页面。在页面中创建一个容器,标识为:"div"。
image.png

第二步:创建React组件脚本

在门户中创建一个脚本,命名为:like_button。
image.png
拷贝以下代码:

'use strict';
const e = React.createElement;
//创建React组件
class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }
  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }
    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

//获取组件容器(门户页面上的div容器)
const domContainer = this.page.get("div").node;
//在容器中渲染React组件
ReactDOM.render(e(LikeButton), domContainer);

第三步:页面中加载React

在刚刚新建的页面的afterload事件中,添加以下代码:

//引入React脚本
o2.load([
    "https://unpkg.com/react@16/umd/react.development.js",
    "https://unpkg.com/react-dom@16/umd/react-dom.development.js"
], function(){
    //引入like_button组件
    this.include("like_button");
}.bind(this));

(如果是生产环境,请将React脚本的路径中development替换为production。当然你也可以下载js文件,放到O2服务器的webServer目录下,建议放到o2_lib目录,然后用正确的路径加载它。)

第四步:完成

没有第四步了。你刚刚已经将第一个 React 组件添加到你的O2门户页面中了,现在您可以预览它,看到实现的效果了。

经过以上四步,您已经用最简单的方式,将React集成到O2OA中。如果您希望使用更大的Javascript工具链,我们将在下面的章节中介绍两种方式使用Create React App脚手架集成O2OA。

推荐文章:

流程设计-流程设计与应用权限设置
2021-02-26
本文主要介绍如何在O2OA中进行审批流程或者工作流设计,O2OA主要采用拖拽可视化开发的方式完成流程的设计和配置,不需要过多的代码编写,业务人员可以直接进行修改
流程设计-拆分流程样例
2021-03-01
在复杂的流程设计中通常需要使用到拆分功能,比如公文管理流程中的各部门办理。本文主要介绍如何在O2OA平台中设计流程时使用流程拆分功能。
开发知识-使用VNC连接中标麒麟V7操作系统
2021-02-07
NeoKylinLinuxAdvancedServerreleaseV7Update6(Chromium)
常见问题-接口代码疑惑解答汇总
2021-02-07
一、分页样例代码try(EntityManagerContaineremc=EntityManagerContainerFactory.instance().c
开发知识-Vue篇:在O2门户页面中使用Vue
2021-02-07
  在O2OA门户页面中使用Vue非常容易,本章我们介绍两个实例,来展示如何在门户页面中使用Vue。版本要求本文适用于如下版本:O2OA版本要求:5.1及以上版
固定资产管理使用手册
2021-02-19
O2OA资产管理能保证资产定期维护、规范化资产管理等等,保证企业的固定资产信息不丢失、不错漏,进一步提高固定资产的使用效率,加强固定资产管理。
报销申请使用手册
2021-02-19
O2OA报销申请是使用平台能力自定义开发的一个业务流程,它适用于企业内员工财务报销申请的电子审批。员工新建报销申请流程,确定报销申请信息,发起审批、财务处理、备
平台维护-待办待阅数据的查询操作和管理
2021-02-26
O2OA提供平台数据维护应用,用于对平台应用类数据的维护操作,用户可以在应用市场选择安装平台维护应用。本篇主要简单介绍系统待办、已办、待阅、已阅数据的查询和维护
开发知识-中标麒麟安装达梦数据库(DM8)
2021-02-07
环境说明操作系统版本:NeoKylinLinuxAdvancedServerreleaseV7Update6(Chromium)1.前期准备工作1.1数据库下载
系统安全-启用HTTPS(百度云版)
2021-02-25
为增加系统和用户的安全性,平台支持启用HTTPS,使用SSL对网络流量进行证书加密传输。本篇主要介绍如何将在O2OA中启用HTTPS。

results matching ""

    No results matching ""