稿定企业版微信小程序编辑器 SDK

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

接入 SDK

通过 npm 方式安装

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

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

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

比如需要创建一个地址为 /pages/gaoding/index 的页面

pages/gaoding/index.wxml

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

pages/gaoding/index.js

Page({
    /**
     * 页面的初始数据
     */
    data: {
        query: null,
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        this.setData({ query: options });
    },
});

pages/gaoding/index.json

{
    "usingComponents": {
        "gaoding-design": "@gaoding/enterprise-wechatapp-editor-sdk/design"
    }
}

初始化

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

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

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

业务域名配置

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

1. 登录微信小程序管理账号 https://mp.weixin.qq.com/
2. 进入开发设置，新增业务域名: sdk.open.gaoding.com
3. 获取「校验文件」，请联系稿定对接人员，并将文件发送给对接人员

打开模板中心

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

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

打开指定模板

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

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