@gaoding/open-sdk

• 稿定设计开放平台对接SDK。

安装

npm install @gaoding/open-sdk@v2-latest

或

yarn add @gaoding/open-sdk@v2-latest

使用

import { createOpenSDK, PageEventTypes, COMMON_EVENT_NAME, EditorModes } from '@gaoding/open-sdk';

// 初始化SDK
const openSDK = createOpenSDK({
    // 指定容器，若为空则以弹窗的方式打开
    container: '#container',
    async authorize(params) {
        // 与开发者自己的服务端通信，在服务端发起POST请求获取授权码，最后返回授权码
        // 注意：因授权码有有效期限制，故需在此处进行接口请求，不可提前请求拿到code进行保存
        // 注意：authorize方法需要支持在发起请求的时候将params入参合并作为请求接口请求参数
        return fetch('开发者自己后端接口地址', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify(Object.assign({ uid: "当前的用户标识" }, params)),
        })
            .then(res => res.json())
            .then(res => {
                // 请确认该返回值是字符串数据格式包含如下字段
                // { code: 'xxxxxx', user_id: 'xxxxxxxxxx' }
                return res.data;
            });
    },
    // ...
});


// 打开模板中心页
openSDK.openTemplateList({
    // 页面参数
    query: {
        disabledModules: 'xxxx',
    },
    configCode: 'XXXX'
});

// 监听通用的COMMON_EVENT_NAME事件，判断事件类型为PageEventTypes.TEMPLATE_SELECT，进行回调事件处理
openSDK.on(COMMON_EVENT_NAME, ({ type, payload }) => {
    if (type === PageEventTypes.TEMPLATE_SELECT) {
        const template: TemplateSelectResult = payload;
        console.log(template);
        // 判断模板的类型
        // 如果是H5模板，打开H5模板编辑器
        if(isH5Template(template)){
            openSDK.openH5TemplateEditor({
                query: {
                    id: template.id,
                    mode: EditorModes.CREATE_USER_TEMPLET_FROM_COMPANY,
                },
                configCode: 'XXXX'
            });
            return;
        }
        // 打开平面模板编辑器。
        openSDK.openTemplateEditor({
            query: {
                id: template.id,
                mode: EditorModes.CREATE_USER_TEMPLET_FROM_COMPANY,
            },
            configCode: 'XXXX'
        });
    } else if (type === PageEventTypes.EDITOR_SAVE) {
        // 代表是手动触发右上角保存按钮
        if(payload.from === 'save'){
            openSDK.close(); // 直接关闭编辑器
        }
        // 如果是新增操作，拿到workId，保存到数据库中
        // 其他业务操作...
    } else if (type === PageEventTypes.EDITOR_DOWNLOAD) {
        // 代表是手动触发右上角下载按钮
        if(payload.from === 'download'){
            openSDK.close(); // 直接关闭编辑器
        }

        // 如果是新增操作，拿到workId，保存到数据库中

        // 对结果进行下载，仅供参考
        // 优先取data.files内的值，其次取data.urls内的值，
        // 因部分导出类型如pdf，会由服务端转化为链接。
        const file = payload.files ? payload.files[0] : payload.urls[0];
        const title = payload.title;
        const type = payload.type;
        const url = typeof file === 'string'? file: URL.createObjectURL(file);
        const a = document.createElement('a');
        a.href = url;
        a.target = '_blank';
        a.download = `${title}.${type}`;
        a.click();
    }
});

API

createOpenSDK Config

参数	类型	默认值	说明
authorize	authorize(params: AuthorizeParams): Promise<CodeInfo>;	null	获取授权信息码
container	string | HTMLElement	null	指定容器，若为空则以弹窗的方式打开
iframeProps	IframeProps	null	自定义覆盖 iframe 的样式及类名
modalProps	IframeModalProps	null	自定义覆盖 modal 弹窗的样式
onCloseModal	(...args: any[]) => Promise<void | boolean> | void | boolean	null	以弹窗形式打开时，点击关闭按钮时触发关闭弹窗操作，但如果函数返回 false 则会终止关闭弹窗（该方法可用于防止用户误操作关闭）

类型

// 透传给接口的能力编码入参
interface AuthorizeParams {
    ability_code?: string;
}

// 接口返回的授权码信息
interface CodeInfo {
    code: string;
    user_id: string;
}

interface IframeProps {
    // iframe 样式
    css?: Object | string;
    // iframe 类名
    className?: string;
}

