小程序营销组件solweapp

jiezi

5 年前

小程序营销组件全面升级，添加说明文档，优化代码，让开发变得更简单。

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>

参数	类型	描述	默认值
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>

参数	类型	描述	默认值
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

小程序营销组件solweapp

前言

Sol Weapp ????

预览

开始之前 ????

使用

红包雨

引入

使用

API

效果展示

大转盘

注意

引入

使用

API

效果展示

九宫格翻牌

引入

效果展示

贡献代码

交流学习