mini-luck-draw

1.1.1 • Public • Published
logo

微信小程序 抽奖组件

一个基于微信小程序的 ( 大转盘 / 九宫格 ) 抽奖插件

stars forks version downloads

author license

官方文档

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



在 微信小程序 中使用

方式 1:通过 npm 安装

  1. 先找到小程序项目的根目录,看是否有package.json文件,如果没有就执行下面的命令来创建该文件
npm init -y
  1. 安装 npm 包
npm install mini-luck-draw
  1. 构建 npm

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

  1. 引入自定义组件
{
  "usingComponents": {
    "lucky-wheel":"/miniprogram_npm/mini-luck-draw/lucky-wheel/index",
    "lucky-grid":"/miniprogram_npm/mini-luck-draw/lucky-grid/index"
  }
}
  1. 我在这里提供一个简略的 demo 供你进行测试
<view>
  <lucky-wheel
    id="myLucky"
    width="500rpx"
    height="500rpx"
    blocks="{{blocks}}"
    prizes="{{prizes}}"
    buttons="{{buttons}}"
    defaultStyle="{{defaultStyle}}"
    bindstart="start"
    bindend="end"
  />
</view>
const app = getApp()
Page({
  data: {
    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%' }] },
    ],
    defaultStyle: {
      fontColor: '#d64737',
      fontSize: '14px'
    },
    blocks: [
      { padding: '13px', background: '#d64737' }
    ],
    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 }]
      }
    ],
  },
  start () {
    // 获取抽奖组件实例
    const $lucky = this.selectComponent('#myLucky')
    // 调用play方法开始旋转
    $lucky.play()
    // 用定时器模拟请求接口
    setTimeout(() => {
      // 3s 后得到中奖索引
      const index = Math.random() * 6 >> 0
      // 调用stop方法然后缓慢停止
      $lucky.stop(index)
    }, 3000)
  },
  end (event) {
    // 中奖奖品详情
    console.log(event.detail)
  }
})

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


Readme

Keywords

none

Package Sidebar

Install

npm i mini-luck-draw

Weekly Downloads

0

Version

1.1.1

License

BSD 3-Clause

Unpacked Size

226 kB

Total Files

17

Last publish

Collaborators

  • buuing
  • ldq404