H5跳转小程序填坑笔记

最新推荐文章于 2025-10-10 15:49:33 发布

原创最新推荐文章于 2025-10-10 15:49:33 发布 · 1.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 专栏收录该内容

31 篇文章

订阅专栏

本文详细记录了H5页面跳转至微信小程序过程中需要注意的坑点，包括必须满足的条件，如认证服务号、配置JS接口安全域名等。通过config接口注入权限配置是关键，解决签名错误、URL域名验证等问题。只有当config认证成功，H5页面的跳转按钮才会显示并生效。最后展示了实现效果和完整代码。

一、H5跳转小程序必须满足的几个条件

1、开发使用者必须是已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
2、开发使用者必须是已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。
3、必须部署到正式服务器。
4、必须是在已认证的服务号中做JS接口安全域名验证。

注意：1、2两个条件必须满足其中一个；3、4两个条件必须满足，否则标签中的按钮不会显示（微信文档不讲武德，写的不清楚，稍微不注意就会掉坑）。
官方文档入口：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21

二、通过config接口注入权限验证配置并申请所需开放标签，否则标签按钮不会显示

function getWxConfig() {
        var url = location.href.split('#')[0];//当前的url
        $.ajax({
            type: "POST",
            url: prefix + "/config",
            dataType: 'json',
            data : {
                "appId" : "微信公众号的APPID",
                "url" : url
            },
            success: function (data) {
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: data.appId, // 必填，公众号的唯一标识
                    timestamp: data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: data.nonceStr, // 必填，生成签名的随机串
                    signature: data.signature,// 必填，签名
                    jsApiList:["updateAppMessageShareData", "updateTimelineShareData", "hideMenuItems"], // 必填，需要使用的JS接口列表
                    openTagList: ["wx-open-launch-weapp"] // 这里必修是这个标签，不然网页标签不生效
                });

                wx.ready(function () {
                    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
                    alert('微信授权成功');
                });

                wx.error(function (res) {
                    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
                    alert(res.data);
                });
            },
            error: function() {
                alert("授权错误")
            }
        });
    }

一般会在这里遇到的问题：
1、63002 签名错误，只要检查授权传入的参数，一般是url的问题
在这里插入图片描述
解决办法：

var url = location.href.split('#')[0];//当前的url

2、40048,invalid url domain [20210205 09:51:59][] 的问题是因为没有做服务号中做JS接口安全域名验证，在公共验证即可；
3、用vue框架开发template不生效问题，可以替换为以下代码：

<wx-open-launch-weapp data-v-7d0e6bf0="" id="launch-btn" username="小程序原始id" path="小程序路径.html?id=XXX(可以带参数，在小程序的onload()接收)"><script type="text/wxtag-template"><div style="width: 210.43199999999996px; height: 110.69599999999998px;"></div></script></wx-open-launch-weapp>

4、使用单页面的H5可以使用内联样式：

<wx-open-launch-weapp id="launch-btn" username="小程序原始id" path="小程序路径.html?id=XXX(可以带参数，在小程序的onload()接收)" style="padding: 12px;width: 100%;height: 50px;">
        <template>
            <button class="btn" style="padding: 12px;width: 100%;height: 50px;">打开小程序</button>
        </template>
</wx-open-launch-weapp>

5、必须引入jweixin-1.6.0.js

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

注意：只有config认证成功，按钮才会生效，功能才会生效。

在这里插入图片描述

三、效果展示

在这里插入图片描述

四、完整代码

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>H5跳转小程序验证</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="yes" name="apple-touch-fullscreen">
    <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
    <div>为啥按钮不显示？</div>
    <wx-open-launch-weapp id="launch-btn" username="小程序原始id" path="小程序路径.html?id=XXX(可以带参数，在小程序的onload()接收)" style="padding: 12px;width: 100%;height: 50px;">
        <template>
            <button class="btn" style="padding: 12px;width: 100%;height: 50px;">打开小程序</button>
        </template>
    </wx-open-launch-weapp>
    <div>为啥按钮不显示？</div>
<div th:include="include::footer"></div>
<script type="text/javascript">
    var prefix = "/api/wx";
    //微信JS授权
    $().ready(function() {
        getWxConfig();
    });

    function getWxConfig() {
        var url = location.href.split('#')[0];//当前的url
        $.ajax({
            type: "POST",
            url: prefix + "/config",
            dataType: 'json',
            data : {
                "appId" : "公众appid",
                "url" : url
            },
            success: function (data) {
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: data.appId, // 必填，公众号的唯一标识
                    timestamp: data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: data.nonceStr, // 必填，生成签名的随机串
                    signature: data.signature,// 必填，签名
                    jsApiList:["updateAppMessageShareData", "updateTimelineShareData", "hideMenuItems"], // 必填，需要使用的JS接口列表
                    openTagList: ["wx-open-launch-weapp"] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
                });

                wx.ready(function () {
                    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
                    alert('微信授权成功');
                });

                wx.error(function (res) {
                    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
                    alert(res.data);
                });
            },
            error: function() {
                alert("授权错误")
            }
        });
    }

    var btn = document.getElementById('launch-btn');
    btn.addEventListener('launch', function (e) {
        console.log('success');
    });

    btn.addEventListener('error', function (e) {
        console.log('fail', e.detail);
    });

</script>
</body>
</html>