Web前端 lucky

Web前端 lucky-canvas 抽奖插件（JS/TS、Vue、React、微信小程序、Uniapp和Taro）

基于 JS + Canvas 实现的【大转盘 & 九宫格 & 老虎机】抽奖，致力于为 WEB 前端提供一个功能强大且专业可靠的营销组件，只需要通过简单配置即可实现自由化定制，帮助你快速的完成产品需求

自由配置 奖品 / 文字 / 图片 / 颜色 / 按钮均可自由配置；支持同步 / 异步抽奖；中奖概率前 / 后端可控多端适配 支持 JS / TS / JQ / Vue / React / 微信小程序 / UniApp / Taro 等；并且多端使用 / 表现形式完全一致响应式 自动根据设备 dpr 调整清晰度；并支持使用 百分比 / rem / rpx 属性来适配移动端布局

更多自定义样式：

1-1. 在JS/TS中使用：

方式1：通过 script 标签引入，CDN 链接任选一个即可

unpkg：https://unpkg.com/lucky-canvas@1.7.25

jsdelivr：https://cdn.jsdelivr.net/npm/lucky-canvas@1.7.25

方式 2：通过 import 引入

# npm 安装

npm install lucky-canvas@latest

# 或者 yarn 安装

yarn add lucky-canvas@latest

1-2. 在Vue中使用：

方式 1：通过 import 引入

1.首先安装插件

# npm 安装

npm install @lucky-canvas/vue@latest

# 或者 yarn 安装

yarn add @lucky-canvas/vue@latest

2.在main.js 引入插件

# Vue2

import VueLuckyCanvas from '@lucky-canvas/vue'

Vue.use(VueLuckyCanvas)

# Vue3

import VueLuckyCanvas from '@lucky-canvas/vue'

createApp(App).use(VueLuckyCanvas).mount('#app')

3.在组件上使用

Vue2 ：

Vue3 版本：

对于出现安装/打包失败 https://github.com/buuing/lucky-canvas/issues/258(opens new window) 可能是依赖安装问题导致的, 建议切换 node@12.22.7 然后删除 node_modules 和 **-lock.json 这两个文件 再次尝试 npm install 安装所有依赖

如果还是无法使用, 你可以直接跳转 ->【在 JS / TS 中使用】并查看方式2(这个包不会出现依赖问题, 因为他没有任何依赖)

1-3. 在React中使用（示例：LuckyWheel ）：

1.首先安装插件

# npm 安装：

npm install @lucky-canvas/react@latest

# yarn 安装：

yarn add @lucky-canvas/react@latest

2.在组件中使用

import React, { useState, useRef } from 'react'

import { LuckyWheel,LuckyGrid,SlotMachine } from '@lucky-canvas/react'

export default function App() {

const [blocks] = useState([

{ padding: '10px', background: '#869cfa' }

])

const [prizes] = useState([

{ background: '#e9e8fe', fonts: [{ text: '0' }] },

{ background: '#b8c5f2', fonts: [{ text: '1' }] },

{ background: '#e9e8fe', fonts: [{ text: '2' }] },

{ background: '#b8c5f2', fonts: [{ text: '3' }] },

{ background: '#e9e8fe', fonts: [{ text: '4' }] },

{ background: '#b8c5f2', fonts: [{ text: '5' }] },

])

const [buttons] = useState([

{ radius: '40%', background: '#617df2' },

{ radius: '35%', background: '#afc8ff' },

{

radius: '30%', background: '#869cfa',

pointer: true,

fonts: [{ text: '开始', top: '-10px' }]

}

])

const myLucky = useRef()

return

}

1-4. 在微信小程序中使用（示例：LuckyWheel ）：

1.查看小程序项目根目录下是否有package.json文件，没有再执行下面的命令来创建该文件

npm init -y

2.安装 npm 包

npm install @lucky-canvas/mini@latest

3.构建 npm

微信开发者工具 -> 找到左上角点击 -> 工具点击 -> 构建 npm 弹窗提示 构建成功 即可!

4.引入自定义组件

json文件：

{

...

"usingComponents": {

"lucky-wheel": "/miniprogram_npm/@lucky-canvas/mini/lucky-wheel/index",

"lucky-grid": "/miniprogram_npm/@lucky-canvas/mini/lucky-grid/index"

"slot-machine": "/miniprogram_npm/@lucky-canvas/mini/slot-machine/index"

}

...

}

wxml文件：

id="myLucky"

width="600rpx"

height="600rpx"

blocks="{{blocks}}"

prizes="{{prizes}}"

