扩展应用
接入流程
流程图
方案提报与审核
在正式引入服务之前，服务商需根据官方定义的场景和功能需求，设计出初步原型并提报PRD。随后，平台将对所提交的功能范围进行严格审核，并给到专业的建议与反馈，以确保最终方案的准确性和可行性。
请按照模板要求进行方案提报：产品方案提报模板（请创建副本后使用）
设计稿验收
服务商在正式开发前，需要按照本文【标准与规范】中的设计规范，交付主要页面的产品设计稿。
说明：文件格式需使用如Figma、MasterGo等主流视觉设计工具，或直接截图归档在钉钉文档中，但要求截图清晰。
1） 验收输入：服务商将设计稿发送给平台小二，平台将组织产品、设计进行验收。
2） 验收输出：页面整改建议，服务商根据整改建议修改后在钉钉群反馈给平台，平台与服务商双方确认终稿无误后，服务商即可启动开发。
产品效果验收
服务商在完成产品研发后，平台将与服务商组织产品效果验收会。请服务商前置按照设计自查完成自查后再提交平台。
1）验收输入：组织验收会，服务商对产品内容向平台演示。
2）验收输出：产品效果修改建议（如果问题较多需再组织一次验收），服务商根据修改建议修改后，后续可以操作上线。
验收项 |
验收内容 |
验收标准 |
视觉效果 |
需要在第一阶段按照视觉稿还原具体功能的设计效果，保证高还原度实现（建议服务商在发起产品效果验收前，先内部和设计做一次设计验收）。 |
1、和第一阶段交付的设计稿高度还原。 2、符合平台给予的页面内容布置参考及千牛规范要求。 |
功能使用效果 |
在演示功能上使用主流程。 |
1、稳定性：功能使用流畅，无白屏卡顿。 2、易用性：功能操作简单易用。 3、有效性：保障制作的海报/商品详情可被成功发布。 |
上线验收
服务商在通过产品效果验收后，根据平台反馈的建议，完成产品效果最终的修复，最终进行上线
1）验收输入：产品录屏。
2）验收输出：可上线/不可上线（不可上线理由）。
- |
录屏内容 |
验收标注 |
产品验收流程录屏 |
在演示过程中，完成产品效果验收环节的所有操作步骤的录屏。 |
平台在产品效果过程中反馈的问题全部修复，满足平台上线要求。 |
标准与规范
注意：生态伙伴需遵循以下【交付内容要求】、【技术对接方案】、【设计规范】在相关的商家场景实现对应能力。
交付内容要求
根据不同场景，淘宝开放团队会定义不同的功能。开发者需依据平台要求完成产品方案设计与开发。
技术对接方案
技术对接请查看开发指南，若需要定制特殊场景，平台会根据实际情况提供新的技术对接方案。
说明：建议前端技术方案支持页面自适应，以防容器尺寸调整导致的视觉问题。
设计规范
为设计/研发流程提供完善灵活的基建，帮助设计师和开发者进行高效的工作，在扩展应用设计中，请遵循设计规范产出「产品交互原型图」并实现交互视觉效果。
开放能力
坑位描述
开放区域见下方示意图中：应用功能区、功能菜单、帮助中心手册及答疑的客服旺旺。
注意：开发者开发前端过程中，需要使用自适应模式开发，以便适应千牛客户端容器尺寸调整。
1）应用功能区：总宽度 720px，内容区 676px，菜单栏 44px，高度未做限制，四周边距 18px。
2）功能菜单区：最多只能新增 6 个功能菜单，且每个菜单名称不能超过 4 个字符。
3）帮助中心手册：服务商用于配置相关使用手册内容。
4）客服旺旺：服务商配置在线答疑入口。
说明：配置方式请见下方通信接口（TOP API）模块内容，规范请参考设计规范。
代码示例：
{
"components": [
{
"name": "block",
"path": "pages/SectionBlank" // 改成你的代码文件地址
}
]
}
通信接口（TOP API）
通信内容主要包括注册菜单、切换菜单、菜单切换事件、获取答疑旺旺及获取帮助文档等， 更多说明和示例请参考下方介绍：
注册菜单
目前开放的能力中服务商主要实现两块内容分别为：
1）内容模块：完全是服务商通过代码进行绘制。
2）功能区：功能区菜单是通过调用 平台提供的API进行注册，例如详情制作、制作记录及常用模板等菜单，便是调用平台 API进行注册的。
2.1）API 名称：my.extendApp.registerSideBar
2.2）API 类型
type RegisterSideBar = (params: {
menuList: Array<{
/**
* 菜单 id
*/
readonly id: string;
/**
* 菜单 中文名称
*/
readonly label: string;
/**
* 菜单 非激活状态下的 icon
*/
readonly icon: string;
/**
* 菜单 非激活状态下的 icon
*/
readonly activeIcon: string;
}>
}) => Promise<void>;
2.3）调用示例
my.extendApp.registerSideBar({
menuList: [
{
label: '详情制作',
id: 'detail',
icon: 'https://gw.alicdn.com/imgextra/i4/O1CN01kar5na1SOb0M40VLY_!!6000000002237-2-tps-40-40.png',
activeIcon: 'https://gw.alicdn.com/imgextra/i1/O1CN01EUVgZi1zUtm8Hq3Cm_!!6000000006718-2-tps-40-40.png',
},
{
label: '制作记录',
id: 'history',
icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01j0jakG1NXgmqn8qVP_!!6000000001580-2-tps-40-40.png',
activeIcon: 'https://gw.alicdn.com/imgextra/i2/O1CN014Cy8ZP1u4GfOQAH7v_!!6000000005983-2-tps-40-40.png',
},
{
label: '常用模板',
id: 'common',
icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01UkS7S625WcxtOWbZ1_!!6000000007534-2-tps-40-40.png',
activeIcon: 'https://gw.alicdn.com/imgextra/i4/O1CN01leZQ3E2A72vBlvP7d_!!6000000008155-2-tps-40-40.png',
},
],
});
2.4）调用效果
切换菜单
服务商可以通过这个 API 主动切换平台框架菜单。
1）API 名称：my.extendApp.pushMenu
2）API 类型
type PushMenu = (params: {
/**
* 菜单 ID
*/
id: string;
/**
* 菜单切换时携带的参数
*/
payload: unknown
}) => Promise<void>;
3）调用示例
my.extendApp.pushMenu({
id: 'detail',
payload: {
query1: 'a',
query2: 'a',
},
});
4）调用效果
制作详情功能会变成高亮效果，如下图所示：
菜单切换事件
当用户点击菜单某一项或菜单路由发生切换时，平台会向服务商发送当前变化的菜单信息。
1）事件名称：routeChange
2）调用示例
my.on('routeChange', (params) => {
/**
* 这里的 params 就是路由跳转时携带的参数
*/
console.log('routeChange params is : ',params);
});
获取答疑旺旺
当用户点击底部的客服旺旺功能时，平台会向服务商发起一个 SPI 调用获取当前应用的答疑旺旺账号。
1）SPI 名称：returnServiceNick
2）调用示例
在项目根目录 spi.js文件导出 returnServiceNick这个方法。
const returnServiceNick = async () => {
try {
/**
* 在这里执行 isv 自己的客服分发逻辑
* 平台会在商家点击 答疑旺旺 时调用这个 Spi
*/
return { nick: '商家测试帐号xxxxxx' }
} catch (error) {
console.error('error : ', error);
}
}
export default {
returnServiceNick
}
获取帮助文档
当用户点击底部的帮助文档时，平台会向服务商发起一个 SPI 调用获取当前应用的帮助文档链接。
1）SPI 名称：returnHelpDoc
2）调用示例
在项目根目录 spi.js文件导出 returnHelpDoc这个方法。
const returnHelpDoc = async () => {
try {
/**
* 在这里执行 isv 自己的帮助文档链接分发逻辑
* 平台会在商家点击 帮助文档 时调用这个 Spi，若不注册则由官方帮助文档兜底
*/
return 'https://www.taobao.com'
} catch (error) {
console.error('error : ', error);
}
}
export default {
returnHelpDoc
}
开发流程
准备工作
在正式开发前，您需要做以下准备工作：
1）已经熟悉了什么是扩展应用，如需查看请参考什么是扩展应用。
2）根据开发者身份入驻淘宝开放平台，如需入驻请参考淘宝服务小程序接入指南。
3）已经在淘宝官网下载并安装了淘宝开发工具。
4）已经在千牛工作台下载并安装了千牛系统。
开发应用
注意：开发者开发前端过程中，需要使用自适应模式开发，以便适应千牛客户端容器尺寸调整。
1） 创建应用
说明：下方为两个场景的不同创建方式，根据实际需求选择其中一个即可。
1.1）创建 AI 智能插件
1.2）创建淘宝节点小程序
2） 对接服务场景
3） 节点页面开发
资源对接与验收
1） 资源对接
2） 验收审核
发布与上线
1） 小程序发布上线
2） 任务组上线
3） 服务发布上线
