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

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。