wxapp-market

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

支持营销玩法

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

如何使用

1.拉取仓库

git clone [email protected]: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"  //绘制颜色
  })

文档详情，请查阅

件体验二维码

效果图展示

更新记录

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

开源协议

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

贡献

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