微信内h5跳转任意已发布的小程序

浮夸夸浮夸

已于 2023-12-20 14:33:18 修改

阅读量424

点赞数 8

文章标签：微信小程序

于 2023-12-20 14:32:33 首次发布

本文链接：https://blog.csdn.net/weixin_38515695/article/details/135105633

版权

介绍的是微信提供的wx-open-launch-weapp标签的跳转。

1、微信公众号后台设置js接口安全域名添加访问的网页的域名。
2、找后台提供一个获取微信签名的接口。
3、前端h5页面参考以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试跳转小程序</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <!-- 引入样式文件 -->
    <style>
        *{
            font-size: 20px;
        }
        input{
            width: 400px;
        }
    </style>

</head>
<body class="bg_body">

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

<wx-open-launch-weapp
        id="launch-btn"
        appid="wx0bxxxxxxxxxxxx"
>
    <template>
        <style>.btn { padding: 12px }</style>
        <button class="btn">打开小程序</button>
    </template>
</wx-open-launch-weapp>

<button type="button" onclick="getwxConfig()">点击获取签名</button>
</body>
<script src="../js/lib/jquery-2.1.4.js"></script>
<script>

    function getwxConfig(){
        $.ajax({
            type: 'get',
            url: '获取签名的接口',
            dataType: 'json',
            success: (res) => {
                if(res.statusCode == 200) {
                    var data_sin=JSON.parse(res.sendData.data);
                    wx.config({
                        debug: true,
                        appId: "wxbxxxxxxxxxxxx",
                        timestamp: data_sin.timestamp,
                        nonceStr: data_sin.noncestr,
                        signature: data_sin.signature,
                        jsApiList: [
                            "onMenuShareTimeline",
                            "onMenuShareAppMessage",
                            "checkJsApi",
                            "scanQRCode"
                        ], 
                        openTagList:['wx-open-launch-weapp'], // 可选，需要使用的开放标签列表，例如['wx-open-launch-weapp','wx-open-launch-app']
                    })
                    wx.ready(function(res){
                        console.log('ressuccess',res);
                    })
                    wx.error(function(res) {
                        console.log('reserror',res);
                      
                    });
                }

            }
        })
    }

</script>
</html>