buttons="{{buttons}}"

bindstart="start"

bindend="end"

/>

js文件：

const app = getApp()

Page({

data: {

blocks: [{ padding: '13px', background: '#617df2' }],

prizes: [

{ fonts: [{ text: '0', top: '10%' }], background: '#e9e8fe' },

{ fonts: [{ text: '1', top: '10%' }], background: '#b8c5f2' },

{ fonts: [{ text: '2', top: '10%' }], background: '#e9e8fe' },

{ fonts: [{ text: '3', top: '10%' }], background: '#b8c5f2' },

{ fonts: [{ text: '4', top: '10%' }], background: '#e9e8fe' },

{ fonts: [{ text: '5', top: '10%' }], background: '#b8c5f2' },

],

buttons: [

{ radius: '50px', background: '#617df2' },

{ radius: '45px', background: '#afc8ff' },

{

radius: '40px', background: '#869cfa',

pointer: true,

fonts: [{ text: '开始\n抽奖', top: '-20px' }]

},

],

},

start () {

// 获取抽奖组件实例

const child = this.selectComponent('#myLucky')

// 调用play方法开始旋转

child.lucky.play()

// 用定时器模拟请求接口

setTimeout(() => {

// 3s 后得到中奖索引 (假设抽到第0个奖品)

const index = 0

// 调用stop方法然后缓慢停止

child.lucky.stop(index)

}, 3000)

},

end (event) {

// 中奖奖品详情

console.log(event.detail)

}

})

1-5. 在UniApp中使用（示例：LuckyWheel ）：

1.安装插件

你可以选择通过 HBuilderX 导入插件： https://ext.dcloud.net.cn/plugin?id=3499也可以选择通过 npm / yarn 安装

# npm 安装：

npm install @lucky-canvas/uni@latest

# yarn 安装：

yarn add @lucky-canvas/uni@latest

2.引入并使用

1-6. 在 Taro 中使用（示例：LuckyWheel ）：

1.安装

# npm 安装：

npm install @lucky-canvas/taro@latest

# yarn 安装：

yarn add @lucky-canvas/taro@latest

2.使用

# Taro-vue2

# Taro-vue3

# Taro-react

import React from 'react'

import { LuckyWheel } from '@lucky-canvas/taro/react'

export default class Index extends React.Component {

constructor () {

super()

this.myLucky = React.createRef()

this.state = {

blocks: [{ padding: '13px', background: '#617df2' }],

prizes: [

{ fonts: [{ text: '0', top: '10%' }], background: '#e9e8fe' },

{ fonts: [{ text: '1', top: '10%' }], background: '#b8c5f2' },

{ fonts: [{ text: '2', top: '10%' }], background: '#e9e8fe' },

{ fonts: [{ text: '3', top: '10%' }], background: '#b8c5f2' },

{ fonts: [{ text: '4', top: '10%' }], background: '#e9e8fe' },

{ fonts: [{ text: '5', top: '10%' }], background: '#b8c5f2' },

],

buttons: [

{ radius: '50px', background: '#617df2' },

{ radius: '45px', background: '#afc8ff' },

{

radius: '40px', background: '#869cfa',

pointer: true,

fonts: [{ text: '开始\n抽奖', top: '-20px' }]

},

],

}

}

render () {

return

ref={this.myLucky}

width='300px'

height='300px'

blocks={this.state.blocks}

prizes={this.state.prizes}

buttons={this.state.buttons}

onStart={() => { // 点击抽奖按钮会触发star回调

// 调用抽奖组件的play方法开始游戏

this.myLucky.current.play()

// 模拟调用接口异步抽奖

setTimeout(() => {

// 假设后端返回的中奖索引是0

const index = 0

// 调用stop停止旋转并传递中奖索引

this.myLucky.current.stop(index)

}, 2500)

}}

onEnd={prize => { // 抽奖结束会触发end回调

console.log(prize)

}}

>

}

}

大转盘 < LuckyWheel /> 参数介绍：

九宫格 < LuckyGrid /> 参数介绍：

老虎机 < SlotMachine /> 参数介绍：

以上便是对 lucky-canvas 抽奖插件的具体介绍和简易Dome，有常用问题我们可以通过lucky-canvas官方文档去了解解决，而这个高度自定义的插件组件适合我们做活动项目中的抽奖组件，有兴趣的小伙伴们可以了解并学习下！

lucky-canvas 官网：https://100px.net/ lucky-canvas 中文文档：https://100px.net/docs/wheel.html lucky-canvas github地址：https://github.com/buuing/lucky-canvas