小程序营销组件, Marketing components for WeChatApp
- 大转盘
- 刮刮乐
- 老虎机
- 水果机
- 九宫格翻纸牌
- 摇一摇
- 手势解锁
git clone git@github.com:o2team/wxapp-market.git
- 大转盘 (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/
-
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 贡献力量。