該所有者的項目
(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" //绘制颜色
})
文档详情，请查阅
件体验二维码
效果图展示
更新记录
- 优化文件目录结构 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 贡献力量。