找回密码
 立即注册

QQ登录

只需一步,快速开始

[Demo源码] 微信小程序营销组件,包含刮刮乐、老虎机、九宫格解锁等

  [复制链接]
查看: 2447|回复: 298
最佳答案
109 

601

主题

2062

帖子

12万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
127477
QQ
 楼主| 发表于 2017-9-18 15:44:37 | 显示全部楼层 |阅读模式
微信小程序营销组件,包含大转盘、刮刮乐、老虎机、跑马灯、九宫格翻纸牌、摇一摇、手势解锁

支持营销玩法
  • 大转盘
  • 刮刮乐
  • 老虎机
  • 跑马灯
  • 九宫格翻纸牌
  • 摇一摇
  • 手势解锁

如何使用

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中实例调用:

  1.    let dial = new Dial(this, {
  2.      areaNumber: 8,   //抽奖间隔
  3.      speed: 16,       //转动速度
  4.      awardNumer: 2,    //中奖区域从1开始
  5.      mode: 1,    //1是指针旋转,2为转盘旋转
  6.      callback: () => {
  7.        //运动停止回调  
  8.      }
  9.    })
复制代码

➁使用刮刮乐组件
  • WXML中引用结构:<import src="./utils/scratch.wxml"/>
  • JS中引用:import Scratch from './utils/scratch.js'
  • JS中实例调用:

  1.   this.scratch = new Scratch(this, {
  2.     canvasWidth: 197,   //画布宽带
  3.     canvasHeight: 72,  //画布高度
  4.     imageResource: './images/placeholder.png', //画布背景
  5.     r: 4, //笔触半径
  6.     awardTxt: '中大奖', //底部抽奖文字
  7.     awardTxtColor: "#1AAD16", //画布颜色
  8.     awardTxtFontSize: "24px", //文字字体大小
  9.     callback: () => {
  10.       //清除画布回调
  11.     }
  12.   })
复制代码

注意:小程序无globalCompositeOperation = 'destination-out'属性,所以采用 clearRect 做擦除处理

➂使用老虎机组件

  • WXSS中引用样式:@import './utils/machine.wxss'
  • WXML中引用结构:<import src="./utils/machine.wxml"/>
  • JS中引用:import Machine from './utils/machine.js'
  • JS中实例调用:

  1.    this.machine = new Machine(this, {
  2.      height: 40,  //单个数字高度
  3.      len: 10,     //单个项目数字个数
  4.      transY1: 0,
  5.      num1: 3,    //结束数字
  6.      transY2: 0,
  7.      num2: 0,    //结束数字
  8.      transY3: 0,
  9.      num3: 0,  //结束数字
  10.      transY4: 0,
  11.      num4: 1,  //结束数字
  12.      speed: 24,  //速度
  13.      callback: () => {
  14.          //停止时回调        
  15.      }      
  16.    })
复制代码

➃使用跑马灯组件
  • WXSS中引用样式:@import './utils/marquee.wxss'
  • WXML中引用结构:<import src="./utils/marquee.wxml"/>
  • JS中引用:import Marquee from './utils/marquee.js'
  • JS中实例调用:

  1.   this.marquee = new Marquee(this, {
  2.     len: 9, //宫格个数
  3.     ret: 9, //抽奖结果对应值1~9
  4.     speed: 100,  // 速度值
  5.     callback: () => {
  6.       //结束回调   
  7.     }            
  8.   })
复制代码

➄使用九宫格翻纸牌组件
  1. WXSS中引用样式:@import './utils/card.wxss'

  2. WXML中引用结构:<import src="./utils/card.wxml"/>

  3. JS中引用:import Card from './utils/card.js'

  4. JS中实例调用:
