使用uniapp的WebView实现轮盘抽奖

实现思路

朋友们总是在吃饭的时候纠结到底吃什么好，在哪儿纠结吃这个还是吃这个呢？开始犯上了选择困难症，老是磨磨唧唧的。有一天突发奇想整一个随机抽奖吃饭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官网
最后根据实际情况去编写抽奖概率与停止时间。下面是所有源码，如果需要图片资源，可以私信我。

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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><divstyle="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%;"><divid="my-lucky"></div><ahref="HuoGuoRandom.html">切换到火锅</a></div></body><scriptsrc="https://unpkg.com/[email protected]"></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 =newLuckyCanvas.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>

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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><divstyle="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;"><divid="my-lucky"></div><div><ahref="vegetables.html">切换到炒菜</a></div></div></body><scriptsrc="https://unpkg.com/[email protected]"></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 =newLuckyCanvas.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>

标签： uni-app

本文转载自: https://blog.csdn.net/yiyuanpeng2004/article/details/137084066
版权归原作者 itYyp&004 所有，如有侵权，请联系我们删除。

使用uniapp的WebView实现轮盘抽奖

实现思路

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

下面则是Web端的简单小案例

发表评论

“使用uniapp的WebView实现轮盘抽奖”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航