小程序营销组件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 加交流群，交流学习，及时获取代码最新动态。