2.1 多维门户第三方组件接入规则

【租户级】多维门户第三方组件接入规则

注：此方案上传的组件只能在当前租户下的所有门户可见；

一、使用租户管理员账号登录yonbip平台，选择 “数字化建模” -- “移动端配置” -- “移动门户设计” 节点；

二、选择“设计” 或者 “新建门户”，打开设计门户界面；

三、上传自定义组件

自定义组件上传画面如上图↑↑↑

1、组件结构
组件名称 必填* 自定义组件名
组件图片 自定义的组件图标 （不上传有个默认的）
组件源文件 组件的js文件（只有一个）
组件回调函数名 组件js的初始化方法（说明看下面）
平台服务代码
2、使用方式案例：
组件回调函数({
 eventbus: eventbus,
 context: {},
 opt: {
    lang: 'zh_cn', 
    origin: 'runtime',
    el: `.portal-custom-${data?.nid}`},
 })

写法说明:

  1. 组件初始化函数使用一个对象作为参数
  2. 对象参数中各key说明
eventbus: 接收一个发布订阅对象作为参数 用于自定义组件同设计器的通信维持
context: 上下文对象用于传递组件环境的信息（备用 暂时不需要）
opt：配置项 {
    lang: 'zh_cn', // 语言环境，'zh_cn' - 中文（默认）, 'en' - 英文，'zh_tw' - 繁体
    el: '#Yzone-nI21HNvV9q', // 组件需要绑定到的dom节点 设计器会传入一个selector 类或者id字符串 （重要）
    origin: 'runtime', // 当前磁贴运的运行状态， 'designer' - web 端设计态， 'preview' - 预览状态， 'runtime' - 真正的运行态(默认)
}
3、详细code案例
/**
 * 第三方组件DEMO
 */
var extendComponentDemo = (params) => {
    var parentNode = document.querySelector(params.opt.el);
    if (!parentNode) {
        return;
    }
    
    var thirdPartAppBlock = document.createElement('div');
    var testData = {
        'zh_cn': '持续创新。。。',
        'en': 'I am a third party app tile',
        'zh_tw': '持续创新。。。',
    }
    var txt = document.createTextNode(testData[params.opt.lang || 'zh_cn']);
    thirdPartAppBlock.appendChild(txt);
    thirdPartAppBlock.className = 'thirdPartApp-block';
    thirdPartAppBlock.style.color = '#000';
    thirdPartAppBlock.style.backgroundColor = '#f1c6ec';
    thirdPartAppBlock.style.height = '100px';
    
    parentNode.appendChild(thirdPartAppBlock);
    
    thirdPartAppBlock.addEventListener('click', () => {
        if (params.eventbus) {
            params.eventbus.emit('transferData', {test: 112});
        }
    })
}
window.extendComponentDemo = extendComponentDemo;
4、说明 组件回调函数名（初始化方法 如initThirdPartApp） 需要挂在window上

四、注意事项

  1. 关于暗黑模式 需要调用原生能力的来判断所处的模式 可直接联系移动端负责人董雷（ios：董红飞、android：杜欣默）
  2. 关于跨域问题cros的解决 需要将我们这边的域名设置为白名单
  3. 组件回调函数名的命名：
    • --需要带有业务意义（一定要避免重复）
  4. 适配方案：
    • 按照750的设计稿，html的根元素设置的字号大小为 100px;
是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24