O2OA提供了门户平台,使用可视化方式设计页面,用于设计系统主页,列表等系统中的各类页面,在一定程度上降低了开发者的技能要求。但是对于有经验的前端开发人员,或者已经习惯了使用前端开发框架的用户,这种页面设计模式的效率就显得不合适了。
本系列教程,我们就来讲一下如何使用主流前端框架集成O2OA进行开发。主要包括现在主流的三个框架:反应,VUE和角。
让我们先从反应开始吧!
在O2门户页面中使用反应
在很多情况下,我们不需要复杂的反应应用,通过仅仅几行代码并且无需使用构建工具,即可在O2平台门户页面中使用反应。
第一步:创建门户页面
在O2平台创建一个门户,并新建一个页面。在页面中创建一个容器,标识为:“div"。
第二步:创建反应组件脚本
在门户中创建一个脚,本命名为:like_button。
拷贝以下代码:
& # 39;使用严格# 39;;conste=React.createElement;//创建反应组件classLikeButtonextendsReact.Component{构造函数(道具){超级(道具);this.state={喜欢:假};,{如果(this.state.liked){}渲染()返回# 39;你喜欢这强生# 39;,,,}returne(& # 39;按钮# 39;,{onClick:()=祝辞this.setState({喜欢:真})},& # 39;像# 39;,,);}}//获取组件容器(门户页面上的div容器)constdomContainer=this.page.get (“div") .node;//在容器中渲染反应组件ReactDOM.render (e (LikeButton), domContainer);
第三步:页面中加载反应
在刚刚新建的页面的后负荷事件中,添加以下代码:
//引脚入反应本o2.load ([“https://unpkg.com/react@16/react.development.js" umd格式,“https://unpkg.com/react-dom@16/react-dom.development.js" umd格式),函数(){//引入like_button组件this.include (“like_button");} .bind(这);
(如果是生产环境,请将脚反应本的路径中发展替换为生产。当然你也可以下载js文件,放到O2服务器的网络服务器目录下,建议放到o2_lib目录,然后用正确的路径加载它。)
第四步:完成
没有第四步了。你刚刚已经将第一个反应组件添加到你的O2门户页面中了,现在您可以预览它,看到实现的效果了。
经过以上四步,您已经用最简单的方式,将反应集成到O2OA中。如果您希望使用更大的Javascript工具链,我们将在下面的章节中介绍两种方式使用创建应用程序反应脚手架集成O2OA。
(转自公众号:浙江兰德网络)
