uniap 动态启动页

  1. 在src路径下新建hybrid 文件夹,结构如下:
    微信图片_20220628165906.png
//advertise.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>广告启动页</title>
        <link rel="stylesheet" href="../css/advertise.css">
        <!-- uni 的 SDK -->
        <script type="text/javascript" src="../js/webView.js"></script>
    </head>
    <body>
        <div class="content">
            <div class="con">
                <img id="img" src="##">
            </div>
            <div class="btn" id="timer">
                <div id="info">跳过</div>
                <div class="circleProgress_wrapper btn">
                    <div class="wrapper right">
                        <div class="circleProgress rightcircle"></div>
                    </div>
                    <div class="wrapper left">
                        <div class="circleProgress leftcircle"></div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
//仅展示图片版
        var params = location.search.substr(1);
        console.log(location.search)
        document.getElementById("img").src = params
        document.addEventListener('UniAppJSBridgeReady', function() {
            document.querySelector('.btn').addEventListener('click', function(e) {
                if (e.isTrusted) {
                    plus.webview.currentWebview().close();
                }
            });
        });
//可以跳转广告链接版代码
        var query = decodeURI(location.search.substring(1));
        var vars = query.split("&");//分割参数成数组
        var url = ""
        var image = ''
        vars.forEach((item, i) => { //循环遍历拿到参数并赋值
            var pair = item.split("=");
            if (pair[0] == 'img') {
                image = pair[1]
                document.getElementById("img").src = pair[1]
            }
            if (pair[0] == 'url') {
                url = pair[1]
            }
            // console.log(item,pair,i)
        })
        console.log(url, "aaa", image, "image")
        // 点击图片
        document.getElementById("img").addEventListener('click', function(e) {
            location.href = url
        });
//下面代码两种都需要
        document.addEventListener('UniAppJSBridgeReady', function() {
            document.querySelector('.btn').addEventListener('click', function(e) {
                if (e.isTrusted) {
                    plus.webview.currentWebview().close();
                }
            });
        });
    </script>
</html>


//advertise.css
* {
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
}

.content {
    width: 100%;
    height: 100%;
}

.content .con {
    width: 100%;
    height: 100%;
    font-size: 0;
    display: flex;
    align-items: center;
}

#img {
    width: 100%;
    height: 100%;
}

#timer {
    display: inline-block;
    position: fixed;
    top: 40px;
    right: 10px;
}

#info {
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.3);
    text-align: center;
    color: #FFFFFF;
    font-size: 12px;
}

.circleProgress_wrapper {
    width: 36px;
    height: 36px;
    position: relative;
}

.wrapper {
    width: 18px;
    height: 36px;
    position: absolute;
    top: 0;
    overflow: hidden;
}

.right {
    right: 0;
}

.left {
    left: 0;
}

.circleProgress {
    width: 32px;
    height: 32px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    position: absolute;
    top: 0;
    -webkit-transform: rotate(45deg);
}

.rightcircle {
    border-top: 2px solid #03A9F4;
    border-right: 2px solid #03A9F4;
    right: 0;
    -webkit-animation: circleProgressLoad_right 4s linear;
    /*动画停留在最后一帧*/
    animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
}

.leftcircle {
    border-bottom: 2px solid #03A9F4;
    border-left: 2px solid #03A9F4;
    left: 0;
    -webkit-animation: circleProgressLoad_left 4s linear;
    /*动画停留在最后一帧*/
    animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
}

@-webkit-keyframes circleProgressLoad_right {
    0% {
        border-top: 2px solid #03A9F4;
        border-right: 2px solid #03A9F4;
        -webkit-transform: rotate(45deg);
    }

    50% {
        border-top: 2px solid #03A9F4;
        border-right: 2px solid #03A9F4;
        border-left: 2px solid #FFFFFF;
        border-bottom: 2px solid #FFFFFF;
        -webkit-transform: rotate(225deg);
    }

    100% {
        border-left: 2px solid #FFFFFF;
        border-bottom: 2px solid #FFFFFF;
        -webkit-transform: rotate(225deg);
    }
}

@-webkit-keyframes circleProgressLoad_left {
    0% {
        border-bottom: 2px solid #03A9F4;
        border-left: 2px solid #03A9F4;
        -webkit-transform: rotate(45deg);
    }

    50% {
        border-bottom: 2px solid #03A9F4;
        border-left: 2px solid #03A9F4;
        border-top: 2px solid #FFFFFF;
        border-right: 2px solid #FFFFFF;
        -webkit-transform: rotate(45deg);
    }

    100% {
        border-top: 2px solid #FFFFFF;
        border-right: 2px solid #FFFFFF;
        -webkit-transform: rotate(225deg);
    }
}


wevView.js

