# 在 Taro 中使用
# 安装
# npm 安装：
npm install @lucky-canvas/taro@latest
# yarn 安装：
yarn add @lucky-canvas/taro@latest
# 使用
<template>
<view>
<!-- 大转盘抽奖 -->
<LuckyWheel width="600rpx" height="600rpx" ...你的配置 />
<!-- 九宫格抽奖 -->
<LuckyGrid width="600rpx" height="600rpx" ...你的配置 />
<!-- 九宫格抽奖 -->
<SlotMachine width="600rpx" height="600rpx" ...你的配置 />
</view>
</template>
<script>
import { LuckyWheel, LuckyGrid, SlotMachine } from '@lucky-canvas/taro/vue'
export default {
components: { LuckyWheel, LuckyGrid, SlotMachine },
}
</script>
import React from 'react'
import { View } from '@tarojs/components'
import { LuckyWheel, LuckyGrid, SlotMachine } from '@lucky-canvas/taro/react'
export default class Index extends React.Component {
render () {
return <View>
{/* 大转盘抽奖 */}
<LuckyWheel width="300px" height="300px" ...你的配置 />
{/* 九宫格抽奖 */}
<LuckyGrid width="300px" height="300px" ...你的配置 />
{/* 老虎机抽奖 */}
<SlotMachine width="300px" height="300px" ...你的配置 />
</View>
}
}
# 简单示例
我在这里提供一个简略的 demo 供你进行测试, 更多抽奖类型或复杂的效果可以跳转示例页面查看
<template>
<view>
<LuckyWheel
ref="myLucky"
width="600rpx"
height="600rpx"
:prizes="prizes"
:blocks="blocks"
:buttons="buttons"
@start="startCallback"
@end="endCallback"
></LuckyWheel>
</view>
</template>
<script>
import { LuckyWheel } from '@lucky-canvas/taro/vue'
export default {
components: { LuckyWheel },
data () {
return {
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' }]
},
],
}
},
methods: {
// 点击抽奖按钮会触发star回调
startCallback () {
// 调用抽奖组件的play方法开始游戏
this.$refs.myLucky.play()
// 模拟调用接口异步抽奖
setTimeout(() => {
// 假设后端返回的中奖索引是0
const index = 0
// 调用stop停止旋转并传递中奖索引
this.$refs.myLucky.stop(index)
}, 3000)
},
// 抽奖结束会触发end回调
endCallback (prize) {
console.log(prize)
},
}
}
</script>
<template>
<view>
<LuckyWheel
ref="myLucky"
width="600rpx"
height="600rpx"
:prizes="prizes"
:blocks="blocks"
:buttons="buttons"
@start="startCallback"
@end="endCallback"
></LuckyWheel>
</view>
</template>
<script>
import { ref, reactive, toRefs } from 'vue'
import { LuckyWheel } from '@lucky-canvas/taro/vue'
export default {
components: { LuckyWheel },
setup () {
const myLucky = ref(null)
const state = reactive({
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' }]
},
],
})
// 点击抽奖按钮会触发star回调
function startCallback () {
// 调用抽奖组件的play方法开始游戏
myLucky.value.play()
// 模拟调用接口异步抽奖
setTimeout(() => {
// 假设后端返回的中奖索引是0
const index = 0
// 调用stop停止旋转并传递中奖索引
myLucky.value.stop(index)
}, 3000)
}
// 抽奖结束会触发end回调
function endCallback (prize) {
console.log(prize)
}
return {
...toRefs(state),
startCallback,
endCallback,
myLucky
}
}
}
</script>
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 <LuckyWheel
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>
}
}友情提示
即便都是 Taro@3.x, 他们之间的差别可能也会非常大
如果你这边出现了报错, 不要奇怪, 你可以尝试自行解决后给我提 PR, 或直接去 Github 上提 Issues
(我本地使用的是 3.3.15 的版本, 测试都没问题)