# 在 uni-app 中使用

当前 uni-app 中各端适配情况

  • H5端:编译正常
  • 微信小程序:编译正常
  • qq小程序:编译正常 (只能使用网络图片)
  • app端:安卓测试正常, ios未测试 (但是不流畅, 有明显卡顿)
  • 其他小程序:未测试

# 方式 1:通过 import 引入

# 1. 安装插件

# npm 安装:
npm install uni-luck-draw

# yarn 安装:
yarn add uni-luck-draw
1
2
3
4
5

# 2. 引入并使用

<template>
  <view>
    <!-- 大转盘抽奖 -->
    <LuckyWheel
      width="600rpx"
      height="600rpx"
      ...你的配置
    />
    <!-- 九宫格抽奖 -->
    <LuckyGrid
      width="600rpx"
      height="600rpx"
      ...你的配置
    />
  </view>
</template>

<script>
  // npm 下载会默认到 node_modules 里面,直接引入包名即可
  import LuckyWheel from 'uni-luck-draw/lucky-wheel' // 大转盘
  import LuckyGrid from 'uni-luck-draw/lucky-grid' // 九宫格

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

  export default {
    // 注册组件
    components: { LuckyWheel, LuckyGrid },
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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

<template>
  <view>
    <LuckyWheel
      ref="luckyWheel"
      width="600rpx"
      height="600rpx"
      :blocks="blocks"
      :prizes="prizes"
      :buttons="buttons"
      :defaultStyle="defaultStyle"
      @start="startCallBack"
      @end="endCallBack"
    />
  </view>
</template>

<script>
  import LuckyWheel from 'uni-luck-draw/lucky-wheel'
  export default {
    components: { LuckyWheel },
    data () {
      return {
        blocks: [
          { padding: '13px', background: '#d64737' }
        ],
        prizes: [
          { title: '1元红包', background: '#f9e3bb', fonts: [{ text: '1元红包', top: '18%' }] },
          { title: '100元红包', background: '#f8d384', fonts: [{ text: '100元红包', top: '18%' }] },
          { title: '0.5元红包', background: '#f9e3bb', fonts: [{ text: '0.5元红包', top: '18%' }] },
          { title: '2元红包', background: '#f8d384', fonts: [{ text: '2元红包', top: '18%' }] },
          { title: '10元红包', background: '#f9e3bb', fonts: [{ text: '10元红包', top: '18%' }] },
          { title: '50元红包', background: '#f8d384', fonts: [{ text: '50元红包', top: '18%' }] },
        ],
        buttons: [
          { radius: '50px', background: '#d64737' },
          { radius: '45px', background: '#fff' },
          { radius: '41px', background: '#f6c66f', pointer: true },
          {
            radius: '35px', background: '#ffdea0',
            fonts: [{ text: '开始\n抽奖', fontSize: '18px', top: -18 }]
          }
        ],
        defaultStyle: {
          fontColor: '#d64737',
          fontSize: '14px'
        },
      }
    },
    methods: {
      // 点击抽奖按钮触发回调
      startCallBack () {
        // 先开始旋转
        this.$refs.luckyWheel.play()
        // 使用定时器来模拟请求接口
        setTimeout(() => {
          // 3s后得到中奖索引
          let index = Math.random() * 6 >> 0
          // 缓慢停止游戏
          this.$refs.luckyWheel.stop(index)
        }, 3000)
      },
      // 抽奖结束触发回调
      endCallBack (prize) {
        // 奖品详情
        console.log(prize)
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69