258资源分享网

营销组件

营销组件， 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=http://www.yiyongtong.com/archives/"./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=http://www.yiyongtong.com/archives/"./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=http://www.yiyongtong.com/archives/"./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=http://www.yiyongtong.com/archives/"./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=http://www.yiyongtong.com/archives/"./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=http://www.yiyongtong.com/archives/"./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=http://www.yiyongtong.com/archives/"./utils/lock.wxml"/>

JS中引用：import Lock from './utils/lock.js'

JS中实例调用：

this.lock = new Lock(this, { canvasWidth: 300, canvasHeight: 300, canvasId: 'canvasLock', drawColor: '#3985ff' })