文章作者：全鋒，支付寶進階前端工程師 https://developers.alipay.com/developmentAccess/developmentAccess.htm 
小程式營銷玩法元件是幹嘛的？
小程式不是有官方元件庫嘛？為啥又搞一個營銷元件庫？重複造輪子？
不不不，這兩個是完全不一樣的東西！簡單的說，營銷元件庫是對小程式官方元件能力的一種補充。
小程式官方元件庫以及擴充元件提供的是原子能力，比如文本，按鈕，清單等等。而營銷元件主要是針對支付寶營運活動玩法沉澱出來的元件能力，針對互動營銷這個垂直領域做的元件，提供的是玩法子產品能力。
營銷玩法元件庫都有哪些東西？
無論是在支付寶，淘寶還是天貓，營銷活動占據着非常重要的位置，每天都有各種各樣的營銷活動。活動的形式也多種多樣，比如下面這些：
可以看到這些營運活動都有一個特點：每個活動都有自己的核心玩法。比如大轉盤，九宮格抽獎，老虎機抽獎、刮刮卡抽獎。營銷元件庫提供的就是這些核心玩法子產品，供開發者去調用，減少自行開發的成本。
詳細使用可以看小程式官方文檔:
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/... 元件不一樣，基礎元件項目中會用到很多種，打包起來更友善。但是營銷玩法一個應用通常隻有一種，單獨引用更輕量。
是以，營銷元件庫隻是一個聚合，任何人都可以參與進來，都可以貢獻自己的營銷玩法。目前這塊正在走開源流程，希望能服務到更多有營銷需求的商戶和開發者~
支付寶開發者中心：
https://developers.alipay.com/developmentAccess/developmentAccess.htm有任何問題，歡迎加入支付寶官方萬人釘釘群