使用uniapp的WebView实现轮盘抽奖

于 2024-03-27 18:48:10 发布
阅读量918 收藏 17
点赞数 15
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yiyuanpeng2004/article/details/137084066
版权

实现思路

朋友们总是在吃饭的时候纠结到底吃什么好，在哪儿纠结吃这个还是吃这个呢？开始犯上了选择困难症，老是磨磨唧唧的。有一天突发奇想整一个随机抽奖吃饭APP,所以编写了以下代码
这里使用了lucky-canvas的抽奖插件
点击这里进入框架

起初我是想打包成APK放到手机上来方便使用的，但是该插件只支持H5与小程序等，不支持APP端，我就思来想去可以使用WebView来实现这个功能呀！

可以点击这里 实机演示具体实现效果就是这样由于是简单做的一个主要是完成功能，没有注重样式。

这里是UniApp详细代码演示与思路

在代码中我只提供了一个按钮供用户点击跳转到WebView通过路由传参的方式让WebView跳转到内部网页。要实现这个功能也是非常的简单。

<template>
	<view
		style="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>
itYyp&004
关注
  • 15
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp 使用webView通讯
04-04
uniapp 使用webView通讯
uniapp与webview之间的相互传值的实现
10-15
主要介绍了uniapp与webview之间的相互传值的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-uniapp-Lottery-turntable-master抽奖转盘效果 __效果
11-15
vue-uniapp-Lottery-turntable-master抽奖转盘效果 __效果图：https___gaojuqian.com_github_img_cj.gif__使用将index做路由放入文件夹，以及static图片__可以用于uni-app项目 h5,小程序等,app未测试.zip
【记录一下】Uniapp实现转盘抽奖效果
Red_Sugar的博客
08-15 1128
uniapp中使用uni.createAnimation实现转盘效果
vue uniapp js转盘抽奖效果
petie_bole的博客
10-11 335
vue uniapp 简单易懂转盘抽奖效果
uniapp：幸运大转盘demo
sunluyi的博客
10-11 943
幸运大转盘demo
基于uniapp ts 实现微信小程序动态抽奖幸运大转盘
m0_46483779的博客
10-12 1347
注：本人技术比较菜，体谅体谅，有好的建议欢迎提出来。描述不恰当的地方欢迎指正。这是view试图层布局。以下是数据层实现方法。
（uniapp框架）手动封装webview页面与App交互sdk
01-30
自己项目开发中使用的，需求是打通App和webview页面两者之间的数据交互 H5调用App的方法（反之App可以使用该页面的方法）
Android实现WebView删除缓存的方法
01-20
本文实例讲述了Android实现WebView删除缓存的方法。分享给大家供大家参考。具体如下： 删除保存于手机上的缓存： // clear the cache before time numDays private int clearCacheFolder(File dir, long numDays) {...
uniapp 实现抽奖幸运大转盘功能
PrimaryColor
07-20 6157
手写抽奖转盘功能。
抽奖转盘-幸运大转盘-uniapp-项目源码
12-30
这是一个uniapp应用项目源码完整，是个抽奖转盘的游戏插件，幸运大转盘，可添加各种奖品图片和名称，通过HBuilder X开发工具选uniapp方式打开，uniapp项目可编译发行跨端应用（包括了各种小程序以及APP），可编译正常运行，适合新手入门参考学习。 相关指导教程请看作者发表的文章https://blog.csdn.net/zs1028/article/details/127751395
uniapp实现轮盘抽奖-结果后端返回
m0_49914065的博客
07-16 619
转载 萧棠 ，原创文章连接：https://blog.csdn.net/zhaowenxue/article/details/120350432
uniapp实现简单的九宫格抽奖（附源码）
盛国强的博客
10-18 1663
uniapp实现简单的九宫格抽奖
抽奖！抽奖！抽奖！大转盘、九宫格、老虎机开放抽奖组件！
youyudehan的博客
06-27 905
lucky-canvas 组件，只需要简单的配置需要的属性就可以制定自己需要的抽奖功能效果。
幸运大转盘抽奖（前端uniapp）
青春，待续的代名词。
06-25 4327
幸运大转盘抽奖(前端) 无依赖, 简单易用(复制粘贴就能用) 效果图如下
uni-app中使用pixijs绘制兼容H5和微信小程序大转盘游戏
lyj168997的博客
12-07 958
上边的文件是使用的pixi-miniprogram。代码中的data.js为mock数据如下。
uniapp使用luckywheel幸运抽奖
最新发布
wendy_qx的博客
02-26 566
【代码】uniapp使用luckywheel幸运抽奖。
uniapp抽奖转盘
hanjian449的博客
05-21 1695
<template> <view> <!-- <image src="../../static/raffle-wheel/raffle-wheel__action.png" mode="widthFix" @tap="myclick"></image> --> <view class="lala" :animation="xx"> <canvas canvas-id="mycanvas" style="wi
uniapp webview使用摄像头
08-29
uniapp是一款支持跨平台开发的框架，开发者可以使用uniapp来开发包括微信小程序、App、H5等在内的多个平台的应用。在uniapp中，可以通过webview组件来嵌入网页，并且可以使用摄像头功能。 要在uniapp中使用摄像头，需要通过uni.navigateBack和uni.navigateBackMiniProgram这两个API来实现。具体步骤如下： 1. 首先，在页面中引入webview组件，并给webview组件设置一个id，如下： ```html <web-view id="myWebview" src="https://example.com"></web-view> ``` 2. 在页面中使用uni.navigateBack和uni.navigateBackMiniProgram这两个API来回退到嵌入的网页中，如下： ```javascript uni.navigateBack({ delta: 1, // 返回页面的层数 success: function () { // 成功回调函数 } }); uni.navigateBackMiniProgram({ extraData: { foo: 'bar' }, success: function () { // 成功回调函数 } }); ``` 通过以上步骤，就可以在uniapp中使用webview嵌入网页，并且使用摄像头功能。当用户点击返回按钮时，会回退到嵌入的网页中，可以操作网页中的摄像头功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值