稿定企业版阿里系小程序编辑器 SDK

编辑器是基于 web-view 组件实现， 所以请提前申请 h5 白名单 h5 域名地址为 https://sdk.open.gaoding.com

接入 SDK

通过 npm 方式安装

npm install @gaoding/enterprise-aliapp-editor-sdk

说明：由于 @gaoding/enterprise-aliapp-editor-sdk 使用了 ES6, 需要在小程序项目的根目录下，新建一个文件 mini.project.json，填入以下内容:

{
  
  "node_modules_es6_whitelist": [
     "@gaoding/enterprise-aliapp-editor-sdk"
  ]
}

因为小程序目前无法直接支持引用 node_modules 内页面，需要手动新增一个页面来承载稿定的页面(模板中心/编辑器页面)。

创建一个地址为 /pages/gaoding/index 的稿定承载页面

pages/gaoding/index.axml

<!-- 需要将页面的 query 信息传入组件中 -->
<gaoding-design query="{{query}}"></gaoding-design>

pages/gaoding/index.js

Page({
    onLoad(query) {
        this.setData({ query });
    },
    data() {
        query: null;
    },
});

pages/gaoding/index.json

{
    "defaultTitle": "",
    "usingComponents": {
        "gaoding-design": "@gaoding/enterprise-aliapp-editor-sdk/lib/design"
    }
}

初始化

使用前需要进行初始化， 可以写在 app.js 文件中，也可以在写在承载页 js 中。

import { gaoding } from '@gaoding/enterprise-aliapp-editor-sdk';

gaoding.init({
    // 承载页地址，比如上面例子写的 /pages/gaoding/index， 注意要写绝对地址以 / 开头
    pagePath: '/pages/gaoding/index',
    // 这里返回的是和服务通信获得的授权码 code
    // 接入方式看 https://www.yuque.com/docs/share/4e30e11a-ca1e-4a69-902b-0aa8f2b70c29?#
    async getCode() {
        // 示例代码如下
        return new Promise((resolve, reject) => {
            my.tb.request({
                url: 'xxx', //后端服务地址
                method: 'POST',
                data: { uid: '123' },
                success: (result) => {
                    resolve(result.data.code);
                },
                fail: (err) => {
                    console.error('获取code失败:', err);
                    reject(err);
                },
            });
        });
    },
});

打开模板中心

import { gaoding } from '@gaoding/enterprise-aliapp-editor-sdk';

Page({
    async onTap() {
        /** 这里的 res 是一个操作结果数据
         * 如果为 null 表示 用户进行了中断操作，没有完成做图。
         * 如果有数据那么 res 格式为 { image: string; };
         * image 表示做图后的图片地址
         */
        const res = await gaoding.goToTemplatesPage({ categoryId: 12345 });
        if (res === null) {
            my.alert({ title: '没有完成做图' });
        } else if (res.image) {
            this.setData({
                image: res.image,
            });
        }
    },
});

打开指定模板

import { gaoding } from '@gaoding/enterprise-aliapp-editor-sdk';

Page({
    async onTap() {
        /** 这里的 res 是一个操作结果数据
         * 如果为 null 表示 用户进行了中断操作，没有完成做图。
         * 如果有数据那么 res 格式为 { image: string; };
         * image 表示做图后的图片地址
         */
        const res = await gaoding.openEditor('12345678', 'company');

        if (res === null) {
            my.alert({ title: '没有完成做图' });
        } else if (res.image) {
            this.setData({
                image: res.image,
            });
        }
    },
});

SDK 方法

interface SDK {
    /**
     * 打开模板中心页面
     *
     * @param {{ categoryId: string; // 分类ID }} options
     * @returns {({ image: string } | null)}
     * @memberof SDK
     */
    goToTemplatesPage(options: { categoryId: string }): Promise<{ image: string } | null>;
    /**
     * 打开编辑器
     *
     * @param {string} id 作品或者模板ID
     * @param {('company' | 'user')} mode company: 企业模板, user: 用户模板
     * @returns {({ image: string } | null)}
     * @memberof SDK
     */
    openEditor(id: string, mode: 'company' | 'user'): Promise<{ image: string } | null>;
    /**
     * 初始化配置
     *
     */
    init(options: {
        /**
         * 获取授权码， 需要服务器与稿定企业版服务通信，具体方法 https://www.yuque.com/docs/share/7cd7bf9b-ecc2-4641-af52-ddf96638268b#Y9BIF，必填。 
         *
         * @returns {Promise<string>}
         */
        getCode(): Promise<string>;
        /**
         *  设置模板中心页面标题
         *
         * @type {string}
         */
        templatesPageTitle?: string;
        /**
         * 设置编辑器页面标题
         *
         * @type {string}
         */
        editorPageTitle?: string;
        /**
         *  配置承载页地址, 必填
         */
        pagePath: string;
    }): void;
}