Skip to content

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

Notifications You must be signed in to change notification settings

hanpandeng/wxapp-market

 
 

Repository files navigation

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 协议,请自由地享受和参与开源。

贡献

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

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%