ROMA资产中心 ROMA EXCHANGE-页面交互事件

时间：2024-07-03 15:57:12

页面交互事件

适配器与Roma Exchange框架有多次交互，主要通过PostMessage和AddEventListener接口实现数据通信。对于适配器页面来说，有多次发送消息事件和接收消息事件，其中每次发送数据之后，ROMA Exchange都会根据监听到的事件名触发对应的动作。

以Astro轻应用适配器的资产对象选择页为例，五次发送消息事件和一次接收消息事件分别介绍如下：

触发数据传输事件
 发布者在资产发布页单击资产对象时，适配器资产对象选择页需要获取ROMA Exchange框架传来的“资产来源标识（sourceId）”、“资产来源参数（sourceAttributes）”。

其中，“资产来源标识”用来调接口获取资产对象数据；“资产来源参数”包含了从草稿中获取的数据，用于数据回显；“地址信息”包含了适配器鉴权页的跳转地址，用于未授权情况下的页面跳转。

因此，适配器需执行触发动作给ROMA Exchange，ROMA Exchange监听到该事件时，就会触发数据传递动作。

代码示例：

created () {
let eventObj = {
eventName: 'PARENT_EVENT'
params: {
message: 'loading'
}
};
parent.postMessage(JSON.stringify(eventObj),'*');
},
1. 传递页面高度数据
   资产对象选择页渲染前，会传递一个页面高度和宽度的数据给ROMA Exchange框架，用以调整弹窗的高度和宽度。

代码示例：

mounted () {
let div = document.getElementById("***AdaptorConfigWidget");
let eventObj = {
eventName: 'PAGELOAD_EVENT',
params: {
height: div.offsetHeight,
width: div.offsetWidth
}
};
parent.postMessage(JSON.stringify(eventObj),'*');
},
1. 确定事件后传递数据
   选择资产对象之后单击确认按钮，适配器会给ROMA Exchange框架传递选择的资产对象数据
  
  代码示例：
  
  confirmFun () {
let eventObj = {
eventName: 'CONFIRM_EVENT',
params: {
sourceAttributes:{
items: this.items,
sourceId: this.sourceId,
assetData***: this.assetData***
}
1. }
};
parent.postMessage(JSON.stringify(eventObj),'*');
},
1. 取消事件后传递信息
   单击取消按钮后，适配器会给ROMA Exchange上架框架传递信息，以提示框架进行弹窗关闭操作。
  
  代码示例：
  
  cancelFun () {
let eventObj = {
eventName: 'CONCEL_EVENT',
params: {
message: 'Cancel!'
1. }
};
parent.postMessage(JSON.stringify(eventObj),'*');
},
1. 传递提示信息
   当有警示信息或者异常情况时，适配器会传递提示信息给外层框架，以在外层展示提示信息。
  
  代码示例;
  
  messageFun () {
let eventObj = {
eventName: 'MESSAGE_EVENT',
params: {
message: 'Warning!'
1. }
};
parent.postMessage(JSON.stringify(eventObj),'*');
},
1. 接收数据
   在触发事件传输事件之后，ROMA Exchange会传递资产来源的相关数据给适配器。
  
  代码示例;
  
  created() {
  
  const DICT = {
  
  DATA_EVENT: dataFun,
  
  }
  
  function dataFun (e) {
  
  this.sourceId = e.sourceId
  
  }
  
  window.addEventListener("message", function (e) {
  
  var event = JSON.parse(e.data)
  
  DICT[event.eventName](event.params)
  
  })
},
因此，适配器中资产对象选择页需要约定以下几个事件：

页面事件类型	事件名称	事件解释
Item消息发送事件	PARENT_EVENT	触发数据传输
	PAGELOAD_EVENT	发送高度
	CONFIRM_EVENT	确定
	CANCEL_EVENT	取消
	MESSAGE_EVENT	提示消息
Item消息接收事件	DATA_EVENT	接收数据