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

开发者社区> 支付宝开发者社区> 正文

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

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

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

小程序 新体验.jpg

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

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

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

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

营销玩法组件库都有哪些东西?

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

image.png

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

image.png

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

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

image.png

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

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

image.png

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

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

如何使用

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

yarn add ant-mini-scratch-card

然后注册组件:

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

最后调用就行啦:

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

image.png

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

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

支付宝开发者中心:https://developers.alipay.com/developmentAccess/developmentAccess.htm

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

生活号+钉钉群.png

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:

支付宝开发者社区已全面迁移至https://forum.alipay.com/mini-app

官方博客
常用链接