前言
小程序营销组件全面升级，添加说明文档，优化代码，让开发变得更简单。
Sol Weapp 🎉
Sol Weapp 是一套简单、易用、业务化的商城营销组件库。
预览
扫描下方小程序二维码体验示例：
开始之前 😊
使用 Sol Weapp 前，请确保你阅读过微信官方的 小程序简易教程 和自定义组件介绍 。
使用
下载 GitHub Sol Weapp 的代码，然后将 dist/ 目录下你需要的组件拷贝到你的组件目录下
git clone https://github.com/sunniejs/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 加交流群，交流学习，及时获取代码最新动态。
