lucky-canvas轮盘抽奖demo

轮盘抽奖demo 微信小程序

前言

对微信小程序开发不是很熟悉的,可以去参考一下之前的博客
微信小程序快速入门

一、在微信小程序中使用

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

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

  1. xx.json引入自定义组件,如下图,在luck.json中引入

这里还引入了2个vant-ui组件。关于vant-ui的入门,前言提到的文章里面有介绍。

在这里插入图片描述

 {
  "usingComponents": {
    "lucky-wheel":"/miniprogram_npm/mini-luck-draw/lucky-wheel/index",
    "lucky-grid":"/miniprogram_npm/mini-luck-draw/lucky-grid/index",
    "van-dialog": "@vant/weapp/dialog/index",
    "van-image": "@vant/weapp/image/index"
  }
}
  1. .wxml
<view class="container_view">

    <image class="logo_img" src="../../static/cake.jpeg" mode="widthFix" lazy-load="false" binderror="" bindload="" />

    <view class="font">
      <text>公平抽奖!童叟无欺!一发入魂,所有奖品等概率~~</text>
    </view>

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


 
 
  <van-dialog id="van-dialog" />
</view>

  1. .js
    在js代码中,使用了一个vant-ui的对话框Dialog组件,因此js代码顶部有引入该组件,
// pages/luck/luck.js
import Dialog from '/@vant/weapp/dialog/dialog';
var _this=null;
Page({


  /**
   * 页面的初始数据
   */
  data: {
    prizes: [
      { title: '迪奥999口红', background: '#f9e3bb', fonts: [{ text: '迪奥999口红', top: '18%' }] },
      { title: '冰希黎幻彩鎏金香水', background: '#f8d384', fonts: [{ text: '冰希黎幻彩鎏金香水', top: '18%' }] },
      { title: '贝壳台式led化妆镜', background: '#f9e3bb', fonts: [{ text: '贝壳台式led化妆镜', top: '18%' }] },
      { title: '三生有幸999纯银项链', background: '#f8d384', fonts: [{ text: '三生有幸999纯银项链', top: '18%' }] },
      { title: '浪漫玫瑰花束', background: '#f9e3bb', fonts: [{ text: '浪漫玫瑰花束', top: '18%' }] },
      { title: '66元红包', background: '#f8d384', fonts: [{ text: '66元红包', 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 child = this.selectComponent('#myLucky')
    // 调用play方法开始旋转
    child.$lucky.play()
    // 用定时器模拟请求接口
    setTimeout(() => {
      // 3s 后得到中奖索引
      const index = Math.random() * 6 >> 0
      // 调用stop方法然后缓慢停止
      child.$lucky.stop(index)
    }, 3000)
  },

  end (event) {
    // 中奖奖品详情
    //当抽中奖品后弹窗提示。
    Dialog.alert({
      context: this,
      title: '恭喜抽中!',
      message: event.detail.title
    }).then(() => {
      // on close
    });
    
    console.log(event.detail)
  }
})
  1. wss样式文件
.logo_img{
  width: 100%;
  padding-bottom: 5%;
}
.container_view {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  background-color: pink;
  padding-bottom: 150rpx;
}

.font{
  padding-top: 0.25rem;
  color: black;
  text-align: center;
  font-size: 2rem;
  padding-bottom: 5%;
}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值