微信公众号H5页面跳转小程序_微信公众号调起小程序 jsapi

作者：小小林熬夜学编程 | 2024-05-08 05:35:03

踩

微信公众号调起小程序 jsapi

    <script src="../js/jquery-1.8.2.min.js"></script>
    <script src='http://res.wx.qq.com/open/js/jweixin-1.6.0.js'></script>
1
2

<body>
<div id="launch-btn">
</div>
</body>
1
2
3
4

微信签名

                wx.config({
                    // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    debug: false,
                    // 必填，公众号的唯一标识
                    appId: arr[0],
                    // 必填，生成签名的时间戳
                    timestamp: arr[2],
                    // 必填，生成签名的随机串
                    nonceStr: arr[1],
                    // 必填，签名
                    signature: arr[4],
                    // 必填，需要使用的JS接口列表
                    jsApiList: ["startRecord", "stopRecord", "onVoiceRecordEnd", "playVoice", "pauseVoice", "stopVoice", "onVoicePlayEnd", "uploadVoice", "downloadVoice", "chooseImage", "previewImage", "uploadImage", "downloadImage", "translateVoice", "getNetworkType", "openLocation", "getLocation"],
                    openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
                });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

动态配置跳转链接

var btn = document.getElementById('launch-btn');
        var content = `<template><style>.btn { width:52%;padding: 12px;border:none;color:white;border-radius: 10px;height:60px;background-color: #639EFD;font-size: 18px;margin-top: 20pt}p{color:#999999;margin-top: 40pt}img{width: 50%;margin-top: 80pt}.content{margin: 0 auto;text-align: center}</style>
        <div class='content'>
        <img src='http://weixin.happy-ti.com/weixinpay/image/redirectQrcodeBg.png'>
        <p>点击跳转到xxxx</p>
        <button class='btn'>点击跳转</button>
        </div>
        </template>`;
        let script = document.createElement("script");// 创建script内容插槽 避免template标签冲突
        script.type = "text/wxtag-template"; // 使用script插槽 必须定义这个type
        script.text = content // 自定义的html字符串内容
        let html = "<wx-open-launch-weapp style='width:100%;display:block;' username='gh_xxxxxx' path=" + pageUrl + ">" + content + "</wx-open-launch-weapp>";
        btn.innerHTML = html; // html字符串赋值

        btn.addEventListener('launch', function (e) {
            console.log('success');
        });
        btn.addEventListener('error', function (e) {
            alert(e.detail)
        });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/553056

微信公众号H5页面跳转小程序_微信公众号 调起小程序 jsapi

微信公众号H5页面跳转小程序_微信公众号调起小程序 jsapi