npm安装,微信官方 npm 文档
npm i @gaoding/editor-miniprogram-sdk
在你的页面 page.json 中添加
{
"usingComponents": {
"editor-miniprogram-sdk": "@gaoding/editor-miniprogram-sdk"
}
}不使用构建工具序安装,拷贝仓库中 components 下的文件到项目中的放组件的目录,同样需要在页面配置json中声明
{
"usingComponents": {
"editor-miniprogram-sdk": "../../components/editor-miniprogram-sdk/editor-miniprogram-sdk"
}
}其他第三方框架引用
| 字段 | 类型 | 说明 | 示例 |
|---|---|---|---|
| currentPage | String | 当前访问页面 | templates/design/complete |
| thirdPartyUserCode | String | 授权信息,第三方账号接入, 详情见下方文档 | 5e0818ee84d9453db6b4a4c3895a269c |
| thirdCateId | String | 分发渠道 ID(数据源) | 112 |
| templatesPage? | String | 模板中心路由(用于在 webview 跳转) | wx.miniprogram.navigateTo('/pages/templates/templates') |
| designPage? | String | 编辑页路由 | wx.miniprogram.navigateTo('/pages/design/design') |
| completePage? | String | 完成页路由 | wx.miniprogram.navigateTo('/pages/complete/complete') |
currentPage = templates 时
<editor-miniprogram-sdk
templatesPage="/pages/index/index"
designPage="/pages/design/design"
completePage="/pages/complete/complete"
thirdPartyUserCode="{{thirdPartyUserCode}}"
thirdCateId="112"
currentPage="templates"></editor-miniprogram-sdk>
currentPage = design 时
| 字段 | 类型 | 说明 | 示例 |
|---|---|---|---|
| templateId | String | 模板ID/作品ID | 124567 |
| mode | String | id 为作品 ID 时值必须为 userid 为分发渠道模板时值必须为 company |
company/user |
<editor-miniprogram-sdk
templatesPage="/pages/index/index"
designPage="/pages/design/design"
completePage="/pages/complete/complete"
thirdPartyUserCode="{{thirdPartyUserCode}}"
thirdCateId="112"
currentPage="design"
mode="{{query.mode}}"
templateId="{{query.id}}"></editor-miniprogram-sdk>
currentPage = complete 时
且该页面接收编辑页完成后的结果
| 字段 | 类型 | 说明 | 示例 |
|---|---|---|---|
| templateId | String | 作图记录ID | 1234567 |
| sourceId | String | 原模板ID | 7654321 |
| image | String | 图片地址 | https://gd-filems-fat.my-static.dancf.com/saas/4149m9/-1813-453b-a91d-b263bb2901a02435.png |
若要支持分享等其他能力,建议自定义完成页
<editor-miniprogram-sdk
templatesPage="/pages/index/index"
designPage="/pages/design/design"
completePage="/pages/complete/complete"
currentPage="complete"
thirdPartyUserCode="{{thirdPartyUserCode}}"
image="{{query.image}}"
templateId="{{query.id}}"
sourceId="{{query.sourceId}}"></editor-miniprogram-sdk>