当前位置：网站首页 > IT知识 > 正文

手机端H5页面直接打开微信小程序

liuian 2024-12-04 13:45 219 浏览

手机端H5页面直接打开微信小程序，相信这个功能很多同学都会用到，下面我记录一下怎么实现的

这里是用到了微信小程序自带的功能：开放能力 /获取小程序链接 /获取 URL Scheme
注意前提条件：开放范围，针对非个人主体小程序开放。

操作流程

通过服务端接口或在小程序管理后台「工具」-「生成 URL Scheme」入口可以获取打开小程序任意页面的 URL Scheme。适用于从短信、邮件、微信外网页等场景打开小程序。通过 URL Scheme 打开小程序的场景值为 1065。

生成的 URL Scheme 如下所示：weixin://dl/business/?t=*TICKET*

操作步骤

这里我就直接使用小程序的官方后台功能生成url了，首先需要扫码登陆小程序，登陆地址 https://mp.weixin.qq.com/

登陆之后，找到头部导航右上角左右的一个“工具”菜单，如图所示，有个 “生成小程序URL Scheme” 的菜单，点击它：

点击菜单之后，可以看到有几个选项需要填写，根据自己的需要填写相应的值就可以了，如下图所示：

填写完毕后，点击 “生成” 按钮，即可生成在H5中可以直接打开的链接

生成后的协议链接代码： weixin://dl/business/?t=x填写自己生成的xx

在H5页面中使用这段代码

新建一个 html 页面，把下面的代码复制到自己的html中，把生成的链接，替换成自己的，页面的样式可以自己设计修改

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>H5跳转到微信小程序</title>
        <meta name="viewport" id="viewport" content="width=320, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        
    </head>
    <body>
        <div id="appe">
            <div class="content">
                <input type="hidden" value="15" id="pageid">
                <div class="banner">
                    <a href="###" onclick="towxapp()">
                        点击我跳转到微信小程序
                    </a>
                </div>
            </div>
        </div>
        <script>
            function isIosOrAndroid() {
                var u = navigator.userAgent;
                var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
                if (isAndroid) {
                    return 1;
                }
                var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
                if (isiOS) {
                    return 2;
                }
                return 0;
            }
            function towxapp(){
                location.href = 'weixin://dl/business/?t=xx替换成自己的xx';
            }
            var system = isIosOrAndroid()
            if (system == 2) {
                location.href = 'weixin://dl/business/?t=xx替换成自己的xx';
            }
        </script>
    </body>
</html>

最后，把文件放到自己的web服务器上，用手机打开这个页面，就可以实现H5页面，跳转到微信小程序中！

meta content