微信小程序抽奖插件分享

微信小程序开发抽奖功能分享

小程序抽奖插件github地址

该网站有这么多示例可以选择


下面演示编写如何在微信小程序中使用

1.先找到小程序项目的根目录，看是否有package.json文件，如果没有再执在这里插入代码片行下面的命令来创建该文件

npm init -y

2.安装 npm 包

npm install @lucky-canvas/mini@latest

3.构建 npm

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

json

{
  "usingComponents": {
    "lucky-wheel": "/miniprogram_npm/@lucky-canvas/mini/lucky-wheel/index",
    "lucky-grid": "/miniprogram_npm/@lucky-canvas/mini/lucky-grid/index"
    "slot-machine": "/miniprogram_npm/@lucky-canvas/mini/slot-machine/index"
  },
    "navigationBarTitleText": "抽奖"
}

wxml

 <lucky-grid id="myLucky" width="600rpx" height="600rpx" blocks="{{blocks}}" prizes="{{prizes}}" buttons="{{buttons}}" bindstart="start" bindend="end" />

js

// components/dial/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
  },
  /**
   * 组件的初始数据
   */
  data: {
    blocks: [{
      padding: '20px',
      imgs: [{
          src: '/image/k_bg.gif',
          width: '100%',
          height: '100%'
      }]
  }],
  prizes: [
      {
          x: 0, y: 0, range: 1, fonts: [{ text: '一等奖', top: '60px', fontSize: '14px' }], imgs: [{
              src: '/image/k_bg0.png',
              activeSrc: '/image/k_bg1.png',
              width: '100%',
              height: '100%'
          },
          {
              src: '/image/prizes-1.png',
              width: '50%',
              top: '20%'
          }]
      },
      {
          x: 1, y: 0, range: 5, fonts: [{ text: '二等奖', top: '60px', fontSize: '14px' }], imgs: [{
              src: '/image/k_bg0.png',
              activeSrc: '/image/k_bg1.png',
              width: '100%',
              height: '100%'
          }, {
              src: '/image/prizes-1.png',
              width: '50%',
              top: '20%'
          }
          ]
      },
      {
          x: 2, y: 0, range: 5, fonts: [{ text: '二等奖', top: '60px', fontSize: '14px' }], imgs: [{
              src: '/image/k_bg0.png',
              activeSrc: '/image/k_bg1.png',
              width: '100%',
              height: '100%'
          }, {
              src: '/image/prizes-1.png',
              width: '50%',
              top: '20%'
          }]
      },
      {
          x: 2, y: 1, range: 9, fonts: [{ text: '三等奖', top: '60px', fontSize: '14px' }], imgs: [{
              src: '/image/k_bg0.png',
              activeSrc: '/image/k_bg1.png',
              width: '100%',
              height: '100%'
          }, {
              src: '/image/prizes-1.png',
              width: '50%',
              top: '20%'
          }]
      },
      {
          x: 2, y: 2, range: 9, fonts: [{ text: '三等奖', top: '60px', fontSize: '14px' }], imgs: [{
              src: '/image/k_bg0.png',
              activeSrc: '/image/k_bg1.png',
              width: '100%',
              height: '100%'
          }, {
              src: '/image/prizes-1.png',
              width: '50%',
              top: '20%'
          }]
      },
      {
          x: 1, y: 2, range: 9, fonts: [{ text: '三等奖', top: '60px', fontSize: '14px' }], imgs: [{
              src: '/image/k_bg0.png',
              activeSrc: '/image/k_bg1.png',
              width: '100%',
              height: '100%'
          }, {
              src: '/image/prizes-1.png',
              width: '50%',
              top: '20%'
          }]
      },
      {
          x: 0, y: 2, range: 31, fonts: [{ text: '谢谢参与', top: '60px', fontSize: '14px' }], imgs: [{
              src: '/image/k_bg0.png',
              activeSrc: '/image/k_bg1.png',
              width: '100%',
              height: '100%'
          }, {
              src: '/image/prizes-0.png',
              width: '50%',
              top: '20%'
          }]
      },
      {
          x: 0, y: 1, range: 31, fonts: [{ text: '谢谢参与', top: '60px', fontSize: '14px' }], imgs: [{
              src: '/image/k_bg0.png',
              activeSrc: '/image/k_bg1.png',
              width: '100%',
              height: '100%'
          }, {
              src: '/image/prizes-0.png',
              width: '50%',
              top: '20%'
          }]
      },
  ],
  buttons: [
      {
          x: 1, y: 1,
          range: [1, 5, 5, 9, 9, 9, 31, 31],
          background: 'rgba(0,0,0,0)',
          imgs: [{
              src: '/image/dianjichoujiangd.png',
              width: '100%',
              height: '100%',
          }],
      },
  ],
  defaultConfig: {
      accelerationTime: 3000,
      decelerationTime: 3000
  },
},
  /**
   * 组件的方法列表
   */
  methods: {
    start() {
      // 获取抽奖组件实例
      const child = this.selectComponent('#myLucky')
      // 调用play方法开始旋转
      child.lucky.play()
      // 用定时器模拟请求接口
      setTimeout(() => {
          // 3s 后得到中奖索引 (假设抽到第0个奖品) 这里可以控制能让用户抽到第几个 我这里是0 就是 一等奖
          const idx = 0;
          // 调用stop方法然后缓慢停止
          child.lucky.stop(idx)
      }, 3000)
  },
  end(event) {
      // 中奖奖品详情
      console.log(event.detail)
  },

  }
})

这样我们刷新页面即可实现抽奖功能;

*如果遇到报错重启小程序即可