微信公众号H5页面跳转到指定的小程序

璞懿子
768 阅读3分钟

一、确认当前公众号是否有关联跳转的小程序

微信公众号H5页面跳转小程序必须关联。 1个公众号可关联 10 个“同主体或关联主体”小程序，3 个非同主体小程序。

  • 进入公众号后台，路径：广告与服务——小程序—小程序管理—添加。
  • 关联小程序——管理员微信扫码确认。
  • 搜索小程序名称或APPID绑定。

image.png

  • 绑定成功等待小程序管理者同意（如果在小程序端，开启了“关联此小程序需要管理员确认”，需要管理者同意），查看路径：登录小程序——设置——管理设置。

image.png

二、公众号添加JS接口安全域名

添加JS接口安全域名是微信公众号平台实施安全策略、保护用户数据隐私、防止恶意攻击、维护平台秩序和用户体验的重要手段。公众号开发者在使用微信JS-SDK时，必须按照规定设置并确保所有涉及接口调用的网页位于已授权的安全域名之下，以确保功能正常使用且符合微信的安全要求。

  • 进入公众号后台，路径：设置与开发——公众号设置——功能设置——设置。

image.png

  • 一个自然月内最多可修改并保存五次。

三、获取小程序的必要参数

  • 要实现H5页面到小程序的跳转，需要知道小程序的以下参数：

    • 小程序原始ID（也称AppID）：这是小程序的唯一标识符，用于在跳转链接中指定目标小程序。gt_ 开头。
    • 页面路径：跳转到小程序的具体页面路径，如 /pages/index/index 或 /product/123。确保该路径正确指向您想让用户访问的小程序页面。

image.png

四、开始跳转小程序

  • 用于页面中提供一个可跳转指定小程序的按钮。使用此标签后，用户需在网页内点击标签按钮方可跳转小程序

  • 注意：使用浏览器或者微信开发工具调试wx-open-launch-weapp开发标签都不会显示，只有在真机中才会有效果（前提还是config接口注入权限验证配置通过）。

<html>
<head>
    <title>H5打开小程序</title>
</head>
<body>
    <wx-open-launch-weapp id="launch-btn" username="gh_xxxx" path="pages/index/index?p1=123&p1=abc">
    <script type="text/wxtag-template">
      <style>.btn { padding: 12px }</style>
      <button class="btn">打开小程序</button>
    </script>
    </wx-open-launch-weapp>
    <!-- 公众号 JSSDK -->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <!--js代码-->
    <script type="text/javascript">
        var btn = document.getElementById('launch-btn');
        btn.addEventListener('launch', function (e) {
            console.log('success');
        });
        btn.addEventListener('error', function (e) {
            console.log('fail', e.detail);
        });
        wx.ready(function () {
            var ua = navigator.userAgent.toLowerCase()
            var isWXWork = ua.match(/wxwork/i) == 'wxwork'
            var isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'
            if (isWeixin) {
                wx.config({
                    //debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
                    appId: 'ccccxxxx4354353453', // 必填，公众号的唯一标识
                    timestamp: 123456, // 必填，生成签名的时间戳
                    nonceStr: 'nonceStr', // 必填，填任意非空字符串即可
                    signature: 'signature', // 必填，填任意非空字符串即可
                    jsApiList: ['showOptionMenu', 'chooseImage', 'previewImage'], // 必填，随意一个接口即可   
                    openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名  
                })
            }
            else {
                alert("请在微信中打开");
            }
        })
    </script>
</body>
</html>

五、官方文档传送门

avatar
文章
阅读
粉丝