小程序营销组件，Marketing components for WeChatApp（小程序广告组件）

小程序营销组件，Marketing components for WeChatApp（小程序广告组件）

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中引用结构： 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中引用结构： 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中引用结构： 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中引用结构： 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中引用结构： 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中引用结构： JS中引用：import Shake from "../../components/shake/shake.js" JS中实例调用：

new Shake(this,{ shakeThreshold: 70, //阈值 callback: (idx, award) => { //结束回调， 参数对应宫格索引，对应奖项 } })

➆ 使用手势解锁组件

WXSS中引用样式：@import "../../components/lock/lock.wxss" 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 贡献力量。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。