h5实现自动跳转到指定页面的小程序

进入h5页面自动跳转到小程序的条件，必须要后端返回跳转地址，具体使用方法可以参考开发文档

https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.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>
    </head>

<body>
    <div id="app" class="app">
        <div id="wechat-container">

        </div>
    </div>
    <script>
         // 获取连接中的search
        function getQueryVariable(variable) {
            var url = window.location.href.substring(window.location.href.indexOf('?'));
            var theRequest = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                }
            }
            return theRequest[variable] || false;
        }
        
        function docReady(fn) {
            if (document.readyState === 'complete' || document.readyState === 'interactive') {
                fn()
            } else {
                document.addEventListener('DOMContentLoaded', fn);
            }
        }
        docReady(async function () {
            const ua = navigator.userAgent.toLowerCase(); // 浏览器ua识别类型
            const isWXWork = ua.match(/wxwork/i) == 'wxwork'; // 判断是否有微信线程
            const isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'; // 是否是微信浏览器
            // 判断是否是桌面浏览器
            let isDesktop = false
            if (!navigator.userAgent.match(
                    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) {
                isDesktop = true
            }
            if (isDesktop) {
                var cu = document.getElementById('wechat-container');
                cu.innerHTML = '<div class="app-btn">请在手机微信里扫码访问</div>';
                // alert("请用手机打开")
            } else if (isWeixin) {
                getScheme();
            } else {
                var cu = document.getElementById('wechat-container');
                cu.innerHTML = '<div class="app-btn">请在手机微信里扫码访问</div>';
            }
        });
        // 外链
        function getScheme() {
            let addr = getQueryVariable('addr');
            const url = 'https:/XXX/url_scheme'
            const xhr = new XMLHttpRequest();
            xhr.open('POST', url, true);
            xhr.setRequestHeader("Content-type", "application/json");
            let jumpQuery = 'code%3D' + addr; // 参数
            let query = {
                jumpPath: '/pages/index/index', // 需要跳转的小程序页面
                jumpQuery: jumpQuery  // 传入小程序页面的参数
            }
            xhr.send(JSON.stringify(query));
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    let data = JSON.parse(xhr.responseText).data;
                    let status = JSON.parse(xhr.responseText).status;
                    if (status === 0) {
                        location.href = data.openLink; // 跳转到后端返回的小程序地址  如weixin://dl/business/?t=NX8lFDmrCnf
                    } else {
                        alert(JSON.parse(xhr.responseText).msg)
                    }
                }
            }

        }
    </script>
</body>

</html>

posted on 2022-05-19 10:49 打怪升级小妮子阅读(720) 评论(0) 收藏举报