模板/图片编辑器

接入前小程序配置

因为编辑器是通过 web-view 的方式来实现，所以需要进行业务域名配置，使得编辑器能够在小程序内正常访问，
操作如下：

1. 登录微信小程序管理账号 https://mp.weixin.qq.com/
2. 进入开发设置，新增业务域名: https://open.gaoding.com
3. 下载「校验文件」
4. 打开开放平台控制台
5. 进入应用详情，点击上传微信校验文件

6.上传校验文件

7.打开小程序控制台，对添加的域名 open.gaoding.com 进行报保存

接入 SDK

通过 npm 方式安装

npm install @gaoding/wechatapp-editor-sdk

小程序的 npm 比较特殊，需要通过开发者工具构建一次 npm 具体使用方式

构建完毕后会生成目录 miniprogram_npm, 生成完毕后在 app.json 添加页面 miniprogram_npm/@gaoding/wechatapp-editor-sdk/design 。

{
  "pages":[
    "pages/index/index",
    "miniprogram_npm/@gaoding/wechatapp-editor-sdk/design"
  ]
}

初始化

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

const { gaoding } = require('@gaoding/wechatapp-editor-sdk');

gaoding.init({
  	appId: 'xxx',// 在控制台应用管理中查看
    // 这里返回的是和服务通信获得的授权码 code
    authorize() {
        // 示例代码如下
        return new Promise((resolve, reject) => {
            wx.request({
                url: 'xxx', //后端服务地址
                method: 'POST',
                data: { uid: '123' },
                success: (result) => {
                		// 请确认该返回值是字符串
                		console.log(result.data.code);
                    resolve(result.data.code);
                },
                fail: (err) => {
                    console.error('获取授权码失败:', err);
                    reject(err);
                },
            });
        });
    },
});

打开模板中心

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

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

打开指定模板

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

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

修改用户模板

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

Page({
    onTap() {
        /** 这里的 res 是一个操作结果数据
         * 如果为 null 表示 用户进行了中断操作，没有完成做图。
         * 如果有数据那么 res 格式为 { image: string; };
         * image 表示做图后的图片地址
         */
         这边传入的id为，通过完成作图后得到的 workId 字段
        gaoding.editorTemplate('xxxxx').then((res) => {
            if (res === null) {
                my.alert({ title: '没有完成做图' });
            } else if (res.image) {
                this.setData({
                    image: res.image,
                });
            }
        });
    },
});

导入图片

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

Page({
    onTap() {
        /** 这里的 res 是一个操作结果数据
         * 如果为 null 表示 用户进行了中断操作，没有完成做图。
         * 如果有数据那么 res 格式为 { image: string; };
         * image 表示做图后的图片地址
         */
        gaoding.importImage('https://st0.dancf.com/static/02/202104280136-0091.png').then((res) => {
            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
     */
    openToTemplateList(): Promise<{ image: string; workId: string } | null>;
    /**
     * 打开编辑器
     *
     * @param {string} id 作品或者模板ID
     * @param {('company' | 'user')} mode company: 企业模板, user: 用户模板
     * @returns {({ image: string } | null)}
     * @memberof SDK
     */
    openTemplate(id: string): Promise<{ image: string; workId: string } | null>;
    /**
     * 打开图片编辑器导入图片
     *
     * @param {string} id 作品或者模板ID
     * @param {('company' | 'user')} mode company: 企业模板, user: 用户模板
     * @returns {({ image: string } | null)}
     * @memberof SDK
     */
    importImage(url: string): Promise<{ image: string; workId: string } | null>;
    /**
     * 初始化配置
     *
     */
    init(options: {
        /**
         * 获取用户授权码 必填。
         *
         * @returns {Promise<string>}
         */
        authorize(): Promise<string>;
        /**
         *  应用, 必填
         */
        appId: string;
    }): void;
}

获取作图结果

点击查看获取用户作图结果