小鹅通组件

# 安装

cnpm i @xiaoe/sense -S
1

# 引入

import {Canva} from '@xiaoe/sense'
1

# 初始化

const canva = new Canva({
  defaultDocType: 1,
  defaultStatus: 2,
  onStatusChange: (status)=> {...},
  pagePath: '',
  pageId: '',
  pageName: '',
  pageScene: '',
})
1
2
3
4
5
6
7
8
9
参数 类型 必填 描述
defaultDocType Number 否 不传入docType id时的默认docType id
defaultStatus Number 否 canva初始化前的状态, 0-正常 1-维护 2-隐藏 3-店铺需升级, 默认2
onStatusChange Function 否 canva状态改变时触发，接收一个Number类型参数，即canva的状态
pagePath String 否 埋点参数
pageId String 否 埋点参数
pageName String 否 埋点参数
pageScene String 否 埋点参数, 对应cmm2，用于区分同页面上的不同场景(组件)

# 使用

# 新建设计

新建设计，可以从docType新建，也可以通过design Id进行复制，也可通过media Id填充对应图片。

// 1. 调起docType选择弹窗，新建设计
canva.create({
	showTypePannel: true,
	withFile: true,
	fileName: 'test.png',
	onConfirmType: (type) => {...},
	success: ({designId, exportUrl, file}) => {...}
})
// 2. 通过designId新建，即复制
canva.create({
	designId: '',
	success: ({designId, exportUrl} => {...})
})
// 3. 通过mediaId新建，即使用用户上传过的图片
canva.create({
	mediaId: '',
	width: 200,
	height: 100,
	success: ({designId, exportUrl} => {...})
})
// 4. 通过docType创建
canva.create({
	type: 1,
	width: 200,
	height: 100,
	success: ({designId, exportUrl} => {...})
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

参数

参数 类型 必填 描述
showTypePannel Boolean 否 是否调起docType选择弹窗，默认false
designId String 否 在线设计的design Id
mediaId String 否 用户上传图片的media Id
type Number 否 docType id
width Number 否 在线设计画布宽度，传入media Id或type时必选
height Number 否 在线设计画布高度，传入media Id或type时必选
withFile Boolean 否 是否返回图片File对象，默认false
fileName String 否 File对象文件名，默认为当前时间字符串.png，例: 202107231442.png
onConfirmType Function 否 用户选择完docType回调，参数为docType对象
success Function 否 成功回调，接收一个参数 {designId, exportUrl, file}

返回值

类型 描述
Number canva sdk 目前状态 0-正常 1-canva错误 2-隐藏canva 3-店铺需升级

# 编辑设计

编辑设计，通过传入material Id查找素材对应的design Id或media Id, 查到designId时，进行复制并编辑；查到mediaId时填充图片；都未查到或未传入material Id则上传图片至canva再填充。

canva.edit({
	materialId: '...',
	url: '...',
	width: 200,
	height: 100,
	withFile: true,
	fileName: 'test.png',
	success: ({exportUrl, designId, file}) => {...}
})
1
2
3
4
5
6
7
8
9

参数

参数 类型 必填 描述
materialId String 否 素材id
url String 是 图片url
width Number 是 图片宽度
height Number 是 图片高度
withFile Boolean 否 是否返回图片File对象，默认false
fileName String 否 File对象文件名，默认为当前时间字符串.png，例: 202107231442.png
success Function 否 成功回调，接收一个参数 {designId, exportUrl, file}

返回值

类型 描述
Number canva sdk 目前状态 0-正常 1-canva错误 2-隐藏canva 3-店铺需升级

# 上传

上传图片至canva

canva.upload({
	url: '...',
	materialId: '...',
	fileName: 'test.png',
	success: (mediaId) => {...}
})
1
2
3
4
5
6

参数

参数 类型 必填 描述
url String 是 图片url
materialId String 否 素材id，传入时可上报该素材对应的mediaId
fileName String 否 File对象文件名，默认为当前时间字符串.png，例: 202107231442.png
success Function 否 成功回调，接收一个参数 mediaId

返回值

类型 描述
Number canva sdk 目前状态 0-正常 1-canva错误 2-隐藏canva 3-店铺需升级

← GoodsSelector 商品选择器 →