!function(e,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):e.uni=i()}(this,function(){"use strict";var e={},o=[],s=/uni-app/i.test(navigator.userAgent),i=function(e,i){if(0===o.length&&s){var n=plus.webview.currentWebview();if(!n)throw new Error("plus.webview.currentWebview() is undefined");var t=n.parent();if(!t)throw new Error("plus.webview.currentWebview().parent() is undefined");o.push(t.id)}var a={options:{timestamp:+new Date},name:e,arg:i};if(s){var r=JSON.stringify(a);plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("WEB_INVOKE_APPSERVICE",'+r+","+JSON.stringify(o)+");")}else window.parent.postMessage({type:"WEB_INVOKE_APPSERVICE",data:a,pageId:""},"*")};e.navigateTo=function(){var e=(0<arguments.length&&void 0!==arguments[0]?arguments[0]:{}).url;i("navigateTo",{url:encodeURI(e)})},e.navigateBack=function(){var e=(0<arguments.length&&void 0!==arguments[0]?arguments[0]:{}).delta;i("navigateBack",{delta:parseInt(e)||1})},e.switchTab=function(){var e=(0<arguments.length&&void 0!==arguments[0]?arguments[0]:{}).url;i("switchTab",{url:encodeURI(e)})},e.reLaunch=function(){var e=(0<arguments.length&&void 0!==arguments[0]?arguments[0]:{}).url;i("reLaunch",{url:encodeURI(e)})},e.redirectTo=function(){var e=(0<arguments.length&&void 0!==arguments[0]?arguments[0]:{}).url;i("redirectTo",{url:encodeURI(e)})},e.getEnv=function(e){e(s?{plus:!0}:{h5:!0})},e.postMessage=function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};i("postMessage",e.data||{})};var n={};"undefined"!=typeof wx&&wx.miniProgram&&(n.navigateTo=wx.miniProgram.navigateTo,n.navigateBack=wx.miniProgram.navigateBack,n.switchTab=wx.miniProgram.switchTab,n.reLaunch=wx.miniProgram.reLaunch,n.redirectTo=wx.miniProgram.redirectTo,n.postMessage=wx.miniProgram.postMessage,n.getEnv=wx.miniProgram.getEnv);var t={};-1<navigator.userAgent.indexOf("AlipayClient")&&"undefined"!=typeof my&&(t.navigateTo=my.navigateTo,t.navigateBack=my.navigateBack,t.switchTab=my.switchTab,t.reLaunch=my.reLaunch,t.redirectTo=my.redirectTo,t.postMessage=my.postMessage,t.getEnv=my.getEnv);var a={};"undefined"!=typeof swan&&swan.webView&&(a.navigateTo=swan.webView.navigateTo,a.navigateBack=swan.webView.navigateBack,a.switchTab=swan.webView.switchTab,a.reLaunch=swan.webView.reLaunch,a.redirectTo=swan.webView.redirectTo,a.postMessage=swan.webView.postMessage,a.getEnv=swan.webView.getEnv);var r={};"undefined"!=typeof tt&&tt.miniProgram&&(r.navigateTo=tt.miniProgram.navigateTo,r.redirectTo=tt.miniProgram.redirectTo,r.reLaunch=tt.miniProgram.reLaunch,r.switchTab=tt.miniProgram.switchTab,r.navigateBack=tt.miniProgram.navigateBack);var d=navigator.userAgent,c=/uni-app/i.test(d),g=/micromessenger/i.test(d),w=/AlipayClient/.test(d),u=/swan/i.test(d),v=/toutiaomicroapp/i.test(d),m={},p=function(){window.UniAppJSBridge=!0,document.dispatchEvent(new CustomEvent("UniAppJSBridgeReady",{bubbles:!0,cancelable:!0}))};return c?(m=e,window.plus&&/complete|loaded|interactive/.test(document.readyState)?p():document.addEventListener("plusready",p)):g?(m=n,window.WeixinJSBridge&&WeixinJSBridge.invoke?p():document.addEventListener("WeixinJSBridgeReady",p)):(m=w?t:u?a:v?r:e,document.addEventListener("DOMContentLoaded",p)),m});
  1. App.vue中 onLaunch调用
    async onLaunch() {
//通过接口请求动态的图片,再通过url传给html页面
            // #ifdef APP-PLUS
            uni.request({
                url: `${this.globalData.BASE_URL}/addons/shopro/user_center/get_kaipin`,
                method: 'GET',
                data: '',
                header: {},
                success(res) {
                    const {
                        code,
                        data
                    } = res.data
                    if (code == 1) {
                        let pageid = data.image
                        plus.navigator.closeSplashscreen();
                        var w = plus.webview.open(
                  //如果仅展示图片就这样跳转
                            `hybrid/html/advertise/advertise.html?${pageid}`,
                  //跳转广告链接版 ,除这两句不同,其他代码都一样
                `hybrid/html/advertise/advertise.html?img=${pageid}&url=${url}`,
                            '本地地址', {
                                top: 0,
                                bottom: 0,
                                zindex: 999
                            },
                            'fade-in',
                            500
                        );
                        //设置定时器，4s后关闭启动广告页
                        setTimeout(function() {
                            plus.webview.close(w);
                        }, 4000);
                    }
                },
            })
            // #endif
}

相应配置

微信图片_20220628170639.png

微信图片_20220628170643.png

声明: 代码来自网上,综合搜索,解决了问题,特此记录一下,侵删

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,423评论 6赞 491
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,147评论 2赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,019评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,443评论 1赞 283
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,535评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,798评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,941评论 3赞 407
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,704评论 0赞 266
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,152评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,494评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,629评论 1赞 340
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,295评论 4赞 329
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,901评论 3赞 313
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,742评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,978评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,333评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,499评论 2赞 348