@skylla/sdk

everything can be visual !

Usage no npm install needed!

<script type="module">
  import skyllaSdk from 'https://cdn.skypack.dev/@skylla/sdk';
</script>

README

SDK 说明文档

PS:Visual SDK 采用 postMessage 作为消息通信机制

The APIs

调用示例

// import api from sdk
import { print, preview, pdf, copy } from '@skylla/sdk/api';

// use print
print({ host, query }, { resource, content });

消息监听 与 消息发送

// import message api from sdk
import { bindMessage, sendMessage } from '@skylla/sdk/api';

// 全局唯一消息绑定
await bindMessage({
  // 例:监听打印完成状态
  async onPrintComplete() {
    /* do something ... */
  },
});

// 在需要时发送消息
await sendMessage({
  mode: 'onPrintWork',
  data: {
    /* params */
  },
});

设计风格

1. SDK 所提供 API,均以 async/await 风格编写
2. 响应监听的命名风格:`on${Api}Complete`,如:onPrintComplete

完整调用示例

// import api from sdk
import { print, preview, pdf, copy } from '@skylla/sdk/api';

// Set Host
const host = 'https://lcp.qianjiangcloud.com';

// Set Query
const query = { id: 100 };

// 打印
await print({ host, query }, content);

// 预览
await preview({ host, query }, content, { width, height });

// PDF(返回 PDF 流)
await pdf({ host, query }, content);

// 拷贝 ID
await copy({ host, query });

加载平台相关事件(iframe)

await bindMessage({
  // 当平台界面完成初始化工作后,会向调用方发送 message
  async onVisualReady() {
    await sendMessage({ mode: 'onVisualWork', data: { /* any */ } }, <iframe.contentWindow>);
  }
});

VUE

import { dragger, iVueFrame, resizable, VueDraggable, VueDraggableDirective } from '@skylla/sdk/vue';