interface IframeModalProps {
    // 整个弹窗最外层元素的样式
    wrapperStyle?: string;
    // 关闭按钮外层元素的样式
    btnStyle?: string;
    // 弹窗的类名
    modalClass?: string;
    // 弹窗的样式
    modalStyle?: string;
    // 遮罩层的样式
    maskStyle?: string;
    // 关闭按钮
    btnIcon?: HTMLElement;
}

createOpenSDK 返回值

参数	类型	说明
openTemplateList	(options: TemplateListOptions) => void	打开WEB模板中心页面方法
openEnterpriseTemplateList	(options: EnterpriseTemplateListOptions) => void	打开WEB企业模板中心页面方法
openTemplateEditor	(options: TemplateEditorOptions) => void	打开平面模板编辑器页面方法
openMobileTemplateList	(options: MobileTemplateListOptions) => void	打开移动端模板中心页面方法
openMobileTemplateEditor	(options: MobileTemplateEditorOptions) => void	打开移动端平面模板编辑器页面方法
openBatchMark	(options: TemplateEditorOptions) => void	打开标注页面方法
openBatchDesign	(options: TemplateEditorOptions) => void	打开批量套版页面方法
openSizeExtension	(options: TemplateEditorOptions) => void	打开尺寸延展页面方法
openH5TemplateEditor	(options: H5TemplateEditorOptions) => void	打开H5模板编辑器方法
openH5TemplateDashboard	(options: H5TemplateDashboardOptions) => void	打开H5作品数据方法
open	(options: PageOptions) => void	打开具体页面的方法
emit	(type: string, payload?: any) => void | Promise<any>	触发页面事件的方法，可异步获取返回值
on	(type: string, handler: Function) => void	监听页面内事件的方法
once	(type: string, handler: Function) => void	监听页面内事件的方法，仅触发一次
off	(type: string, handler: Function) => void	取消监听事件的方法
close	(triggerOnCloseModal?: boolean, ...args: any[])=> void	关闭页面的方法。在弹窗模式下，传入 triggerOnCloseModal 为 true，可触发 onCloseModal 判断逻辑

SDK页面类型

interface TemplateListOptions {
    /**
     * 页面参数
     */
    query?: Record<string, any>;
}

interface H5tTemplateEditorOptions extends EditorOptions {
    /**
     * 编辑器操作前的回调
     */
    onBeforeAction?: (info: {
        type: 'save' | 'confirmDownload' | 'confirmPublish' | 'unpublish';
    }) => boolean | Promise<boolean>;
}

interface EditorOptions {
    /**
     * 页面参数
     */
    query?: EditorQuery;
    /**
     * 编辑器操作前的回调
     */
    onBeforeAction?: (info: { type: any }) => boolean | Promise<boolean>;
}

interface EditorQuery {
    /**
     * 配置ID
     */
    configCode?: string;
    /**
     * 模板ID
     */
    id?: string | number;
    /**
     * 打开编辑器页面的模式
     */
    mode?: EditorMode;
    /**
     * 企业库ID
     */
    repositoryId?: string | number;
    /**
     * 部分模块可配置隐藏，多个模块用逗号“,”分隔
     * @example 'templet,element,text'
     */
    disabledModules?: string;
    /**
     * 支持下载的格式配置，多个格式用逗号“,”分隔
     * 默认下载格式会读取 exportTypes 的第一个格式
     * @example 'jpg,png'
     */
    exportTypes?: string;
    /**
     * 设置多页下载类型，默认取第一个下载方式进行下载，0分页，1拼接
     * @example '0,1'
     */
    exportPageTypes?: string;
    /**
     * 自定义右上角操作按钮
     * 模板编辑器中value可选值 => download: 下载, save: 保存
     * H5模板编辑器中value可选值 => preview: 预览, share:分享, confirmDownload: 下载, save: 保存, publish: 发布
     */
    actions?: { label: string; value: string }[];
    /**
     * 是否展开左侧栏，以及展开哪个栏目
     */
    sideMode?: number | string;
    /**
     * 点击下载按钮, 是否需要下载确认弹窗
     * 0: 弹出确认弹窗, 1: 跳过确认弹窗
     */
    skipExportConfirm?: number;
    /**
     * 模板的来源，gaoding: 稿定模板
     */
    from?: string;
    /**
     * 从模板中心页带入的分类数据
     */
    filterParams?: Record<string, any>;
    /**
     * 自定义左侧栏tab
     */
    tabs?: string[];
    /**
     * 自定义扩展应用
     */
    extensions?: CustomExtension[];
}

其他

更多信息请移步 稿定开放平台SDK使用指南

维护者

• [e-mail]