门户定制案例-门户顶部显示第三方系统入口

运行效果

在门户页顶部，新增菜单按钮，实现平台页面及第三方页面，在内容区切换展示

实现方法

定制企业门户应用，参考《门户定制》
在门户页 /entry/pcxapp/pcx/index.w 中，布局渲染方法 layoutRender 的 after 扩展点，在原页面布局基础上新增 iframe 元素，用于展示第三方页面内容
在门户页 /entry/pcxapp/pcx/index.w 中，顶部工具条渲染方法 headerActionsRender 的 after 扩展点，在门户页顶部新增菜单按钮，实现平台首页及第三方页面切换展示

添加扩展点

桌面端门户的扩展点方法写在 /UI2/comp/portalConfig/components/portalConfig/portalConfig.config.pc.js 文件的 onConfigContextInit 方法中，如果没有 portalConfig.config.pc.js 文件，将 portalConfig.config.js 文件复制为 portalConfig.config.pc.js 文件

添加门户页 /entry/pcxapp/pcx/index.w 顶部工具条渲染方法 headerActionsRender 和布局渲染方法 layoutRender 的 after 扩展点，代码如下

    async onConfigContextInit(configContextProcessor) {
        let portalConfig = {
            "config": {
                "/entry": {
                    "/pcxapp": {
                        "/pcx": {
                            "/index.w": {
                                "layoutRender": {
                                    "@after": (result,...args) => {                                    
                                },
                                "headerActionsRender":{
                                    "@after":(result,...args)=>{                                    
                                    }
                                }
                            }
                        }
                    }
                }
            }
        };
        //处理自定义内容
        merge(_this.configContext, portalConfig);
        ConfigContextProcessor.enhancePageAdvice(_this);
    }

在布局中增加 iframe

在原页面布局基础上新增 iframe 元素，用于展示第三方页面内容，示例代码如下

   "layoutRender": {
        "@after": (result,...args) => {                                    
            return <>
                <iframe id="framePgae" frameborder="0" style={{display:"none",position:"fixed",top:"56px",width:"100%",height:"calc(100vh - 56px)",bottom:"0px",zIndex:1}}></iframe>
                <div id="layoutPage">{result}</div>
            </>;
        }
    },

顶部增加菜单按钮

在门户页顶部，添加菜单按钮，示例代码如下

    "headerActionsRender":{
        "@after":(result,...args)=>{                                    
            let hmenus=result;
            hmenus.unshift(<span onClick={headerMenuClick} data="https://news.sina.com.cn/">sina</span>);
            hmenus.unshift(<span onClick={headerMenuClick} data="https://163.com">163</span>);
            hmenus.unshift(<span onClick={headerMenuClick} data="home">工作台</span>);
            return hmenus;
        }
    }

完整代码

/UI2/comp/portalConfig/components/portalConfig/portalConfig.config.pc.js 文件的完整代码如下

import { merge } from "lodash";
import ConfigContextProcessor from 'core/framework/ConfigContextProcessor';
import React from 'react';

export default {

    processConfigContext(configContext) {
    },

    async onConfigContextInit(configContextProcessor) {
        //获取当前页
        let _this = configContextProcessor.page;

        //自定义菜单点击事件
        const headerMenuClick=(e)=>{       
            let data=e.currentTarget.getAttribute("data");
            //iframe元素
            let framePage=document.getElementById("framePgae");
            //原平台菜单及内容元素
            let layoutPage=document.querySelectorAll("#layoutPage .uix-portal-layout-content,#layoutPage .uix-portal-sider");
            if(data=="home"){
                framePage.style.setProperty("display","none");           
                layoutPage.forEach(item=>item.style.removeProperty("display"));
            }else{
                framePage.src=data;
                framePage.style.removeProperty("display");
                layoutPage.forEach(item=>item.style.setProperty("display","none"));
            }
        }

        let portalConfig = {
            "config": {
                "/entry": {
                    "/pcxapp": {
                        "/pcx": {
                            "/index.w": {
                                "layoutRender": {
                                    //在原页面布局基础上新增iframe元素，用于展示第三方页面内容
                                    "@after": (result,...args) => {                                    
                                        return <>
                                            <iframe id="framePgae" frameborder="0" style={{display:"none",position:"fixed",top:"56px",width:"100%",height:"calc(100vh - 56px)",bottom:"0px",zIndex:1}}></iframe>
                                            <div id="layoutPage">{result}</div>
                                        </>;
                                    }
                                },
                                "headerActionsRender":{
                                    //在平台首页新增头部菜单按钮
                                    "@after":(result,...args)=>{                                    
                                        let hmenus=result;
                                        hmenus.unshift(<span onClick={headerMenuClick} data="https://news.sina.com.cn/">sina</span>);
                                        hmenus.unshift(<span onClick={headerMenuClick} data="https://163.com">163</span>);
                                        hmenus.unshift(<span onClick={headerMenuClick} data="home">工作台</span>);
                                        return hmenus;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        };
        //处理自定义内容
        merge(_this.configContext, portalConfig);
        ConfigContextProcessor.enhancePageAdvice(_this);
    }
}

案例-门户顶部-显示第三方系统入口