共计 1772 个字符，预计需要花费 5 分钟才能阅读完成。
前言
小程序营销组件全面升级，添加说明文档，优化代码，让开发变得更简单。
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 加交流群，交流学习，及时获取代码最新动态。
正文完