官方文档

中文：https://100px.net/usage/wx.html

• 在 js / jq 中使用 lucky-canvas

• 在 vue 中使用 vue-luck-draw

• 在 react 中使用 react-luck-draw

• 在 uni-app 中使用 uni-luck-draw

• 在 taro 中使用 taro-luck-draw

• 在 微信小程序 中使用 mini-luck-draw

在 微信小程序 中使用

方式 1：通过 npm 安装

1. 先找到小程序项目的根目录，看是否有package.json文件，如果没有就执行下面的命令来创建该文件

1npm init -y

2. 安装 npm 包

1npm install mini-luck-draw

3. 构建 npm

微信开发者工具找到左上角点击 工具 > 构建 npm > 构建成功

4. 引入自定义组件

1{
2  "usingComponents": {
3    "lucky-wheel":"/miniprogram_npm/mini-luck-draw/lucky-wheel/index",
4    "lucky-grid":"/miniprogram_npm/mini-luck-draw/lucky-grid/index"
5  }
6}

4. 我在这里提供一个简略的 demo 供你进行测试

1<view>
2  <lucky-wheel
3    id="myLucky"
4    width="500rpx"
5    height="500rpx"
6    blocks="{{blocks}}"
7    prizes="{{prizes}}"
8    buttons="{{buttons}}"
9    defaultStyle="{{defaultStyle}}"
10    bindstart="start"
11    bindend="end"
12  />
13</view>

1const app = getApp()
2Page({
3  data: {
4    prizes: [
5      { title: '1元红包', background: '#f9e3bb', fonts: [{ text: '1元红包', top: '18%' }] },
6      { title: '100元红包', background: '#f8d384', fonts: [{ text: '100元红包', top: '18%' }] },
7      { title: '0.5元红包', background: '#f9e3bb', fonts: [{ text: '0.5元红包', top: '18%' }] },
8      { title: '2元红包', background: '#f8d384', fonts: [{ text: '2元红包', top: '18%' }] },
9      { title: '10元红包', background: '#f9e3bb', fonts: [{ text: '10元红包', top: '18%' }] },
10      { title: '50元红包', background: '#f8d384', fonts: [{ text: '50元红包', top: '18%' }] },
11    ],
12    defaultStyle: {
13      fontColor: '#d64737',
14      fontSize: '14px'
15    },
16    blocks: [
17      { padding: '13px', background: '#d64737' }
18    ],
19    buttons: [
20      { radius: '50px', background: '#d64737' },
21      { radius: '45px', background: '#fff' },
22      { radius: '41px', background: '#f6c66f', pointer: true },
23      {
24        radius: '35px', background: '#ffdea0',
25        fonts: [{ text: '开始\n抽奖', fontSize: '18px', top: -18 }]
26      }
27    ],
28  },
29  start () {
30    // 获取抽奖组件实例
31    const $lucky = this.selectComponent('#myLucky')
32    // 调用play方法开始旋转
33    $lucky.play()
34    // 用定时器模拟请求接口
35    setTimeout(() => {
36      // 3s 后得到中奖索引
37      const index = Math.random() * 6 >> 0
38      // 调用stop方法然后缓慢停止
39      $lucky.stop(index)
40    }, 3000)
41  },
42  end (event) {
43    // 中奖奖品详情
44    console.log(event.detail)
45  }
46})

如果您觉得这个项目还不错, 可以在 Github 上面帮我点个star ☜(ﾟヮﾟ☜)