## File: README.md

## 官方文档 & Demo演示

> **中文**：[https://100px.net](https://100px.net)

> **English**：**If anyone can help translate the document, please contact me** `ldq404@qq.com`
  


## 贡献者



| [](https://github.com/buuing)🤖 🛰 📚 | [](https://github.com/httpcheck)🦄 | [](https://github.com/Xutaotaotao)🛰 | [](https://github.com/yushen7)🛰 | [](https://github.com/qingtiantongxie)🛰 | [](https://github.com/Deja-vuuu)🛰 | [](https://github.com/shenyixuanV1)🛠 🎨 | [](https://github.com/health901)🛠 | [](https://github.com/fantacytyx)🛠 | [](https://github.com/wfs498121294)🛠 |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| [](https://github.com/ywymoshi)🎨 | [](https://github.com/yyy917172)🛰 |  |  |  |  |  |  |  |  |





## 🙏🙏🙏 点个Star

**如果您觉得这个项目还不错, 可以在 [Github](https://github.com/buuing/lucky-canvas) 上面帮我点个`star`, 支持一下作者 ☜(ﾟヮﾟ☜)**



## 问题反馈



- Bug 反馈请直接去 Github 上面提 Issues，我会实时收到邮件提醒前去查看
- **如果是小白需要技术指导的话, 左边是我的赞赏码, 备注好你的微信号, 我看到后会主动加你**
- 但如果是因为我文档没写清楚，或者是插件本身的bug，导致你无法正常使用的话，赞赏全额返还

> **`注好你的微信号!`** **`微信看不到赞赏人信息`** **`所以你必须在备注里写上`**




## 友情链接

- [🎁 h5-Dooring 一款功能强大，高可扩展的H5可视化编辑器](https://github.com/MrXujiang/h5-Dooring)
- [🎁 right-menu 功能强大的右键菜单插件, 支持 JS / TS / Vue / React 等多端框架](https://github.com/buuing/right-menu)

---

## File: packages/vue/README.md

## 在 vue2.x / vue3.x 中使用

- [跳转官网 查看详情](https://100px.net/usage/vue.html)



## 🙏🙏🙏 点个Star

**如果您觉得这个项目还不错, 可以在 [Github](https://github.com/LuckDraw/lucky-canvas) 上面帮我点个`star`, 支持一下作者 ☜(ﾟヮﾟ☜)**

---

## File: packages/uni/README.md

|适配框架|npm下载量|CDN使用量|
| :-: | :-: | :-: |
|[`JS` / `JQ` 中使用](https://100px.net/usage/js.html)|[](https://www.npmjs.com/package/lucky-canvas)|[](https://www.jsdelivr.com/package/npm/lucky-canvas)|
|[`Vue` 中使用](https://100px.net/usage/vue.html)|[](https://www.npmjs.com/package/@lucky-canvas/vue)|[](https://www.jsdelivr.com/package/npm/@lucky-canvas/vue)|
|[`React` 中使用](https://100px.net/usage/react.html)|[](https://www.npmjs.com/package/@lucky-canvas/react)|-|
|[`UniApp` 中使用](https://100px.net/usage/uni.html)|[](https://www.npmjs.com/package/@lucky-canvas/uni)|-|
|[`Taro3.x` 中使用](https://100px.net/usage/taro.html)|[](https://www.npmjs.com/package/@lucky-canvas/taro)|-|
|[`微信小程序` 中使用](https://100px.net/usage/wx.html)|[](https://www.npmjs.com/package/@lucky-canvas/mini)|-|



## 官方文档 & Demo演示

> **中文**：[https://100px.net](https://100px.net)

> **English**：**If anyone can help translate the document, please contact me** `ldq404@qq.com`
  


## 在 uni-app 中使用

### 1. 安装插件

- 你可以选择通过 `HBuilderX` 导入插件： [https://ext.dcloud.net.cn/plugin?id=3499](https://ext.dcloud.net.cn/plugin?id=3499)

- 也可以选择通过 `npm` / `yarn` 安装

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

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



### 2. 引入并使用

```html
<view>
  
  <LuckyWheel
    width="600rpx"
    height="600rpx"
    ...你的配置
  />
  
  <LuckyGrid
    width="600rpx"
    height="600rpx"
    ...你的配置
  />
</view>
```

```js
// 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 },
}
```



### 3. 我提供了一个最基本的 demo 供你用于尝试

由于 uni-app 渲染 md 的时候会出问题，所以我把 demo 代码放到了文档里

- [https://100px.net/usage/uni-app.html](https://100px.net/usage/uni-app.html)



### **4. 补充说明**

- [**如果用着顺手, 可以在 Github 上面点个  支持一下(●'◡'●)**](https://github.com/buuing/lucky-canvas)

- 另外: 如果你修复了某些bug或兼容, 欢迎提给我, 我会把你展示到官网的贡献者列表当中




### 5. 常见问题

1. 转盘层级太高了, 我的弹窗盖不住怎么办?

> 答: 因为小程序里canvas是原生组件顶层渲染, 我无法控制canvas的层级, 如果你想盖住它也肯简单, 你可以百度搜索`<cover>`组件

2. 你这些素材, 图片组件从哪下载?

> 答: 官网里的任何图片素材, 所使用到的图片资源均为学习交流使用, 请勿将其用于商业用途, 由此产生的任何商业纠纷我这边概不负责

3. xxx属性怎么使用? xxx方法怎么调用?

> 答: 自己去看文档, 不然难道要我把代码给你写好吗?

4. 这个属性的效果与官网的描述不一致?

> 答: 可能有bug, 你可以去github上的issues去提问 (请认真填写模板)

5. 为什么这个插件不支持app和其他小程序

> 答: 没时间, 但是希望志同道合的同学来一起参与uniapp的兼容开发

---

作者留言: 为了使我自己保持心情愉悦, 低于5星的提问我用浏览器插件都屏蔽了

不要通过插件市场赞赏!!!

---

## File: packages/taro/README.md

## 官方文档

> **中文**：[https://100px.net/usage/taro.html](https://100px.net/usage/taro.html)



## 在 Taro 中使用

### 安装

> 为了确保相关依赖安装正确, 你必须通过 npm / yarn 来安装

```shell
# npm 安装：
npm install @lucky-canvas/taro@latest

# yarn 安装：
yarn add @lucky-canvas/taro@latest
```




### 使用

#### taro-vue 简单示例

- [点击查看 taro-vue 完整示例](https://100px.net/usage/taro.html)

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



#### taro-react 简单示例

- [点击查看 taro-react 完整示例](https://100px.net/usage/taro.html)

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



## 完整文档: https://100px.net



## 🙏🙏🙏 点个Star

### **如果您觉得这个项目还不错, 可以在 [Github](https://github.com/buuing/lucky-canvas) 上面帮我点个`star`, 支持一下作者 ☜(ﾟヮﾟ☜) ☜(ﾟヮﾟ☜)**

---

## File: packages/react/README.md

## 官方文档

> **中文**：[https://100px.net](https://100px.net)



## 在 React 中使用

- [跳转官网 查看详情](https://100px.net/usage/react.html)



## 🙏🙏🙏 点个Star

**如果您觉得这个项目还不错, 可以在 [Github](https://github.com/buuing/lucky-canvas) 上面帮我点个`star`, 支持一下作者 ☜(ﾟヮﾟ☜)**

---

## File: packages/mini/README.md

## 文档 - Document

- **中文**：[https://100px.net](https://100px.net)



## 使用 - Usage

- [**在 微信小程序 中使用**](https://100px.net/usage/wx.html)



## 🙏🙏🙏 点个Star

**如果您觉得这个项目还不错, 可以在 [Github](https://github.com/buuing/lucky-canvas) 上面帮我点个`star`, 支持一下作者 ☜(ﾟヮﾟ☜)**

---

## File: packages/core/README.md

## 官方文档 & Demo演示

> **中文**：[https://100px.net/usage/js.html](https://100px.net/usage/js.html)  

> **English**：**If anyone can help translate the document, please contact me** `ldq404@qq.com`




## 在 JS / TS 中使用

- [跳转官网 查看详情](https://100px.net/usage/js.html)



## 🙏🙏🙏 点个Star

**如果您觉得这个项目还不错, 可以在 [Github](https://github.com/buuing/lucky-canvas) 上面帮我点个`star`, 支持一下作者 ☜(ﾟヮﾟ☜)**