登陆

GitHub JS项目引荐|微信小程序营销组件|微信小程序互动抽奖游戏

admin 2019-10-27 169人围观 ,发现0个评论

GitHub JS项目推荐|微信小程序营销组件|微信小程序互动抽奖游戏

推荐理由

小程序营销组件,使用简单、方式齐全。包含示例代码,玩法多样

  • 大转盘
  • 刮刮乐
  • 老虎机
  • 水果机
  • ...

项目分析

仓库名称:wxapp-market

标星(star):2097 (网红级项目,高手作品,star可以走一波)

标星趋势

关注(watch):95

拷贝(fork):443

贡献人数:圣人重返都市2

仓库大小:<1 MB

主要开发语言:JavaScript

语言分布:JavaScript:100.00%

代码提交周期分布

综合推荐指数

2星半

项目概述

支持营销玩法

  • 大转盘
  • 刮刮乐
  • 老虎机
  • 水果机
  • 九宫格翻纸牌
  • 摇一摇
  • 手势解锁

如何使用

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: () => {
//清除画布回调
}
})

注意:小程序无 globalCompositeOperatiGitHub JS项目引荐|微信小程序营销组件|微信小程序互动抽奖游戏on = "destination-out" 属性,所以采用 clGitHub JS项目引荐|微信小程序营销组件|微信小程序互动抽奖游戏earRect 做擦除处理

➂ 使用老虎机组件

  • 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: "九等奖GitHub JS项目引荐|微信小程序营销组件|微信小程序互动抽奖游戏"}
],
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
dGitHub JS项目引荐|微信小程序营销组件|微信小程序互动抽奖游戏rawColor: "#3985ff" //绘制颜色
})

效果图展示

项目地址

https://github.com/o2team/wxapp-market

程序员新视界:分享有趣、有料的程序员话题,每天进步一点点。

请关注微信公众号
微信二维码
不容错过
Powered By Z-BlogPHP