H5跳转小程序

1,033 阅读1分钟

使用微信JS-SDK: 在HTML5页面中,可以通过调用微信JS-SDK中的wx.navigateToMiniProgram方法实现跳转。首先需要在微信开放平台获取相应的权限和配置,然后在页面中引入微信JS-SDK,并在合适的时机调用跳转方法。
给个案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H5跳转小程序</title>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
    <button id="goToMiniProgram">跳转到小程序</button>

    <script>
        document.getElementById('goToMiniProgram').onclick = function() {
            wx.navigateToMiniProgram({
                appId: 'xxxxx', // 小程序的原始 ID
                path: 'pages/index/index', // 小程序页面的路径
                extraData: {
                    // 可以传递给小程序的参数
                },
                envVersion: 'release', // 可选,默认为 'release'
                success(res) {
                    // 跳转成功
                    console.log('跳转成功', res);
                },
                fail(err) {
                    // 跳转失败
                    console.error('跳转失败', err);
                }
            });
        };
    </script>
</body>
</html>

官方说明

image.png