饿了么开放平台连锁运营渠道场景接入方案示例代码(Demo)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>UI SDK DEMO|饿了么商家开放平台</title>
<style>
/* 移除 body 的默认边距，并设置高度为 100% */
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden; /* 防止出现滚动条 */
}
/* 使 iframe 充满整个页面 */
#uisdk_iframe {
width: 100%;
height: 100%;
border: none; /* 移除边框 */
}
</style>
</head>
<body>
<!-- UI-SDK 的 iframe 容器 -->
<iframe id="uisdk_iframe" src="https://uisdk.faas.ele.me?source=isv" >
</iframe>
<script>
// 获取 iframe 元素
const uisdkIframe = document.getElementById('uisdk_iframe');
let childWindow = uisdkIframe.contentWindow;
// 监听来自子页面的消息
window.addEventListener('message', (event) => {
const { type } = event.data || {};
if (type && type === 'ELE_UI_SDK_INITED') {
// 门店信息准备
const shopsData = {
type: "ELE_UI_SDK_SHOP_CHANGED",
data: {
shopsInfo: [
{
// 1111, 2222, 3333, 4444 共享一个key和token
// 出于安全考虑，不要把密钥信息直接写在客户端的代码中
appInfoParam: {
appKey: "******",
token: "********",
},
shopIds: [1111, 2222, 3333, 4444],
}
,
{
// 555, 666, 777, 888 共享一个key和token
appInfoParam: {
appKey: "******",
token: "********",
},
shopIds: [555, 666, 777, 888],
}
]
}
};
// 向子页面发送门店列表数据消息（出于安全考虑，生产环境应该使用具体的源，不要使用*）
childWindow.postMessage(shopsData, "*");
}
});
</script>
</body>
</html>
