收藏
评论

O2小程序营销组件

wxapp-market 是一套好用、易扩展的小程序营销组件, 支持大转盘、刮刮乐、老虎机、水果机、九宫格翻纸牌、摇一摇、手势解锁等多种营销玩法。

小程序营销组件

小程序营销组件, Marketing components for WeChatApp

支持营销玩法

  • 大转盘
  • 刮刮乐
  • 老虎机
  • 水果机
  • 九宫格翻纸牌
  • 摇一摇
  • 手势解锁

如何使用

1.拉取仓库

git clone git@github.com:o2team/wxapp-market.git

2.查看组件文件

  • 大转盘 (Big wheel) : /components/wheel/
  • 刮刮乐 (Scratch tickets) : /components/scratch/
  • 老虎机 (Slot machine) : /components/slotMachine/
  • 水果机 (Fruit machine) : /components/fruitMachine/
  • 九宫格翻纸牌 (Grid card) : /components/card/
  • 摇一摇 (Shake) : /components/shake/
  • 手势解锁 (Gesture lock) : /components/lock/

3.使用引入方式

➀ 使用大转盘组件

  • WXSS中引用样式:@import "../../components/wheel/wheel.wxss"

  • WXML中引用结构:<import src="../../components/wheel/wheel.wxml"/>

  • JS中引用:import Wheel from "../../components/wheel/wheel.js"

  • JS中实例调用:

  new Wheel(this,{
    areaNumber: 8,   //抽奖间隔
    speed: 16,       //转动速度
    awardNumer: 2,   //中奖区域从1开始
    mode: 1,         //1是指针旋转,2为转盘旋转
    callback: (idx, award) => {
      //结束回调, 参数对应宫格索引,对应奖项    
    }
  })

➁ 使用刮刮乐组件

  • WXML中引用结构:<import src="../../components/scratch/scratch.wxml"/>

  • JS中引用:import Scratch from "../../components/scratch/scratch.js"

  • JS中实例调用:

  new Scratch(this,{
    canvasWidth: 197,   //画布宽带
    canvasHeight: 72,  //画布高度
    imageResource: "./images/placeholder.png", //遮罩层图片
    r: 4, //笔触半径
    awardTxt: '中大奖', //底部抽奖文字奖项
    awardTxtColor: "#1AAD16", //底部抽奖文字颜色
    awardTxtFontSize: "24px", //底部抽奖文字大小
    maskColor: "red",  //没有图片遮罩层颜色
    callback: () => {
      //清除画布回调
    }
  })

注意:小程序无 globalCompositeOperation = "destination-out" 属性,所以采用 clearRect 做擦除处理

➂ 使用老虎机组件

  • WXSS中引用样式:@import "../../components/slotMachine/slotMachine.wxss"

  • WXML中引用结构:<import src="../../components/slotMachine/slotMachine.wxml"/>

  • JS中引用:import SlotMachine from "../../components/slotMachine/slotMachine.js"

  • JS中实例调用:

  new SlotMachine(this,{
     height: 40,  //单个数字高度
     len: 10,     //单个项目数字个数
     transY1: 0,  //第一列初始位置
     num1: 3,     //第一列结束数字
     transY2: 0,  //第二列初始位置
     num2: 0,     //第二列结束数字
     transY3: 0,  //第三列初始位置
     num3: 0,     //第三列结束数字
     transY4: 0,  //第四列结束数字
     num4: 1,     //第四列结束数字
     speed: 24,   //速度
     callback: (idx, award) => {
      //结束回调, 参数对应宫格索引,对应奖项    
    }
  })

➃ 使用水果机组件

  • WXSS中引用样式:@import "../../components/fruitMachine/fruitMachine.wxss"

  • WXML中引用结构:<import src="../../components/fruitMachine/fruitMachine.wxml"/>

  • JS中引用:import FruitMachine from "../../components/fruitMachine/fruitMachine.js"

  • JS中实例调用:

  new FruitMachine(this,{
    len: 9, //宫格个数
    ret: 9, //抽奖结果对应值1~9   
    speed: 100,  // 速度值
    callback: (idx, award) => {
      //结束回调, 参数对应宫格索引,对应奖项    
    }
  })

