uniap 動態(tài)啟動頁

在src路徑下新建hybrid 文件夾,結(jié)構(gòu)如下:

微信圖片_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();
                }
            });
        });
//可以跳轉(zhuǎn)廣告鏈接版代碼
        var query = decodeURI(location.search.substring(1));
        var vars = query.split("&");//分割參數(shù)成數(shù)組
        var url = ""
        var image = ''
        vars.forEach((item, i) => { //循環(huán)遍歷拿到參數(shù)并賦值
            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});

App.vue中 onLaunch調(diào)用

    async onLaunch() {
//通過接口請求動態(tài)的圖片,再通過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(
                  //如果僅展示圖片就這樣跳轉(zhuǎn)
                            `hybrid/html/advertise/advertise.html?${pageid}`,
                  //跳轉(zhuǎn)廣告鏈接版 ,除這兩句不同,其他代碼都一樣
                `hybrid/html/advertise/advertise.html?img=${pageid}&url=${url}`,
                            '本地地址', {
                                top: 0,
                                bottom: 0,
                                zindex: 999
                            },
                            'fade-in',
                            500
                        );
                        //設(shè)置定時器硼被，4s后關(guān)閉啟動廣告頁
                        setTimeout(function() {
                            plus.webview.close(w);
                        }, 4000);
                    }
                },
            })
            // #endif
}

相應(yīng)配置

微信圖片_20220628170639.png

微信圖片_20220628170643.png

聲明: 代碼來自網(wǎng)上,綜合搜索,解決了問題,特此記錄一下,侵刪