【莫奈】二次开发 - 获取大屏交互状态

前言

在多种多样的项目背景下，对于交互都有不同的要求，目前莫奈已支持大部分常见场景，通过配置的方式即可满足交付要求，对于一些交互复杂的项目，可通过莫奈大屏进行二次开发，这篇文章主要介绍二次开发中如何获取大屏交互组件的状态

效果预览

准备工作

1. 进入莫奈，配置一张大屏,用于二次开发

   

2. 发布大屏，获取大屏链接，以下是本文使用的发布链接

   二次开发：https://imonet.jd.com/#/scree...
   访问限制：无

二次开发核心代码

1. 打开需二次开发的工程（已有或新建）

2. 引用大屏

      <iframe  
               src="https://imonet.jd.com/#/screen?key=1e7b25764a284821abc46f705d6ad26a" 
               style={divStyle}>
      </iframe>

3. 检测变量状态

   window.onmessage = (mData) => {
     const {data:{dataPool}} = mData
     const {tabs} = dataPool
     switch(tabs){
       case 1:
         setPageContent('选择了第一个页签')
         break;
       case 2:
         setPageContent('选择了第二个页签')
         break;
       case 3:
         setPageContent('选择了第三个页签')
         break;
     }
   };

---

DEMO地址：https://gitee.com/jy-office/m...
送人玫瑰，手留余香，觉得有收获的朋友可以给笔者点赞，关注一波 ，陆续更新莫奈硬核文章