文档中心 > 店铺动态卡片-开发指引

店铺动态卡片-开发指引

开发配置应用

更新时间：2024/07/31 访问次数：13002

一、背景介绍

在传统的商家应用模型下，商家通过B端小程序配置消费者端小程序/小部件数据，但是在 LiveCard 场景下，配置 LiveCard 的场景在旺铺装修页面，开放平台通过配置应用打通了旺铺装修页面的配置能力，通过在开放平台开发配置应用，最后在旺铺装修表单提供给商家使用。


研发流程如下：

二、创建应用

配置应用是属于商家应用中的一种极简版配置应用的开放形式，因此创建小部件前需要先创建应用，可参考创建应用文档 。

三、创建配置应用

如果当前的商家应用类目支持配置应用，那么会透出创建配置表单的入口，如下所示。

2.1 点击「创建配置应用」。

2.2 填入配置应用的表单名称，即可成功创建配置应用。

注意：如遇“名称不合法”或“描述不合法”情况，请检查相关输入的文案，不允许输入不符合国家政策法规的文字。

2.3 上述信息如需修改，可以选中「基本信息」菜单进行修改。

四、编写代码

在淘宝开发者工具 IDE 2.3.1 及以上版本中，点击「创建项目」-> 输入项目路径 -> 项目类型选择「配置应用」-> 选择关联应用，创建配置应用项目工程。

初始化项目有会生成基础项目脚手架；

项目根目录
├── README.md
├── build               # 构建产物地址
├── config              # 构建配置
├── config.json         # 见下面介绍
├── dev.project.json    # 构建hooks
├── mini.project.json
├── node_modules
├── package.json
├── public
├── schema.json         # 见下面介绍
├── scripts             # 构建脚本
├── src                 # 源码
└── tsconfig.json

1）config.json 介绍参考：点击查看；

2）mini.project.json 介绍参考：点击查看；

3）schema.json 介绍参考：点击查看。


然后参考 配置应用-API 的相关文档，进行具体的代码编写。所有配置应用的业务代码务必在 schema.json 文件中进行配置，而配置应用与小部件的对应关系务必在config.json 文件中定义。其中，bindRelation的每个对象必须包含小部件（或小程序）的appId、小部件（或小程序）的appVersion。


同时，可以在模拟器里预览效果。

注：店铺模块表单场景请按照店铺视觉规范（https://www.yuque.com/shopisv/abqk4n/zg17lq）。


案例:

第一步：在 schema.json 定义数据结构。

{
  "jsonSchema": {
    "type": "object",
    "properties": {
      "webapp": {
        "widget": "TaobaowpCustomForm",
        "properties": {
          // 请只修改这里面的内容，不要修改外部字段，否则配置应用无法在旺铺装修生效
          // 定义提交数据的类型，对齐标准 JSONSchema
          // 例如：
          "title": {
            "type": "string"
          }
        }
      }
    }
  }
}


第二步：编写前端代码，调用 API 提交数据。

my.saveData({
  data: {
    webapp: {
      "title": "Hellp WebApp"
    }
  }
})


第三步：重新进入表单获取上次保存的数据。

my.getModuleData({
  success: (value) => {
    console.log(value); // { webapp: { title: "Hellp WebApp" } }
  }
});

五、本地 Mock 测试

为帮助开发者们快速方便地进行 getModuleData API 的调试，项目初始化会新增 mock.json 文件(淘宝开发者工具 IDE 2.3.2 及以上版本中存在，不需要可忽略)，填充 returnValue 进行 mock 测试(只能修改 returnValue 的值，格式勿动)。

{
  "apiMockData": [
    {
      "apiName": "getModuleData",
      "returnValue": {
        "key": "val"
      }
    }
  ]
}

六、上传代码

与小程序一样，通过IDE右上角的「上传」按钮，将配置应用的代码上传至控制台。

七、发布

代码上传后，可以控制台的配置应用「版本管理」菜单中看到此版本。开发者可以点击【发布】对此版本进行发布上线（无回滚功能），请开发者确保功能正常。

八、投放

在店铺 LiveCard 装修场景下，审核通过、发布、订购（第一次）后，在店铺装修侧可以看到你上传的“配置应用”。


九、FAQ

Q：配置表单 和 配置应用 有什么区别？

A: 配置表单是一个基于 JSON 描述表单的能力，配置应用是基于 Web 研发模式开发的应用来支持表单配置，且能力是图灵完备的。

Q：配置表单 和 配置应用 替换关系？

A：我们推荐使用配置应用。未来会下线配置表单能力，但目前仍可以继续使用。

Q：原先小部件会影响到吗？

A：这次我们只针对 “表单配置” 升级，不涉及到小部件的修改。

Q：配置应用是否可以调用云能力？

A：本次升级只针对渲染，不涉及到云服务相关能力的变更。

Q：配置应用编写代码有什么注意点吗?

A：本质上你可以用 JS + CSS + HTML 来写一个表单，为了安全考虑我们会限制部分能力，例如网络请求，全局 DOM 访问等。

Q：配置应用如何使用官方组件，例如图片选择器、商品选择器等？

A：我们会通过API的形式暴露给开发者调用各种官方能力，目前有4个选择器：链接选择器、商品选择器、图片选择器、券选择器，调用方法查看配置应用-API文档。

Q：表单都直接定制了，为什么还需要 schema.json？

A：schema.json 是用来定义应用行为的，里面的 jsonschema 字段用来定义提交数据的结构，是必须的。

Q：配置数据提交内容，最大限制多少？

A：配置数据内容最大限制为10kb，请合理优化提交的数据内容。

FAQ

关于此文档暂时还没有FAQ
有用(0) 我要提问
返回
顶部
阿里巴巴集团 | 淘宝网 | 天猫 | 聚划算 | 全球速卖通 | 阿里巴巴国际交易市场 | 1688 | 阿里妈妈 | 阿里旅行·去啊 | 阿里云计算 | YunOS | 阿里通信 | 万网 | 高德 | 优视 | 友盟 | 酷盘 | 虾米 | 天天动听 | 来往 | 钉钉 | 11Main | 支付宝
关于淘宝 合作伙伴 营销中心 联系客服 开放平台 诚征英才 联系我们 网站地图 法律声明 © 2016 Taobao.com 版权所有
网络文化经营许可证：文网文[2010]040号 | 增值电信业务经营许可证：浙B2-20080224-1 | 信息网络传播视听节目许可证：1109364号