wxapp-market 是一套好用、易扩展的小程序营销组件, 支持大转盘、刮刮乐、老虎机、水果机、九宫格翻纸牌、摇一摇、手势解锁等多种营销玩法。
小程序营销组件, Marketing components for WeChatApp
git clone git@github.com:o2team/wxapp-market.git
/components/wheel/
/components/scratch/
/components/slotMachine/
/components/fruitMachine/
/components/card/
/components/shake/
/components/lock/
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" //绘制颜色
})
本项目基于 MIT 协议,请自由地享受和参与开源。
如果你有好的意见或建议,欢迎给我们提 Issue 或 PR,为优化 wxapp-market 贡献力量。
感谢大神指点,我的小程序商城项目也拿出来和大家分享,欢迎大家提出宝贵意见https://github.crmeb.net/u/demo
大转盘把转盘和奖品一起做成了图片。。
厉害哦,收藏
为何你腰间盘那么突出
可惜,微信开发文档里不允许使用
好东西 感谢啊
大转盘那个回调
你为什么这么牛逼
不错,收藏了
收藏了