h5页面打开自动跳转小程序

news2024/11/28 19:48:39

移动端项目中打开页面，直接跳转到小程序功能
效果图

pc
mobile

代码

样式代码css：

<style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        .full {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .public-web-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .public-web-container p {
            position: absolute;
            top: 40%;
        }

        .public-web-container a {
            position: absolute;
            bottom: 40%;
        }

        .weui-btn_primary {
            background-color: #07c160;
        }

        .weui-btn {
            display: block;
            width: 184px;
            margin-left: auto;
            margin-right: auto;
            padding: 8px 24px;
            box-sizing: border-box;
            font-weight: 700;
            font-size: 17px;
            text-align: center;
            text-decoration: none;
            color: #fff;
            line-height: 1.41176471;
            border-radius: 4px;
            overflow: hidden;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
    </style>

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title</title>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    
</head>

<body onload='openWeapp();'>
    <div id="public-web-container" class="full public-web-container">
        <p class="">正在打开 “添加邀请”...</p>
        <a id="myLink" href="javascript:void(0);" class="weui-btn weui-btn_primary" onclick="openWeapp()">
            打开小程序
        </a>
    </div>
    <div class="public-web-container" style="display: none;">
        若安卓端没有跳转方法，则显示此内容
    </div>
</body>

</html>

js:

        function openWeapp() {
            var userAgent = navigator.userAgent.toLowerCase(); //获取userAgent
            if (userAgent.match(/MicroMessenger/i) == "micromessenger") {
                //ios的ua中无miniProgram，但都有MicroMessenger（表示是微信浏览器）
                wx.miniProgram.getEnv((res) => {
                    if (res.miniprogram) {
                        wx.miniProgram.navigateTo({
                            url: "/packageB/pages/specialSubject/CSBegin"
                        });
                    } else {
                        test()
                    }
                })
            } else {
                // 不在微信里
                if (userAgent.toLowerCase().indexOf('fjw') > -1) {  //苹果
                    const a = document.getElementById("myLink")
                    a.setAttribute('href', 'weixin://dl/business/?appid=...')
                    a.click()
                }
                else if (userAgent.toLowerCase().indexOf('android-feijiu') > -1) {//安卓
                    // todo 安卓APP端跳转
                    window.isAndroid.pullUpWechatMiniProgram("小程序路径");
                    // test()
                }
                else {
                    // test()
                    const a = document.getElementById("myLink")
                    a.setAttribute('href', 'weixin://dl/business/?appid=...')
                    a.click()
                }
            }
        }
        // todo 安卓APP端跳转
        function test() {
            const xcx = document.getElementById('public-web-container')
            xcx.style.display = 'none';
        }