门户定制案例-添加右下角消息弹出提醒

运行效果

收到消息时，在右下角弹出通知提醒框

实现方法

1. 定制企业门户应用，参考《门户定制》
2. 在门户页 /entry/pcxapp/pcx/index.w 中，订阅组件接收消息方法 onWxSubscribeMessage 的 after 扩展点，调用 notification.info 方法显示通知提醒框
3. 消息的发送依赖“消息中心”和“事件中心”应用，请在租户内添加这两个应用，并在企业门户中进行服务注册
4. 事件中心依赖 redis，添加事件中心前确保有可分配的 redis

添加扩展点

桌面端门户的扩展点方法写在 /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 订阅组件接收消息方法 onWxSubscribeMessage 的 after 扩展点，代码如下

    async onConfigContextInit(configContextProcessor) {
        let _this = configContextProcessor.page;
        let portalConfig = {
            "config": {
                "/entry": {
                    "/pcxapp": {
                        "/pcx": {
                            "/index.w": {
                                "onWxSubscribeMessage": {
                                    "@after": (result, ...args) => {
                                    }
                                }
                            }                         
                        }
                    }
                }
            }
        };
        merge(_this.configContext, portalConfig);
        ConfigContextProcessor.enhancePageAdvice(_this);
    }

显示通知提醒框

接收到新的消息，在右下角弹出通知提醒框，代码如下

    notification.info({
        message: sourceNotices[0].title,
        description:sourceNotices[0].content,
        placement:"bottomRight"
    });

完整代码

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

import { merge } from "lodash";
import ConfigContextProcessor from 'core/framework/ConfigContextProcessor';
import { notification } from 'antd';

export default {

    processConfigContext(configContext) {
    },

    async onConfigContextInit(configContextProcessor) {
        //获取当前页
        let _this = configContextProcessor.page;
        let portalConfig = {
            "config": {
                "/entry": {
                    "/pcxapp": {
                        "/pcx": {
                            "/index.w": {
                                //每次有新的消息进行消息数据更新
                                "onWxSubscribeMessage": {
                                    "@after": (result, ...args) => {
                                        if (args&&args[0]) {
                                            let sourceNotices = args[0].message.data || [];  
                                            if(!sourceNotices[0]){
                                                return;
                                            } 
                                            //接收到新的消息右下角弹出提醒
                                            notification.info({
                                                message: sourceNotices[0].title,
                                                description:sourceNotices[0].content,
                                                placement:"bottomRight"
                                            });
                                        }
                                    }
                                }
                            }                         
                        }
                    }
                }
            }
        };
        merge(_this.configContext, portalConfig);
        ConfigContextProcessor.enhancePageAdvice(_this);
    }
}