DOCSEARCHbyAlgolia
Submit Docs

lucky-canvas

repository·master·Indexed 27 days ago

https://github.com/buuing/lucky-canvas

A cross-platform JavaScript lottery plugin for creating lucky draw interfaces such as big spinning wheels, nine-grid layouts, and slot machines. It provides dedicated packages for standard JS, Vue (2.x/3.x), React, UniApp, Taro, and WeChat Mini Programs.

Tokens
7.8K
Snippets
22
Records
66
Agent score
93%

What's inside lucky-canvas

  2. Install @lucky-canvas/uni

    master

    You can install the lucky-canvas plugin for uni-app using either the HBuilderX plugin market or a package manager like npm or yarn.

    Option 1: HBuilderX Import the plugin directly from the DCloud plugin market: https://ext.dcloud.net.cn/plugin?id=3499

    Option 2: npm or yarn Use the following commands to install the package via your terminal.

    # npm 安装：
npm install @lucky-canvas/uni

# yarn 安装：
yarn add @lucky-canvas/uni

  4. Use lucky-canvas components in uni-app

    master

    To use the lucky-canvas components in your uni-app project, import the specific component modules and register them in your component's components option.

    If you installed via npm, import directly from the package name. If you imported via HBuilderX, you must specify the local path (typically starting with @/components/).

    Available components:

    • LuckyWheel: For big wheel (spinning wheel) lottery.
    • LuckyGrid: For nine-grid lottery.
    <view>
  <!-- 大转盘抽奖 -->
  <LuckyWheel
    width="600rpx"
    height="600rpx"
    ...你的配置
  />
  <!-- 九宫格抽奖 -->
  <LuckyGrid
    width="600rpx"
    height="600rpx"
    ...你的配置
  />
</view>
    // npm 下载会默认到 node_modules 里面，直接引入包名即可
import LuckyWheel from '@lucky-canvas/uni/lucky-wheel' // 大转盘
import LuckyGrid from '@lucky-canvas/uni/lucky-grid' // 九宫格

// 如果你是通过 HBuilderX 导入插件，那你需要指定一下路径
// import LuckyWheel from '@/components/@lucky-canvas/uni/lucky-wheel' // 大转盘
// import LuckyGrid from '@/components/@lucky-canvas/uni/lucky-grid' // 九宫格

export default {
  // 注册组件
  components: { LuckyWheel, LuckyGrid },
}

  5. Install lucky-canvas for your framework

    master

    lucky-canvas provides specific npm packages for different environments and frameworks. Choose the package that matches your project's runtime:

    Frameworknpm Package
    JS / jQuerylucky-canvas
    Vue@lucky-canvas/vue
    React@lucky-canvas/react
    UniApp@lucky-canvas/uni
    Taro 3.x@lucky-canvas/taro
    WeChat Mini Program@lucky-canvas/mini

  8. Use @lucky-canvas/mini in WeChat Mini Programs

    master

    @lucky-canvas/mini is a plugin for WeChat Mini Programs that provides various lottery/lucky draw components, including:

    • Big spinning wheels (大转盘)
    • Nine-grid layouts (九宫格)
    • Slot machines (老虎机)

    For detailed implementation steps and usage instructions, refer to the official WeChat Mini Program guide.

  10. Troubleshoot canvas layering in mini-programs

    master

    In mini-programs, the canvas component is rendered as a native component at the top layer. This means standard UI elements like popups or dialogs might appear underneath the canvas.

    Solution: To overlay elements on top of the canvas, use the <cover> component provided by the mini-program framework.

  11. Use @lucky-canvas/taro in Taro with React

    master

    For Taro projects using React, import the components from @lucky-canvas/taro/react. You can use LuckyWheel (Big Wheel), LuckyGrid (Nine-square Grid), and SlotMachine (Slot Machine).

    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>
  }
}

  12. Use @lucky-canvas/taro in Taro with Vue

    master

    For Taro projects using Vue, import the components from @lucky-canvas/taro/vue. You can use LuckyWheel (Big Wheel), LuckyGrid (Nine-square Grid), and SlotMachine (Slot Machine).

    <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>