轮盘抽奖demo 微信小程序
前言
对微信小程序开发不是很熟悉的,可以去参考一下之前的博客
微信小程序快速入门
一、在微信小程序中使用
- npm 安装
先找到小程序项目的根目录,看是否有package.json文件,如果没有就执行下面的命令来创建该文件
npm init -y
- 安装 npm 包
npm install mini-luck-draw
- 构建 npm
微信开发者工具找到左上角点击 工具 > 构建 npm > 构建成功
- 在
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"
}
}
.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>
.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)
}
})
- 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%;
}