模板/图片编辑器
特别说明：微信小程序的模板设计SDK已停止售卖，请联系商务查看高阶版本的微信小程序模板设计SDK。
编辑器是基于 web-view 组件实现， 所以不支持个人小程序
接入前小程序配置
因为编辑器是通过 web-view 的方式来实现，所以需要进行业务域名配置，使得编辑器能够在小程序内正常访问，
操作如下：
- 登录微信小程序管理账号 https://mp.weixin.qq.com/
- 进入开发设置，新增业务域名: https://open.gaoding.com
- 下载「校验文件」
- 打开开放平台控制台
- 进入应用详情，点击上传微信校验文件
6.上传校验文件
7.打开小程序控制台，对添加的域名 open.gaoding.com 进行保存
接入 SDK
通过 npm 方式安装
<code>npm install @gaoding/wechatapp-editor-sdk</code>小程序的 npm 比较特殊，需要通过开发者工具构建一次 npm 具体使用方式
构建完毕后会生成目录 miniprogram_npm, 生成完毕后在 app.json 添加页面 miniprogram_npm/@gaoding/wechatapp-editor-sdk/design 。
<code>{
"pages":[
"pages/index/index",
"miniprogram_npm/@gaoding/wechatapp-editor-sdk/design"
]
}
</code>初始化
使用前需要进行初始化， 可以写在 app.js 文件中，也可以在写在承载页 js 中。
<code>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);
},
});
});
},
});</code>打开模板中心
<code>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,
});
}
});
},
});</code>打开指定模板
<code>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,
});
}
});
},
});</code>修改用户模板
<code>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,
});
}
});
},
});</code>导入图片
<code>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,
});
}
});
},
});</code>SDK 方法
<code>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;
}</code>