【开发课堂】大转盘？刮刮卡？支付宝小程序营销组件了解一下-阿里云开发者社区

【开发课堂】大转盘？刮刮卡？支付宝小程序营销组件了解一下

简介： 营销组件库提供的就是这些核心玩法模块，供开发者去调用，减少自行开发的成本。

+关注继续查看

文章作者：全锋，支付宝高级前端工程师

小程序营销玩法组件是干嘛的？

小程序不是有官方组件库嘛？为啥又搞一个营销组件库？重复造轮子？

不不不，这两个是完全不一样的东西！简单的说，营销组件库是对小程序官方组件能力的一种补充。

小程序官方组件库以及扩展组件提供的是原子能力，比如文本，按钮，列表等等。而营销组件主要是针对支付宝运营活动玩法沉淀出来的组件能力，针对互动营销这个垂直领域做的组件，提供的是玩法模块能力。

无论是在支付宝，淘宝还是天猫，营销活动占据着非常重要的位置，每天都有各种各样的营销活动。活动的形式也多种多样，比如下面这些：

可以看到这些运营活动都有一个特点：每个活动都有自己的核心玩法。比如大转盘，九宫格抽奖，老虎机抽奖、刮刮卡抽奖。营销组件库提供的就是这些核心玩法模块，供开发者去调用，减少自行开发的成本。

详细使用可以看小程序官方文档: https://docs.alipay.com/mini/component-ext/marketing-components

支付宝入口：首页搜索 “营销玩法“ => 营销玩法小程序示例就是了。

为什么要做营销玩法组件库？

小程序的业务越来越多，目前已经有了很多基础功能上的组件，但是针对营销玩法这块的组件沉淀几乎是空白。再加上之前我们有做过很多端内的运营活动，也沉淀了很多页面模板+营销互动玩法模块，所以其实很有必要把这块空白补充起来。下面这些是之前沉淀的部分活动页面模板：

在这些活动页面模板的下层，又抽象了很多玩法模块：

由于最开始都是走的 H5路线，所以这些玩法模块都是 H5版本的，当前小程序的业务量越来越多，于是对其中比较常用的玩法模块进行改造，开发了小程序版本。目前只集成了7个左右，后续会集成更多。

如何使用

使用起来跟小程序自定义组件一样一样的。每个玩法模块都是一个独立 npm 包，独立发布，独立引用。以刮刮卡为例，先安装刮刮卡模块：

yarn add ant-mini-scratch-card

然后注册组件：

{
  "usingComponents": {
    "scratch": "ant-mini-scratch-card/es/scratch/index"
  }
}

最后调用就行啦：

<view>
  <scratch
    tipText="刮刮我，有惊喜~"
  />
</view>

为什么不把这些营销组件都打包到一个包里面呢？因为这跟基础的 Text/Button/... 组件不一样，基础组件项目中会用到很多种，打包起来更方便。但是营销玩法一个应用通常只有一种，单独引用更轻量。

所以，营销组件库只是一个聚合，任何人都可以参与进来，都可以贡献自己的营销玩法。目前这块正在走开源流程，希望能服务到更多有营销需求的商户和开发者~

有任何问题，欢迎加入支付宝官方万人钉钉群

生活号+钉钉群.png