營銷組件--大轉盤\刮刮樂\老虎機\跑馬燈\九宮格翻紙牌\搖一搖\手勢解鎖 ...
營銷組件
營銷組件， WeChat marketing components.支持營銷類型
- 大轉盤
- 刮刮樂
- ***
- 跑馬燈
- 九宮格翻紙牌
- 搖一搖
- 手勢解鎖
如何使用
1.拉取倉庫
git clone git@github.com:pfan123/wx-market.git
2.安裝包依賴
npm i
3.查看組件文件
- 大轉盤（Rotate）: /pages/rotate/utils/
- 刮刮樂 (scratch ticket) : /pages/scratch/utils/
- *** （slot machine） : /pages/slotmachine/utils/
- 跑馬燈 （marquee）: /pages/marquee/utils/
- 九宮格翻紙牌 (grid card): /pages/gridcard/utils/
- 搖一搖 (shake): /pages/shake/utils/
- 手勢解鎖 (gesture lock): /pages/gestureLock/utils/
4.使用引入方式
拷貝所需組件，到小程序目錄pages路由目錄
?使用大轉盤組件
-
WXSS中引用樣式：@import './utils/dial.wxss'
-
WXML中引用結構：<import src="./utils/dial.wxml"/>
-
JS中引用：import Dial from './utils/dial.js'
-
JS中實例調用：
let dial = new Dial(this, {
areaNumber: 8, //抽獎間隔
speed: 16, //轉動速度
awardNumer: 2, //中獎區域從1開始
mode: 1, //1是指針旋轉，2為轉盤旋轉
callback: () => {
//運動停止回調
}
})
?使用刮刮樂組件
-
WXML中引用結構：<import src="./utils/scratch.wxml"/>
-
JS中引用：import Scratch from './utils/scratch.js'
-
JS中實例調用：
this.scratch = new Scratch(this, {
canvasWidth: 197, //畫布寬帶
canvasHeight: 72, //畫布高度
imageResource: './images/placeholder.png', //畫布背景
r: 4, //筆觸半徑
awardTxt: '中大獎', //底部抽獎文字
awardTxtColor: "#1AAD16", //畫布顏色
awardTxtFontSize: "24px", //文字字體大小
callback: () => {
//清除畫布回調
}
})
注意：小程序無globalCompositeOperation = 'destination-out'屬性，所以采用 clearRect 做擦除處理
?使用***組件
-
WXSS中引用樣式：@import './utils/machine.wxss'
-
WXML中引用結構：<import src="./utils/machine.wxml"/>
-
JS中引用：import Machine from './utils/machine.js'
-
JS中實例調用：
this.machine = new Machine(this, {
height: 40, //單個數字高度
len: 10, //單個項目數字個數
transY1: 0,
num1: 3, //結束數字
transY2: 0,
num2: 0, //結束數字
transY3: 0,
num3: 0, //結束數字
transY4: 0,
num4: 1, //結束數字
speed: 24, //速度
callback: () => {
//停止時回調
}
})
?使用跑馬燈組件
-
WXSS中引用樣式：@import './utils/marquee.wxss'
-
WXML中引用結構：<import src="./utils/marquee.wxml"/>
-
JS中引用：import Marquee from './utils/marquee.js'
-
JS中實例調用：
this.marquee = new Marquee(this, {
len: 9, //宮格個數
ret: 9, //抽獎結果對應值1～9
speed: 100, // 速度值
callback: () => {
//結束回調
}
})
?使用九宮格翻紙牌組件
-
WXSS中引用樣式：@import './utils/card.wxss'
-
WXML中引用結構：<import src="./utils/card.wxml"/>
-
JS中引用：import Card from './utils/card.js'
-
JS中實例調用：
this.card = new Card(this,{
data: [ //宮格信息，內聯樣式、是否是反面、是否運動、對應獎項
{inlineStyle: '', isBack: false, isMove: false, award: "一等獎"},
{inlineStyle: '', isBack: false, isMove: false, award: "二等獎"},
{inlineStyle: '', isBack: false, isMove: false, award: "三等獎"},
{inlineStyle: '', isBack: false, isMove: false, award: "四等獎"},
{inlineStyle: '', isBack: false, isMove: false, award: "五等獎"},
{inlineStyle: '', isBack: false, isMove: false, award: "六等獎"},
{inlineStyle: '', isBack: false, isMove: false, award: "七等獎"},
{inlineStyle: '', isBack: false, isMove: false, award: "八等獎"},
{inlineStyle: '', isBack: false, isMove: false, award: "九等獎"}
],
callback: (idx, award) => {
//結束回調， 參數對應宮格索引，對應獎項
}
})
?使用搖一搖組件
-
WXSS中引用樣式：@import './utils/shake.wxss'
-
WXML中引用結構：<import src="./utils/shake.wxml"/>
-
JS中引用：import Shake from './utils/shake.js'
-
JS中實例調用：
this.shake = new Shake(this, {
shakeThreshold: 70, //閾值
callback: () => {
}
})
?使用手勢解鎖組件
-
WXSS中引用樣式：@import './utils/lock.wxss'
-
WXML中引用結構：<import src="./utils/lock.wxml"/>
-
JS中引用：import Lock from './utils/lock.js'
-
JS中實例調用：
this.lock = new Lock(this, {
canvasWidth: 300,
canvasHeight: 300,
canvasId: 'canvasLock',
drawColor: '#3985ff'
})
