小程序營銷組件sol-weapp

前言

小程序營銷組件全面升級，添加說明文檔，優化代碼，讓開發變得更簡單。

Sol Weapp 🎉

Sol Weapp 是一套簡單、易用、業務化的商城營銷組件庫。

預覽

掃描下方小程序二維碼體驗示例：

開始以前 😊

使用 Sol Weapp 前，請確保你閱讀過微信官方的 小程序簡易教程 和自定義組件介紹 。

使用

下載 GitHub Sol Weapp 的代碼，而後將 dist/ 目錄下你須要的組件拷貝到你的組件目錄下

git clone https://github.com/sunnie1992/sol-weapp.git複製代碼

紅包雨

紅包雨,在規定時間內屏幕下落紅包，點擊獲取隨機金額。 紅包發放模式分爲兩種

• 紅包總金額有上限，好比：15 秒 100 塊金額隨機生成 10 個紅包下落速度不可控制。
• 紅包總金額無上限，好比：15 秒紅包雨，可設置速度，設置每一個紅包隨機金額的最大值最小值。

引入

{
  "usingComponents": {
    "sol-packet-rain": "/dist/packet-rain/index"
  }
}複製代碼

使用

<sol-packet-rain
  visible="{{visible}}"
  total="{{total}}"
  mode="{{mode}}"
  createSpeed="{{createSpeed}}"
  decimal="{{decimal}}"
  number="{{number}}"
  time="{{time}}"
  readyTime="{{readyTime}}"
  min="{{min}}"
  max="{{max}}"
  bind:finish="success"
></sol-packet-rain>複製代碼

API

參數	類型	描述	默認值
visible	Boolean	是否開始展現遊戲	false
mode	Number	紅包發放模式 1 :紅包總金額有上限2 :紅包金額無上限	1
createSpeed	Number	紅包下落速度,數值越小，速度越快。mode 爲 2 時生效 。	400
time	Number	遊戲時間，單位秒	15
readyTime	Number	倒計時準備時間,單位秒	5
total	Number	紅包總金額 mode 爲 1 時生效	100
number	Number	紅包個數 mode 爲 1 時生效	1
min	Number	單個紅包，最小金額	0
max	Number	單個紅包，最大金額	3
decimal	Number	金額小數點後位數	0
bind:finish	Function	完成後的回調函數	-

效果展現

大轉盤

點擊抽獎，轉盤或指針轉動，結束後彈出對應獎項

注意

由於抽獎涉及到獎品, 應該是後端控制中獎獎項，前端只用於展現

引入

{
  "usingComponents": {
    "sol-wheel": "/dist/wheel/index"
  }
}複製代碼

使用

<sol-wheel award-numer="{{award}}" ready="{{ready}}" mode="{{mode}}" bind:start="wheelStart" bind:success="wheelSuccess"></sol-wheel>複製代碼

API

參數	類型	描述	默認值
areaNumber	Number	獎項個數	6
awardNumer	Number	中獎區域 順時針從 1 開始	1
ready	Boolean	開始執行抽獎動畫	false
speed	Number	旋轉速度	16
mode	Number	抽獎模式 1:轉盤旋轉 2:指針旋轉	1
bind:start	Function	點擊開始抽獎觸發函數	-
bind:success	Function	成功後的回調函數	-

效果展現

九宮格翻牌

九宮格翻牌，點擊開始抽獎，九宮格紙牌進行進行洗牌動畫，點擊翻轉紙牌。

開發者可根據自身需求修改組件。

引入

{  "usingComponents": {    "sol-grid-card": "/dist/grid-card/index"  }}複製代碼

使用

<sol-grid-card id="sol-grid-card" card="{{card}}" bind:open="openCard"></sol-grid-card>複製代碼

API

參數	類型	描述	默認值
card	Array	九宮格紙牌數據	[ ]
bind:open	Function	點擊翻轉紙牌觸發	-

效果展現

貢獻代碼

使用過程當中發現任何問題均可以提Issue 給我，也很是歡迎 PR 或 Pull Request

交流學習

掃描添加下方的微信並備註 Sol 加交流羣，交流學習，及時獲取代碼最新動態。