复制代码
  1. this.card = new Card(this,{
  2.    data: [   //宫格信息,内联样式、是否是反面、是否运动、对应奖项
  3.      {inlineStyle: '', isBack: false, isMove: false, award: "一等奖"},   
  4.      {inlineStyle: '', isBack: false, isMove: false, award: "二等奖"},
  5.      {inlineStyle: '', isBack: false, isMove: false, award: "三等奖"},
  6.      {inlineStyle: '', isBack: false, isMove: false, award: "四等奖"},
  7.      {inlineStyle: '', isBack: false, isMove: false, award: "五等奖"},
  8.      {inlineStyle: '', isBack: false, isMove: false, award: "六等奖"},
  9.      {inlineStyle: '', isBack: false, isMove: false, award: "七等奖"},
  10.      {inlineStyle: '', isBack: false, isMove: false, award: "八等奖"},
  11.      {inlineStyle: '', isBack: false, isMove: false, award: "九等奖"}
  12.    ],
  13.    callback: (idx, award) => {
  14.      //结束回调, 参数对应宫格索引,对应奖项   
  15.    }
  16. })
复制代码

➅使用摇一摇组件
  1. WXSS中引用样式:@import './utils/shake.wxss'

  2. WXML中引用结构:<import src="./utils/shake.wxml"/>

  3. JS中引用:import Shake from './utils/shake.js'

  4. JS中实例调用:
复制代码
  1.   this.shake = new Shake(this, {
  2.     shakeThreshold: 70, //阈值
  3.     callback: () => {
  4.          
  5.     }            
  6.   })
复制代码

➆使用手势解锁组件
  • WXSS中引用样式:@import './utils/lock.wxss'
  • WXML中引用结构:<import src="./utils/lock.wxml"/>
  • JS中引用:import Lock from './utils/lock.js'
  • JS中实例调用:

  1. this.lock = new Lock(this, {
  2.    canvasWidth: 300,
  3.    canvasHeight: 300,
  4.    canvasId: 'canvasLock',
  5.    drawColor: '#3985ff'        
  6. })
复制代码

效果图展示
f3335362f682f363334.gif 2f3335362f682f363334.gif
772f3335362f682f363334.gif 2f363334.gif
6.gif 7.gif
8.gif 9.gif

游客,如果您要查看本帖隐藏内容请回复
回复

使用道具 举报

最佳答案
0 

0

主题

45

帖子

59

积分

新人求带

积分
59
发表于 2017-9-19 20:10:39 | 显示全部楼层
豆腐干豆腐干的股份
回复 支持 1 反对 0

使用道具 举报

最佳答案
0 

0

主题

11

帖子

105

积分

新人求带

积分
105
发表于 2017-9-18 23:32:41 | 显示全部楼层
感谢分享!·楼主辛苦。
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

84

帖子

1731

积分

黄金VIP

Rank: 3Rank: 3

积分
1731
发表于 2017-9-19 10:25:59 | 显示全部楼层
回复

使用道具 举报

最佳答案
0 

0

主题

250

帖子

328

积分

略知一二

积分
328
发表于 2017-9-19 12:00:29 | 显示全部楼层
还有好多东西都需要学
回复 支持 反对

使用道具 举报

最佳答案
0 

6

主题

72

帖子

1422

积分

专家路上

积分
1422
QQ
发表于 2017-9-19 15:17:04 | 显示全部楼层
干货!感谢!
回复

使用道具 举报

最佳答案
0 

0

主题

572

帖子

1107

积分

专家路上

积分
1107
发表于 2017-9-19 18:01:29 | 显示全部楼层
6666666666666
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

45

帖子

59

积分

新人求带

积分
59
发表于 2017-9-19 19:59:24 | 显示全部楼层
12321312331
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

7

帖子

55

积分

新人求带

积分
55
发表于 2017-9-19 20:06:43 | 显示全部楼层
看不懂这写代码
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

45

帖子

59

积分

新人求带

积分
59
发表于 2017-9-19 20:10:46 | 显示全部楼层
豆腐干豆腐干豆腐干
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

广告推广
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com