微信小程序开发抽奖功能分享
该网站有这么多示例可以选择
下面演示编写如何在微信小程序中使用
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)
},
}
})
这样我们刷新页面即可实现抽奖功能;
*如果遇到报错重启小程序即可
扫描二维码关注公众号，回复：
15503580 查看本文章
