h5跳转小程序

最新推荐文章于 2024-06-17 10:01:41 发布

一只快乐的小猴子

最新推荐文章于 2024-06-17 10:01:41 发布

阅读量169

点赞数

分类专栏：小程序 h5

本文链接：https://blog.csdn.net/abcdef12030/article/details/111521700

版权

小程序同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

详情参考文档： wx-open-launch-weapp
确定文档中各项配置正确，如未能正确跳转，请注意 wx-open-launch-weapp标签要写在body标签外层

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<wx-open-launch-weapp id="launchBtn" username="gh_a019fdaed7ff" path="pages/index/index.html">
    <template>
       <style>#btn { padding: 12px;color: saddlebrown; }</style>
       <button id="btn">打开小程序</button>
    </template>
</wx-open-launch-weapp>
<script src="jquery.js"></script>
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
    function getSign() {
        return new Promise((resolve, reject) => {
            let url = encodeURIComponent(location.href);
            fetch('./api.php?url=' + url).then(res => {
                res.json().then(data => {
                    resolve(data)
                })
            })
        });
    }

    getSign().then(sig => {
        wx.config({
            debug: true,
            appId: sig.appId,
            timestamp: sig.timestamp,
            nonceStr: sig.nonceStr,
            signature: sig.signature,
            jsApiList: ["updateTimelineShareData", "updateAppMessageShareData"],
            openTagList: ['wx-open-launch-weapp']
        })
        wx.ready(function() {



            let btn = document.getElementById("launchBtn")


            btn.addEventListener('launch', function(e) {
                console.log('success');
            });

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

            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
        });
        wx.error(function(res) {
            alert("errrror")
                // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
        });
    })
</script>

</html>