微信小程序抽奖插件分享

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

小程序抽奖插件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" />

// 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)},}
})

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

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

微信小程序抽奖插件分享相关推荐

微信小程序点播插件_5个常见的小程序插件功能，教你怎么用
微信小程序都有哪些插件可用?这些小程序插件功能,又该如何为企业赋能?下面就带大家了解一下,看完你就明白为什么现在这么多企业都喜欢用小程序来引流拉新,做品牌营销了. 1.小程序直播插件电商直播是近一年 ...
微信小程序点播插件_微信小程序 wxParse插件显示视频问题
修改wxParse/html2json.js 文件 ,在 html2json(html, bindName)方法里 var node = { node: 'element', tag: tag, }; ...
wx-charts 微信小程序图表插件
阅读数:9460 微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧,支持图表类型饼图.线图.柱状图 .区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好 ...
微信小程序将支持分享到朋友圈；美团入局社区团购；Kotlin 1.4-M3 发布 | 极客头条
整理 | 屠敏头图 | CSDN 下载自东方 IC 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧. 一分钟 ...
微信小程序之——自定义分享按钮（完整版）
声明 onShareAppMessage 函数 onShareAppMessage() { return { title: '弹出分享时显示的分享标题' desc: ' ...
微信小程序—页面内分享按钮用图标代替
微信小程序-页面内分享按钮用图标代替前言代码效果图前言张小龙不知道出于什么原因将打开客服会话.触发用户转发.打开授权设置页.打开"意见反馈"页面等功能全都挂载到butto ...
【源码分享】一键打开禅意生活——电子木鱼微信小程序源码分享
为大家推荐一个在线的AI聊天:魔术AI-8080n点cn界面简洁精美,免费点开即用在快节奏的现代生活中,我们需要一种方式来减轻压力和焦虑,让我们的身心得到放松和平静.电子木鱼微信小程序是一款专门为人 ...
微信小程序OCR插件使用指南
业务场景:通过微信小程序扫描身份证获取详细内容. 概览微信小程序的插件扩展提供了ocr(光学字符识别)插件用来提供身份证,驾驶证,图片文字识别等常见的图片文本识别功能.能够满足大部分依赖图片文本识别 ...
微信小程序非webview分享给好友及生成分享海报
微信小程序非webview分享给好友及分享海报 UI展示点击分享显示分享sheet: 点击生成海报,展示海报预览图片: 组件目录结构: 代码 works文件 woks.json中引入: " ...

微信小程序抽奖插件分享

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

微信小程序抽奖插件分享相关推荐

最新文章

热门文章