使用uniapp的WebView实现轮盘抽奖
itYyp&004 2024-06-11 17:33:03 阅读 72
实现思路
朋友们总是在吃饭的时候纠结到底吃什么好，在哪儿纠结吃这个还是吃这个呢？开始犯上了选择困难症，老是磨磨唧唧的。有一天突发奇想整一个随机抽奖吃饭APP,所以编写了以下代码
这里使用了lucky-canvas的抽奖插件
点击这里进入框架
起初我是想打包成APK放到手机上来方便使用的，但是该插件只支持H5与小程序等，不支持APP端，我就思来想去可以使用WebView来实现这个功能呀！
可以点击这里 实机演示具体实现效果就是这样由于是简单做的一个主要是完成功能，没有注重样式。
这里是UniApp详细代码演示与思路
在代码中我只提供了一个按钮供用户点击跳转到WebView通过路由传参的方式让WebView跳转到内部网页。要实现这个功能也是非常的简单。
<template><viewstyle="width: 100vw;height: 100vh;background-color: #e7e7e7;display: flex;align-items: center;justify-content: center;"><view class="" style="width: 80%;height: 100rpx;display: flex;align-items: center;justify-content: center;"><view class=""style="background-color:#FC3D49;;width: 150rpx;height: 100rpx;border-radius: 15rpx;display: flex;align-items: center;justify-content: center;"@click="goServiceAgreement"><text style="color:#FFFFFF">le's Go</text></view></view></view></template><script>export default {data() {return {}},methods: {goServiceAgreement() {uni.navigateTo({url: '/pages/webview/webview?url=https://www.zichushi.cn/RandomFood/vegetables.html',});},}}</script>
<template><view class="content"><web-view :src="webViewUrl" @error="handleError"></web-view></view></template><script>export default {data() {return {webViewUrl: ''};},onLoad(options) {this.webViewUrl = decodeURIComponent(options.url);},methods: {handleError(e) {console.error('加载网页出错', e.detail.errMsg);}}};</script>
下面则是Web端的简单小案例
需要去看一下官方文档通过自己的需求进行编码
我这里使用的是LuckyCanvas.LuckyWheel（轮盘）、LuckyCanvas.LuckyGrid（九宫格）、LuckyCanvas.LuckyGrid、SlotMachine（老虎机）其他内容还请自行查看官方文档 LuckyCanvas官网
最后根据实际情况去编写抽奖概率与停止时间。下面是所有源码，如果需要图片资源，可以私信我。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>炒菜轮盘</title></head><style> a { margin: 0 10rpx 0 10rpx; color: #669AFF; text-decoration: none; } a:hover { color: #ff5e00; }</style><body> <div style="flex-direction: column;width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center; background-image: url('/static/image/chenjiajieBg.jpg');background-repeat: no-repeat;background-size: 100% 100%;"> <div id="my-lucky"></div> <a href="HuoGuoRandom.html">切换到火锅</a> </div></body><script src="https://unpkg.com/lucky-canvas@1.7.25"></script><script> /** * @parms {这个是吃炒菜的页面} * */ const prizeImg = [ { src: 'static/chaocai/huiguoro.webp', width: '40%', top: '10%' }, { src: 'static/chaocai/huluobo.webp', width: '40%', top: '10%' }, { src: 'static/chaocai/jiachangdof.webp', width: '40%', top: '10%' }, { src: 'static/chaocai/jianjiao.webp', width: '40%', top: '10%' }, { src: 'static/chaocai/ludofuchaoro.webp', width: '40%', top: '10%' }, { src: 'static/chaocai/mapo.webp', width: '40%', top: '10%' }, { src: 'static/chaocai/qingjiaoros.webp', width: '40%', top: '10%' }, { src: 'static/chaocai/sauntai.webp', width: '40%', top: '10%' }, { src: 'static/chaocai/yumichaoro.webp', width: '40%', top: '10%' }, { src: 'static/chaocai/yuxiangrosi.webp', width: '40%', top: '10%' }, { src: 'static/chaocai/jiejiejie.jpg', width: '40%', top: '10%' } ] const myLucky = new LuckyCanvas.LuckyWheel('#my-lucky', { width: '370px', height: '370px', blocks: [{ padding: '10px', background: '#617df2' }], prizes: [ { background: '#e9e8fe', fonts: [{ text: '回锅肉' }], imgs: [prizeImg[0]] }, { background: '#b8c5f2', fonts: [{ text: '胡萝卜炒肉' }], imgs: [prizeImg[1]] }, { background: '#e9e8fe', fonts: [{ text: '家常豆腐' }], imgs: [prizeImg[2]] }, { background: '#b8c5f2', fonts: [{ text: '尖椒肥肠' }], imgs: [prizeImg[3]] }, { background: '#e9e8fe', fonts: [{ text: '卤豆腐炒肉丝' }], imgs: [prizeImg[4]] }, { background: '#b8c5f2', fonts: [{ text: '麻婆豆腐' }], imgs: [prizeImg[5]] }, { background: '#e9e8fe', fonts: [{ text: '青椒肉丝' }], imgs: [prizeImg[6]] }, { background: '#b8c5f2', fonts: [{ text: '蒜苔炒肉' }], imgs: [prizeImg[7]] }, { background: '#e9e8fe', fonts: [{ text: '玉米肉沫' }], imgs: [prizeImg[8]] }, { background: '#b8c5f2', fonts: [{ text: '鱼香肉丝' }], imgs: [prizeImg[9]] }, }, ], buttons: [{ radius: '15%', background: '#8a9bf3', pointer: true, fonts: [{ text: '干', top: '-10px' }] }], start: function () { console.log(); // 开始游戏 myLucky.play() // 使用定时器模拟接口 setTimeout(() => { const randomIndex = Math.floor(Math.random() * 10); console.log(randomIndex); // 使用随机索引抽取奖品 // 结束游戏 myLucky.stop(randomIndex) }, 3000) } })</script></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>火锅轮盘</title></head><style> a { margin: 0 10rpx 0 10rpx; color: #669AFF; text-decoration: none; } a:hover { color: #ff5e00; }</style><body> <div style="width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center; background-image: url('/static/image/chenjiajieBg.jpg');background-repeat: no-repeat;background-size: 100% 100%;flex-direction: column;"> <div id="my-lucky"></div> <div><a href="vegetables.html">切换到炒菜</a></div> </div></body><script src="https://unpkg.com/lucky-canvas@1.7.25"></script><script> /** * @parms {这个是吃火锅的页面} * */ const prizeImg = [ { src: 'static/image/Cheken.webp', width: '40%', top: '10%' }, { src: 'static/image/GGGGG.webp', width: '40%', top: '10%' }, { src: 'static/image/GuaGua.webp', width: '40%', top: '10%' }, { src: 'static/image/HuoGuo.webp', width: '40%', top: '10%' }, { src: 'static/image/NiuZhi.webp', width: '40%', top: '10%' }, { src: 'static/image/YaZi.webp', width: '40%', top: '10%' } ] const myLucky = new LuckyCanvas.LuckyWheel('#my-lucky', { width: '350px', height: '350px', blocks: [{ padding: '10px', background: '#24ACF2' }], prizes: [ { background: "#F6B819", fonts: [{ text: '干锅鸡' }], imgs: [prizeImg[0]] }, { background: "#F86D42", fonts: [{ text: '食堂的干活' }], imgs: [prizeImg[1]] }, { background: "#07BC9B", fonts: [{ text: '干锅牛蛙' }], imgs: [prizeImg[2]] }, { background: "#F86D42", fonts: [{ text: '重庆火锅' }], imgs: [prizeImg[3]] }, { background: "#F44E50", fonts: [{ text: '干锅牛肉' }], imgs: [prizeImg[4]] }, { background: "#07BC9B", fonts: [{ text: '天柱血浆鸭' }], imgs: [prizeImg[5]] }, ], buttons: [{ radius: '15%', background: '#FC5531', pointer: true, fonts: [{ text: '干', top: '-10px' }] }], start: function () { // 开始游戏 myLucky.play() // 使用定时器模拟接口 setTimeout(() => { const randomIndex = Math.floor(Math.random() * 6); console.log(randomIndex); // 使用随机索引抽取奖品 // 结束游戏 myLucky.stop(randomIndex) }, 3000) } })</script></html>
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。