前言

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

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

效果展示

大转盘

点击抽奖，转盘或指针转动，结束后弹出对应奖项

注意

因为抽奖涉及到奖品, 应该是后端控制中奖奖项，前端只用于展示

引入

{
  "usingComponents": {"sol-wheel": "/dist/wheel/index"}
}

使用

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

API

效果展示

九宫格翻牌

九宫格翻牌，点击开始抽奖，九宫格纸牌进行进行洗牌动画，点击翻转纸牌。

开发者可根据自身需求修改组件。

引入

{"usingComponents": {    "sol-grid-card": "/dist/grid-card/index"}}

使用

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

API

效果展示

贡献代码

使用过程中发现任何问题都可以提 Issue 给我，也非常欢迎 PR 或 Pull Request

交流学习

扫描添加下方的微信并备注 Sol 加交流群，交流学习，及时获取代码最新动态。