➄ 使用九宫格翻纸牌组件

  • WXSS中引用样式:@import "../../components/card/card.wxss"

  • WXML中引用结构:<import src="../../components/card/card.wxml"/>

  • JS中引用:import Card from "../../components/card/card.js"

  • JS中实例调用:

  new Card(this,{
    data: [   //宫格信息,内联样式、是否是反面、是否运动、对应奖项
      {isBack: false, isMove: false, award: "一等奖"},    
      {isBack: false, isMove: false, award: "二等奖"},
      {isBack: false, isMove: false, award: "三等奖"},
      {isBack: false, isMove: false, award: "四等奖"},
      {isBack: false, isMove: false, award: "五等奖"},
      {isBack: false, isMove: false, award: "六等奖"},
      {isBack: false, isMove: false, award: "七等奖"},
      {isBack: false, isMove: false, award: "八等奖"},
      {isBack: false, isMove: false, award: "九等奖"}
    ],
    callback: (idx, award) => {
      //结束回调, 参数对应宫格索引,对应奖项    
    }
  })

➅ 使用摇一摇组件

  • WXSS中引用样式:@import "../../components/shake/shake.wxss"

  • WXML中引用结构:<import src="../../components/shake/shake.wxml"/>

  • JS中引用:import Shake from "../../components/shake/shake.js"

  • JS中实例调用:

  new Shake(this,{
    shakeThreshold: 70, //阈值
    callback: (idx, award) => {
      //结束回调, 参数对应宫格索引,对应奖项    
    }
  })

➆ 使用手势解锁组件

  • WXSS中引用样式:@import "../../components/lock/lock.wxss"

  • WXML中引用结构:<import src="../../components/lock/lock.wxml"/>

  • JS中引用:import Lock from "../../components/lock/lock.js"

  • JS中实例调用:

  new Lock(this,{
    canvasWidth: 300,   //canvas画布宽度 px
    canvasHeight: 300,  //canvas画布高度 px 
    canvasId: "canvasLock", //canvas画布id
    drawColor: "#3985ff"  //绘制颜色
  })

效果图展示

支持营销 大转盘组件 刮刮乐组件 老虎机组件 水果机组件 九宫格翻纸组件 摇一摇组件
手势解锁组件

更新记录

  • [x] 优化文件目录结构 2017-09-18
  • [x] 手势解锁组件 2017-09-17
  • [x] 摇一摇组件 2017-09-16
  • [x] 九宫格翻纸组件 2017-09-16
  • [x] 增加老虎机组件、水果机组件 2017-09-02
  • [x] 增加刮刮乐组件 2017-08-29
  • [x] 增加大转盘组件 2017-08-27
  • [x] create wx-market repository 2017-08-26

开源协议

本项目基于 MIT 协议,请自由地享受和参与开源。

贡献

如果你有好的意见或建议,欢迎给我们提 IssuePR,为优化 wxapp-market 贡献力量。

收藏

14 个评论

  • 梁海涛
    梁海涛
    2019-03-02

    感谢大神指点,我的小程序商城项目也拿出来和大家分享,欢迎大家提出宝贵意见https://github.crmeb.net/u/demo

    2019-03-02
    赞同
    回复
  • 林之正传
    林之正传
    2018-07-02

    大转盘把转盘和奖品一起做成了图片。。

    2018-07-02
    赞同
    回复
  • 思燕呀
    思燕呀
    2018-06-22

    厉害哦,收藏

    2018-06-22
    赞同
    回复
  • 低价奥特曼
    低价奥特曼
    2018-06-08

    为何你腰间盘那么突出

    2018-06-08
    赞同
    回复
  • 小千哥
    小千哥
    2018-04-25

    可惜,微信开发文档里不允许使用


    2018-04-25
    赞同
    回复
  • 纯某人
    纯某人
    2018-03-20

    好东西 感谢啊

    2018-03-20
    赞同
    回复
  •  john
     john
    2018-02-05

    大转盘那个回调

    idx, award 这两个参数没有呀


    2018-02-05
    赞同
    回复
  • 二月
    二月
    2018-01-09

    你为什么这么牛逼

    2018-01-09
    赞同
    回复
  • 六一
    六一
    2017-12-30

    不错,收藏了

    2017-12-30
    赞同
    回复
  • biubiu
    biubiu
    2017-12-27

    收藏了

    2017-12-27
    赞同
    回复

正在加载...

登录 后发表内容